文章概览

本文主要内容包括：什么是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的配置项作用可能不同，具体请查阅它们的官方文档。

相关链接

https://babeljs.io/docs/plugins/

2018.05.31-babel-plugin-preset