Babel 中的 plugins 与 presets

在用 JavaScript 开发项目时，常常需要配置 Babel。
Babel 是代码转换器，比如将 ES6 转成 ES5，或者将 JSX 转成 JS 等。
借助 Babel，开发者可以提前用上新的 JS 特性，这对生产力的提升大有帮助。
这篇文章主要介绍一下 Babel 中的 plugins 与 presets 这两个概念。

plugins

先引入一个例子：

// index.js
// 箭头函数
[1,2,3].map(n => n + 1);

// 模板字面量
let nick = 'Rain';
let desc = `hello ${nick}`;

这里用到了两个ES6才支持的新特性：箭头函数、模版字符串。在只支持 ES5 的浏览器里，这两段代码会报错。

因此，可以借助插件将代码转成 ES5。

// .babelrc
{
  "plugins": [
    "transform-es2015-arrow-functions",
    "transform-es2015-template-literals"
  ]
}

这样，安装了对应的依赖之后，上面两段代码就可以正常执行了。

presets

Babel插件一般尽可能拆成小的力度，开发者可以按需引进。比如对 ES6 转 ES5 的功能，Babel 官方拆成了20+个插件。

这样的好处显而易见，既提高了性能，也提高了扩展性。比如开发者想要体验ES6 的箭头函数特性，那他只需要引入 transform-es2015-arrow-functions 插件就可以，而不是加载 ES6 全家桶。

但很多时候，逐个插件引入的效率比较低下。比如在项目开发中，开发者想要将所有 ES6 的代码转成 ES5，插件逐个引入的方式令人抓狂，不单费力，而且容易出错。

这个时候，可以采用 Babel Preset。

可以简单的把 Babel Preset 视为 Babel Plugin 的集合。比如 babel-preset-es2015 就包含了所有跟 ES6 转换有关的插件。

// .babelrc
{
  "presets": [ "es2015" ]
}

plugins 与 presets 的执行顺序

可以同时使用多个 Plugin 和 Preset，此时，它们的执行顺序非常重要。

先执行完所有 Plugin，再执行 Preset。
多个 Plugin，按照声明次序顺序执行。
多个 Preset，按照声明次序逆序执行。
比如 .babelrc配置如下，那么执行的顺序为：

1. Plugin：transform-react-jsx、transform-async-to-generator
2. Preset：es2016、es2015

// .babelrc
{
  "plugins": [ 
    "transform-react-jsx",
    "transform-async-to-generator"
  ],
  "presets": [ 
    "es2015",
    "es2016"    
  ]
}

参考链接

https://juejin.im/entry/5b15d3acf265da6e38191f80