认识Babel***

Babel是什么？
用于解析ES6，甚至比ES6更高级的语法，到ES5或ES4级别，满足浏览器的兼容性

环境搭建 & 基本配置

① package.json配置安装：

"devDependencies": {
  "@babel/cli": "^7.7.5",
  "@babel/core": "^7.7.5",
  "@babel/preset-env": "^7.7.5"
  "@babel/plugin-transform-runtime": "^7.7.5",
},
"dependencies": {
  "@babel/polyfill": "^7.7.0",
  "@babel/runtime": "^7.7.5"
}

.babelrc文件 配置:

• plugins 里配置插件负责进行语法的转换
• preset 预设，常用的plugins的集合，可以作为 Babel 插件的组合。

{
    "presets": [
        [
            "@babel/preset-env", //es6+常用语法的解析
        ]
    ],
    "plugins": [
    ]
}

babel-polyfill 补丁

前置知识：

polyfill补丁：

polyfill是补丁，例如Array.IndexOf方法，根据浏览器的兼容情况，若不兼容，polyfill做一个补丁，使之兼容。

core-js 标准库：

core.js 是一个标准的库，集成了 ES6 ES7等所有新语法的polyfill（补丁），缺点是不支持regenerator的兼容性。

regenerator 运行时库：

这是 Facebook 提供的 facebook/regenerator 库，用来实现 ES6/ES7 中 generators、yield、async 及 await 等相关的 polyfills。

babel-polyfill是什么？

• babel本身只解析ES6的语法，如箭头函数；对于新的API, 如Promise,includes(),本身符合ES5的语法规范，babel不会进行解析；
• babel-polyfill 通过补丁的方式实现的ES6+新的API解析；
• babel-polyfill 是 core-js 标准库和regenerator库的集合。
• babel 7.4之后弃用 balel-polyfill
• 推荐直接使用core.js 和 regenerator

babel-polyfill 如何按需引入？

修改.babelrc文件的配置按需引入：

{
    "presets": [
        [
            "@babel/preset-env", //es6+常用语法的解析
      {
                "useBuiltIns": "usage",//按需引用
                "corejs": 3 //corejs版本
            }
        ]
    ],
    "plugins": [
    ]
}

babel-polyfill 的问题

污染全局环境

使用ES6的API Promise、includes时：

// 新的 API
Promise.resolve(100).then(data => data);
[10, 20, 30].includes(20)

babel-polyfill兼容处理后：

window.Promise = function() {}
Array.prototype.includes = function () {}

重新定义了window.Promise和Array原型的方法，污染了全局环境.

babel-polyfill 的问题：

• 如果做一个独立的web系统，则无碍；
• 如果做一个第三方的库（lib），则会有问题：

如使用方定义：window.Promise = function() {}，与之前兼容处理 window.Promise = function() {} 出现冲突：

babel-runtime

babel-runtime配置使用：
① package.json 配置安装插件 @babel/plugin-transform-runtime、@babel/runtime ，具体参见上面package.json配置；

② .babelrc文件配置plugins：引用plugin-transform-runtime，并配置选项：

{
    "presets": [
        [
            "@babel/preset-env", //es6+常用语法的解析
        ]
    ],
    "plugins": [
    [
            "@babel/plugin-transform-runtime",
            {
                "absoluteRuntime": false,
                "corejs": 3,
                "helpers": true,
                "regenerator": true,
                "useESModules": false
            }
        ]
    ]
}

babel-runtime兼容处理后：
Promise->_Promise,includes->_includes。

所以babel-runtime不会污染全局环境

babel-polyfill VS babel-runtime

babel-polyfill：

• 需要在你自己的代码中手工引入（最好放在 vendor 里）
• 它会以全局变量污染的方式 polyfill 内建类（如 Map、Set、Promise 等），同时也会通过修改 Array、String、Object 等原型的方式添加实例方法（如 Array.prototype.includes()、String.prototype.padStart() 等），内建类的静态方法（如 Array.from() 等）也会被 polyfill
• babel-polyfill 适合于开发独立的业务应用，及时全局污染、prototype 被修改也不会受到太大的影响，babel-polyfill 不适合开发第三方类库。

babel-plugin-transform-runtime：

• 需要你在 .babelrc 或 Babel 编译选项中将该插件添加到 plugins 中
• 插件只会 polyfill 你用到的类或方法，由于采用了沙盒（Sandbox）机制，它不会污染全局变量，同时也不会去修改内建类的原型，带来的坏处是它不会 polyfill 原型上的扩展（例如 Array.prototype.includes() 不会被 polyfill，Array.from() 则会被 polyfill）
• 插件的方式适合于开发第三方类库，不适合开发需要大量使用 Array 等原型链扩展方法的应用。