Babel Plugin 详解

本文将对 Babel 的插件进行详细讲解。

Babel 是一个编译器（源代码 => 输出代码）。与许多其他编译器一样，它运行在三个阶段:解析、转译和输出。

你需要为 Babel 添加插件以完成这些过程。

Babel 插件分为转译插件和语法插件。

转译插件

转译以插件的形式出现，插件是一些小的 JavaScript 程序，用来指导 Babel 如何对代码进行转译。你也可以写自己的插件对你的代码进行转译。

如：

1
2
3

npm install --save-dev @babel/plugin-transform-arrow-functions

./node_modules/.bin/babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions

这样，代码中的所有箭头函数都会被转译成 ES5 兼容的函数表达式：

const fn = () => 1;

// converted to

var fn = function fn() {
  return 1;
};

这些插件将转译应用到代码中。

转译插件将启用相应的语法插件，因此你不必同时指定这两个插件。

ES3

ES5

property-mutators

ES2015

ES2016

exponentiation-operator

ES2017

async-to-generator

ES2018

Modules

Experimental

Minification

查看 minifier based on Babel 。
以下是 minify 仓库中的插件：

React

Other

语法插件

这些插件只允许 Babel 解析特定类型的语法（不做转译）。

注意: 转译插件自动启用语法插件。因此，如果已经使用了相应的转译插件，就不需要指定语法插件。

.bablerc：

{
  "parserOpts": {
    "plugins": ["jsx", "flow"]
  }
}

插件路径

如果插件在 npm 中，可以直接使用插件的名字，Babel 会在node_modules中寻找安装的插件：

1
2
3

{
  "plugins": ["babel-plugin-myPlugin"]
}

你也可以指定插件的相对路径或绝对路径：

1
2
3

{
  "plugins": ["./node_modules/asdf/plugin"]
}

插件缩写

如果插件的名字前缀是babel-plugin-，你可以使用缩写：

{
  "plugins": [
    "myPlugin",
    "babel-plugin-myPlugin" // equivalent
  ]
}

这对于作用域包同样有效：

{
  "plugins": [
    "@org/babel-plugin-name",
    "@org/name" // equivalent
  ]
}

插件排序

对于插件中的每一个元素，排序是很重要的。

这意味着如果两个转译都访问“程序”节点，转译将以 Plugin 或 Preset 的顺序运行。

plugin 在 Preset 之前运行
plugin 按从第一个到最后一个排序
preset 按相反的顺序，从最后一个到第一个

如：

{
  "plugins": [
    "transform-decorators-legacy",
    "transform-class-properties"
  ]
}

会先执行transform-decorators-legacy然后执行transform-class-properties。

而在preset中，这个顺序是相反的

{
  "presets": [
    "es2015",
    "react",
    "stage-2"
  ]
}

会按state-2，react，es2015的顺序执行。

这主要是为确保向后兼容性,因为大多数用户在”state-0”之前列出”es2015”。