Babel：plugin、preset的区别与使用
@(学习笔记)[babel]
文章概览
本文主要内容包括：什么是Babel Plugin、Babel Preset，两者的区别与联系、如何使用plugin/preset、如何创建自定义preset、使用注意事项。
本文所有例子可在 笔者github 上 找到。
Babel Plugin简介
Babel是代码转换器，比如将ES6转成ES5，或者将JSX转成JS等。借助Babel，开发者可以提前用上新的JS特性，这对生产力的提升大有帮助。
实现Babel代码转换功能的核心，就是Babel插件（plugin）。
原始代码 --> [Babel Plugin] --> 转换后的代码
Babel Plugin例子
源代码如下，这里用到了两个ES6才支持的新特性：箭头函数、for...of。在只支持ES5的浏览器里，这两段代码会报错。
因此，可以借助插件将代码转成ES5。
// index.js
// 箭头函数
[1,2,3].map(n => n + 1);
// 模板字面量
let nick = '程序猿小卡';
let desc = `hello ${nick}`;
安装依赖：
npm install --save-dev babel-cli
npm install --save-dev babel-plugin-transform-es2015-arrow-functions
npm install --save-dev babel-plugin-babel-plugin-transform-es2015-template-literals
执行转换，通过--plugins声明依赖的插件，多个插件之间采用,进行分隔。
`npm bin`/babel --plugins babel-plugin-transform-es2015-arrow-functions,babel-plugin-transform-es2015-template-literals index.js
转换结果如下：
[1, 2, 3].map(function (n) {
return n + 1;
});
let nick = '程序猿小卡';
let desc = 'hello ' + nick;
转换命令中，插件名称可以省去 babel-plugin 前缀：
`npm bin`/babel --plugins transform-es2015-arrow-functions,transform-es2015-template-literals index.js
也可以改成配置文件 .babelrc，plugins字段中声明的插件会按照顺序执行。
{
"plugins": [
"transform-es2015-arrow-functions",
"transform-es2015-template-literals"
]
}
再次执行转换命令：
`npm bin`/babel
Babel Preset简介
Babel插件一般尽可能拆成小的力度，开发者可以按需引进。比如对ES6转ES5的功能，Babel官方拆成了20+个插件。
这样的好处显而易见，既提高了性能，也提高了扩展性。比如开发者想要体验ES6的箭头函数特性，那他只需要引入transform-es2015-arrow-functions插件就可以，而不是加载ES6全家桶。
但很多时候，逐个插件引入的效率比较低下。比如在项目开发中，开发者想要将所有ES6的代码转成ES5，插件逐个引入的方式令人抓狂，不单费力，而且容易出错。
这个时候，可以采用Babel Preset。
可以简单的把Babel Preset视为Babel Plugin的集合。比如babel-preset-es2015就包含了所有跟ES6转换有关的插件。
下面通过例子说明。
Babel Preset例子
还是原来的代码，这次采用babel-preset-es2015进行转换。
首先，安装依赖：
npm install --save-dev babel-cli
npm install --save-dev babel-preset-es2015
执行转换，通过--presets声明依赖的preset，多个preset之间用,做分隔。
`npm bin`/babel --presets babel-preset-es2015 index.js
`npm bin`/babel --presets es2015 index.js # 也可以去掉 babel-preset 前缀
同样可以采用配置文件 .babelrc。
{
"presets": [ "es2015" ]
}
转换命令：
`npm bin`/babel
Plugin与Preset执行顺序
可以同时使用多个Plugin和Preset，此时，它们的执行顺序非常重要。
- 先执行完所有Plugin，再执行Preset。
- 多个Plugin，按照声明次序顺序执行。
- 多个Preset，按照声明次序逆序执行。
比如.babelrc配置如下，那么执行的顺序为：
- Plugin：transform-react-jsx、transform-async-to-generator
- Preset：es2016、es2015
{
"plugins": [
"transform-react-jsx",
"transform-async-to-generator"
],
"presets": [
"es2015",
"es2016"
]
}
下面通过简单例子进行说明。
Plugin、Preset混用例子
例子：将 index.jsx 编译成 index.js，并且采用 ES5规范。这里包含两个步骤：
- 将 jsx 语法转成 js 语法。
- 将 ES6规范 转成 ES5规范。
源代码如下：
// index.jsx
var profile = <div>
<img src="avatar.png" className="profile" />
<h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;
var foo = () => "foo";
安装依赖：
npm install --save-dev babel-cli
npm install --save-dev babel-plugin-transform-react-jsx
npm install --save-dev babel-preset-es2015
配置文件 .babelrc：
{
"plugins": [ "transform-react-jsx" ],
"presets": [ "es2015" ]
}
执行转换：
`npm bin`/babel index.jsx
转换结果如下：
"use strict";
var profile = React.createElement(
"div",
null,
React.createElement("img", { src: "avatar.png", className: "profile" }),
React.createElement(
"h3",
null,
[user.firstName, user.lastName].join(' ')
)
);
var foo = function foo() {
return "foo";
};
读者可以试下下面命令，单独采用bebel-preset-es2015进行代码转换，结果会报语法错误。这从侧面可以印证Plugin的执行顺序在Preset之前。
`npm bin`/babel --presets es2015 index.jsx
自定义Babel Preset
前面提到，Preset是Plugin的集合。借助强大的社区，常见的转换功能都已经有人实现的，很多时候，开发者只需要按需引用即可。
在实际开发中，我们需要用到的Plugin/Preset相对比较固定，如果每次都要重复编写，或者拷贝babel配置文件，既繁琐，又容易出错。这个时候，可以考虑自定义Babel Preset。
以前面的 index.jsjsx 编译为例，我们用到了 babel-preset-es2015、babel-plugin-transform-react-jsx，可以创建自定义的 preset，把它们包含进去：()
// mypreset.js
module.exports = {
presets: [
require("babel-preset-es2015"),
],
plugins: [
require("babel-plugin-transform-react-jsx"),
]
};
然后，修改 .babelrc。这里因为是本地文件，所有用到了相对路径，如果发布到了npm上，就可以直接用包名。
{
"presets": [
"./mypreset.js"
]
}
转码过程略，读者自行尝试。
Plugin/Preset配置项
Babel Plugin、Babel Preset都支持配置项，配置项语法都是相同的，如下所示（插件类似）。
{
"presets": [
presetName01, // 没有配置
[ presetName02, presetOptions02 ] // 有配置
]
}
具体例子如下：
{
"presets": [
["es2015", {
"loose": true,
"modules": false
}]
]
}
不同Plugin/Preset的配置项作用可能不同，具体请查阅它们的官方文档。