Babel是JavaScript编译器器，能将ES6代码转换成ES5代码，让我们开发过程中放心使⽤JS新特性而不用担心兼容性问题。并且还可以通过插件机制根据需求灵活的扩展。
Babel在执行编译的过程中，会从项⽬根目录下的 .babelrc JSON⽂件中读取配置。没有该⽂件会从loader的options地⽅读取配置。
babel-preset-env
1. 介绍
首先，介绍下历史背景，对了解和学习 babel-preset-env 有帮助。
最初，为了让开发者能够尽早用上新的JS特性，babel团队开发了babel-preset-latest。这个preset比较特殊，它是多个preset的集合(es2015+)，并且随着ECMA规范的更新更增加它的内容。
比如，当前(2018.06.02)，它包含的preset包括：es2017、es1016、es2015。
到了明年，可能它包含的preset就包括：es2018、es2017、es2016、es2015。
随着时间的推移，babel-preset-latest 包含的插件越来越多，这带来了如下问题：
加载的插件越来越多，编译速度会越来越慢；
随着用户浏览器的升级，ECMA规范的支持逐步完善，编译至低版本规范的必要性在减少（比如ES6 -> ES5），多余的转换不单降低执行效率，还浪费带宽。
因为上述问题的存在，babel官方推出了babel-preset-env插件。它可以根据开发者的配置，按需加载插件。配置项大致包括：
需要支持的平台：比如node、浏览器等。
需要支持的平台的版本：比如支持node@6.1等。
默认配置的情况下，它跟 babel-preset-latest 是等同的，会加载从es2015开始的所有preset。
2. 安装：
npm i babel-loader @babel/core @babel/preset-env -D
npm i @babel/preset-env -D
- babel-loader是webpack 与 babel的通信桥梁，不会做把es6转成 es5的⼯作，这部分工作需要⽤用到@babel/preset-env来做 ,
- babel/core babel的核心库，提供了很多核心语法。
3. 配置：
Webpack.config.js文件中：
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"]
}
}
}
通过上面的几步，默认的Babel只支持let等⼀一些基础的特性转换，远远还不够，
Promise等⼀一些还有转换过来，这时候需要借助@babel/polyfill，把es的新特性都装进来，来弥补低版本浏览器中缺失的特性 。
babel/polyfill
1. 安装：
npm install --save @babel/polyfill
2. 在需要转换的js文件中引入polyfill
import "@babel/polyfill";
- 缺点：polyfill引入新特性的方法：是以全局变量的⽅式注入进来的。如promise就是windows.Promise，它会造成全局对象的污染 。
3. 按需加载，减少冗余
因为polyfill包含了所有ECMA的新特性，默认会把所有特性注入进来，因此会发现打包的体积⼤了很多。假如我想我⽤用到的es6+，才会注⼊，没⽤用到的不注⼊，以此提升编译速度，从而缩小打包的体积，减少代码冗余。可不可以呢 ？
当然可以
修改下 .babelrc，加上配置参数"target"，它表示我们需要支持哪些平台：哪些版本。
options: {
presets: [
[
"@babel/preset-env",
{
targets: {
edge: "17", // 程序支持支持 Edge 17
firefox: "60", // 程序支持支持 firefox 60
chrome: "67", // 程序支持支持 chrome 67
safari: "11.1" // 程序支持safari 11.1
// 支持的配置有以下： chrome, opera, edge, firefox, safari, ie, ios, android, node, electron.
},
corejs: 2,//新版本需要指定核⼼库版本
useBuiltIns: "usage"//按需注⼊
}
]
]
}
-
useBuiltIns 选项
它是babel 7的新功能，这个选项告诉 babel 如何配置 @babel/polyfill 。
它有三个参数可以使用:
-
entry:
"useBuiltIns": "entry", "corejs": 2,根据配置的浏览器兼容，引入浏览器不兼容的
polyfill。需要在入口文件手动添加import '@babel/polyfill'，会自动根据browserslist替换成浏览器不兼容的所有polyfill。这里需要指定
corejs的版本, 如果"corejs": 3, 则import '@babel/polyfill'需要改成import 'core-js/stable'; import 'regenerator-runtime/runtime'; -
usage: 不需要 import ，全自动检测，但是要安装 @babel/polyfill 。(试验阶段) 。
usage
会根据配置的浏览器兼容，以及你代码中用到的 API 来进行polyfill`，实现了按需添加。 -
false: 此时不对
polyfill做操作。如果你 import "@babel/polyfill" ，它不会排除掉没有使用的垫片，无视配置的浏览器兼容，引入所有的polyfill,这会造成程序体积会庞大。(不推荐)请注意: usage 的行为类似 babel-transform-runtime，不会造成全局污染， 因此也不会对类似 Array.prototype.includes() 进⾏polyfill。
参考文件https://www.01hai.com/note/av145385
https://www.babeljs.cn/docs/babel-preset-env
http://blog.ttionya.com/article-1695.html
