Babel:plugin、preset的区别与使用

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,此时,它们的执行顺序非常重要。

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

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

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

安装依赖:

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

发表评论

邮箱地址不会被公开。 必填项已用*标注

Protected with IP Blacklist CloudIP Blacklist Cloud