Babel：plugin、preset的区别与使用

文章概览

本文主要内容包括：什么是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}`;

[/code] Copy

安装依赖：

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

Copy

执行转换，通过

--plugins

声明依赖的插件，多个插件之间采用

,

进行分隔。

`npm bin`/babel --plugins babel-plugin-transform-es2015-arrow-functions,babel-plugin-transform-es2015-template-literals index.js

Copy

转换结果如下：

[1, 2, 3].map(function (n) {
return n + 1;
});

let nick = '程序猿小卡';
let desc = 'hello ' + nick;

[/code] Copy

转换命令中，插件名称可以省去

babel-plugin

前缀：

`npm bin`/babel --plugins transform-es2015-arrow-functions,transform-es2015-template-literals index.js

Copy

也可以改成配置文件 .babelrc，

plugins

字段中声明的插件会按照顺序执行。

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

Copy

再次执行转换命令：

`npm bin`/babel

Copy

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

Copy

执行转换，通过

--presets

声明依赖的preset，多个preset之间用

,

做分隔。

`npm bin`/babel --presets babel-preset-es2015 index.js
`npm bin`/babel --presets es2015 index.js # 也可以去掉 babel-preset 前缀

Copy

同样可以采用配置文件 .babelrc。

{
"presets": [ "es2015" ]
}

Copy

转换命令：

`npm bin`/babel

Copy

Plugin与Preset执行顺序

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

1. 先执行完所有Plugin，再执行Preset。
2. 多个Plugin，按照声明次序顺序执行。
3. 多个Preset，按照声明次序逆序执行。

比如

.babelrc

配置如下，那么执行的顺序为：

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

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

Copy

下面通过简单例子进行说明。

Plugin、Preset混用例子

例子：将 index.jsx 编译成 index.js，并且采用 ES5规范。这里包含两个步骤：

1. 将

   jsx

   语法转成

   js

   语法。
2. 将 ES6规范 转成 ES5规范。

源代码如下：

// index.jsx
var profile = <div>
<img src="avatar.png" className="profile" />
<h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;

var foo = () => "foo";

Copy

安装依赖：

npm install --save-dev babel-cli
npm install --save-dev babel-plugin-transform-react-jsx
npm install --save-dev babel-preset-es2015

Copy

配置文件 .babelrc：

{
"plugins": [ "transform-react-jsx" ],
"presets": [ "es2015" ]
}

Copy

执行转换：

`npm bin`/babel index.jsx

Copy

转换结果如下：

"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";
};

[/code] Copy

读者可以试下下面命令，单独采用

bebel-preset-es2015

进行代码转换，结果会报语法错误。这从侧面可以印证Plugin的执行顺序在Preset之前。

`npm bin`/babel --presets es2015 index.jsx

Copy

自定义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"),
]
};

[/code] Copy

然后，修改.babelrc。这里因为是本地文件，所有用到了相对路径，如果发布到了npm上，就可以直接用包名。

{
"presets": [
"./mypreset.js"
]
}

Copy

转码过程略，读者自行尝试。

Plugin/Preset配置项

Babel Plugin、Babel Preset都支持配置项，配置项语法都是相同的，如下所示（插件类似）。

{
"presets": [
presetName01, // 没有配置
[ presetName02, presetOptions02 ] // 有配置
]
}

Copy

具体例子如下：

{
"presets": [
["es2015", {
"loose": true,
"modules": false
}]
]
}

Copy

不同Plugin/Preset的配置项作用可能不同，具体请查阅它们的官方文档。

相关链接

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

2018.05.31-babel-plugin-preset

转载于:https://www.cnblogs.com/dapengFly/p/9876915.html

• 点赞
• 收藏
• 分享
• 文章举报

diyingdun1957 发布了0 篇原创文章 · 获赞 0 · 访问量 550 私信 关注