20200624 - Babel

[onvno]

• babel-runtime和babel-polyfill的作用介绍和使用
• Babel之babel-polyfill、babel-runtime、transform-runtime详解
• @babel/runtime

文章介绍babel-polyfill会重复引入，覆盖全局变量，

const key = 'babel'
const obj = {
    [key]: 'polyfill',
}

babel-polyfill引入后转为

function _defineProperty(obj, key, value) {
    if (key in obj) {
        Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });
    } else {
        obj[key] = value;
    }
    return obj;
}
var key = 'babel';
var obj = _defineProperty({}, key, Object.assign({}, { key: 'polyfill' }));

runtime好是好，类似异步加载，不会多次加载，不会污染全局变量，但是不完整，需要配合其他包一起使用preset使用.

runtime引入后转化效果

var _defineProperty2 = __webpack_require__("./node_modules/babel-runtime/helpers/defineProperty.js");

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _assign = __webpack_require__("./node_modules/babel-runtime/core-js/object/assign.js");

var _assign2 = _interopRequireDefault(_assign);

function _interopRequireDefault(obj) { 
    return obj && obj.__esModule ? obj : { default: obj }; 
}

var key = 'babel';
var obj = (0, _defineProperty3.default)(
            {}, key, (0, _assign2.default)({}, { key: 'polyfill' })
          );

官方文档提到polifill已经弃用,地址：https://babeljs.io/docs/en/babel-polyfill As of Babel 7.4.0, this package has been deprecated in favor of directly including core-js/stable (to polyfill ECMAScript features) and regenerator-runtime/runtime (needed to use transpiled generator functions):

import "core-js/stable";
import "regenerator-runtime/runtime";

[onvno]

文章：

• 剖析babel
• Babel 内部机制研究

[onvno]

文档： babylon AST介绍 babylon生成AST测试，发现comment注释部分的生成规则达不到预期，用preact更全面