Babel: plugin, preset的区别于使用

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+需要的插件都会被包含进去。