-
预设，就是别人做好的一套东西。
es6(ECMAScript 2015)版本发布后，旧浏览器不支持，怎么办？
babel说，安装我的插件：babel-preset-es2015。
安装之后，果然好使。
……
第2年，es7(ECMAScript 2016)版本推出，旧浏览器不支持，怎么办？
babel说，安装我的插件：babel-preset-es2015, babel-preset-es2016。
……
第3年，es7(ECMAScript 2017)版本推出，旧浏览器不支持，怎么办？
babel说，安装我的插件：babel-preset-es2015, babel-preset-es2016, babel-preset-es2017。
我去，那明年是不是要安装4个？
babel说，那安装我的全套服务吧：babel-preset-latest。一个顶仨。
但babel-preset-latest 包含每年的预设，现在包含 2015, 2016, 2017这3个，那明年呢？
一个劲地往上加也不是一个事啊！
然后推出新产品：babel-preset-env。它算是比较智能，你告诉它装啥，它就装啥。
后来，babel 6升级为7之后，以前的包全改名了，好象互联网改名是个传统。
babel-preset-es2015 ---> @babel/preset-es2015
babel-preset-es2016 ---> @babel/preset-es2016
babel-preset-es2017 ---> @babel/preset-es2017
babel-preset-env ---> @babel/preset-env
-
babel-polyfill(内部集成了 core-js 和 regenerator) babel 对一些新的 API 是无法转换，比如 Generator、Set、Proxy、Promise 等全局对象，以及新增的一些方法：includes、Array.form 等。所以这个时候就需要一些工具来为浏览器做这个兼容。
官网的定义：babel-polyfill 是为了模拟一个完整的 ES6+ 环境，旨在用于应用程序而不是库/工具。
babel-polyfill 主要有两个缺点：
使用 babel-polyfill 会导致打出来的包非常大，很多其实没有用到，对资源来说是一种浪费。 babel-polyfill 可能会污染全局变量，给很多类的原型链上都作了修改，这就有不可控的因素存在。 因为上面两个问题，所以在 Babel7 中增加了 babel-preset-env，我们设置 "useBuiltIns" 这个参数值就可以实现按需加载 babel-polyfill 啦。
babel-runtime & babel-plugin-transform-runtime 在使用 Babel6 的时候， .babelrc 文件中会使用 babel-plugin-transform-runtime，而 package.json 中的 dependencies 同时包含了 babel-runtime，因为在使用 babel-plugin-transform-runtime 的时候必须把 babel-runtime 当做依赖。
.babelrc 配置：
{
"presets": [
["env"]
],
"plugins": [
["transform-runtime", {
"helpers": false, // defaults to true
"polyfill": false, // defaults to true
"regenerator": true, // defaults to true
"moduleName": "babel-runtime" // defaults to "babel-runtime"
}]
]
}
我们在启用插件 babel-plugin-transform-runtime 后，Babel 就会使用 babel-runtime 下的工具函数，将一些浏览器不能支持的特性重写，然后在项目中使用。
babel-runtime 内部也集成了 core-js、 regenerator、helpers 等
由于采用了沙盒机制，这种做法不会污染全局变量，也不会去修改内建类的原型，所以会有重复引用的问题。
现在最好的实践应该是在 babel-preset-env 设置 "useBuiltIns": "usage"，按需引入 polyfill
作者：LiuKang 链接：ld246.com/article/158… 来源：链滴 协议：CC BY-SA 4.0 creativecommons.org/licenses/by…
