Babel环境搭建和基本配置

环境搭建&基本配置

环境搭建

npm install --save-dev @babel/cli @babel/core @babel/plugin-transform-runtime @babel/preset-env

npm install --save @babel/polyfill @babel/runtime

.babelrc配置

{
    "presets": [
        [
            "@bable/preset-env"
        ]
    ],
    "plugins": [
    
    ]
}

presets和plugins

presets就是一个预设，把一些常用的plugin集合在一起，避免在plugins中书写过多的配置条件，如果预设的不够用，再在plugin中额外配置。

babel-polyfill

polyfill是什么

• polyfill即补丁，兼容
• 通过搜索查找当前浏览器不支持的API，然后添加实现方案即补丁。

core-js和regenerator

• core-js，标准库，集成了ES6 ES7 新API的实现方案
• core-js不支持ES6的genertator，需要regenerator-runtime去支持
• 所以babel-polyfill，众望所归，是两者的集合
• Babel 7.4以后弃用babel-polyfill
• 推荐直接使用core-js和regenerator，因为babel-polyfill本来就是皮包公司

babel-polyfill按需引入

// .babelrc
{
    "presets": [
        [
            "@babel/preset-env",
            {
                "useBuiltIns": "usage", // 表示按需引入
                "corejs": 3 // corejs版本
            }
        ]
    ]
}

babel-polyfill的缺点

// babel-polyfill是不转换API的，他是通过注册全局变量来支持新API
// 比如Promise
window.Promise = function() {}
// 比如includes方法
Array.prototype.includes = function() {}

• ==babel-polyfill会污染全局环境==
• 如果做一个独立的web系统，则无碍
• 如果做一个第三方的lib，则会有问题

babel-runtime

// 需要安装两个依赖包
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/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' }));

// 使用babel-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' })
          );

babel-runtime的配置

// .babelrc
{
    "presets": [
        [
            "@babel/preset-env",
            {
                "useBuiltIns": "usage",
                "corejs": 3
            }
        ]
    ],
    "plugins": [
        [
            "@babel/plugin-transform-runtime",
            {
                "absoluteRuntime": false,
                "corejs": 3,
                "helpers": true,
                "regenerator": true,
                "useESModules": false
            }
        ]
    ]
}