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 等原型链扩展方法的应用。
