Babel Plugin Preset 的来由
1，{ "plugins": [ "transform-es2015-arrow-functions", "transform-es2015-template-literals" ] }
`npm bin`/babel --plugins transform-es2015-arrow-functions,transform-es2015-template-literals index.js
如果没有预设，babel转化是需要指定用什么插件的，颗粒度小，效率高，但是插件需要逐个安装(babel 官方拆成了20+个插件)。
2， 为了解决插件依赖的问题，采用了Babel Preset。(Babel Preset视为Babel Plugin的集合， 比如babel-preset-es2015包含所有跟ES6转换有关的插件)
`npm bin`/babel --presets es2015 index.js
Plugin与Preset执行顺序
多个Plugin和Preset时执行顺序非常重要
1，先执行完所有Plugin，再执行Preset。
2，多个Plugin，按照声明次序顺序执行。
3，多个Preset，按照声明次序逆序执行。
eg: { "plugins": [ "transform-react-jsx", "transform-async-to-generator" ], "presets": [ "es2015", "es2016" ] }
自定义Babel Preset
1，自定义配置
{ "presets": [ "./mypreset.js" ] }
// mypreset.js
module.exports = { presets: [ require("babel-preset-es2015"), ], plugins: [ require("babel-plugin-transform-react-jsx"), ] };
2，配置项
{ "presets": [ presetName01, // 没有配置 [ presetName02, presetOptions02 ] // 有配置 ] }
eg: { "presets": [ ["es2015", { "loose": true, "modules": false }] ] }
补充
1，babel-preset-env 是一个新的 preset，可以根据配置的目标运行环境（environment）自动启用需要的 babel 插件。
babel-preset-es2015(转换为es5)、babel-preset-es2016(转化为es6)、babel-preset-es2017(转化为es7)、babel-preset-latest(转化最新stage4进度)
2，插件越来越多，效率变慢，浏览器升级，提出了 babel-preset-env, 默认配置的情况下，它跟 babel-preset-latest 是等同的，会加载从es2015开始的所有preset。
Eg:{ "presets": [ "env" ] } ===={ "presets": [ “latest" ] }
Eg: 针对node环境{ "presets": [ ["env", { "targets": { "node": "8.9.3" } }] ] }
Eg: 针对ie11{ "presets": [ ["env", { "targets": { "browsers": "ie 11" } }] ] }
Eg: 针对Edge16{ "presets": [ ["env", { "targets": { "browsers": "edge 16" } }] ] }
Eg: 针对Ie8+,chrome62+:{ "presets": [ ["env", { "targets": { "browsers": [ "ie >= 8", "chrome >= 62" ] } }] ] }
Eg: 服务端命令行编译：npm bin browserslist "ie >= 8, chrome >= 62”
3，env 原理
1、首先，检测浏览器对JS特性的支持程度，比如通过通过 compat-table 这样的外部数据。
2、将 JS特性 跟 特定的babel插件 建立映射，映射关系可以参考 这里。
3、stage-x 的插件不包括在内。
4、根据开发者的配置项，确定至少需要包含哪些插件。比如声明了需要支持 IE8+、chrome62+，那么，所有IE8+需要的插件都会被包含进去。
