翻译：https://babeljs.io/docs/en/plugins

Babel 是一个源码=>输出的编译器。和其它编译器一样。它有三个阶段：解析、转化、输出。
其实Babel本身是不做任何事情的。他基本做的就像const babel = code => code;这样。通过解析代码，然后合成与输入相同的代码。因此，你为babel配置一些插件，来帮助你做一些事情。
除了一个一个独立的插件外，你可以利用预设preset来帮助你做同样的事情。

Transform插件

ES版本的转化；React的转化。Modules的转化等等。

Syntax转化

这类插件是Babel用来解析某种形式的句法（没有转化）。

transform插件会自动开启syntax转化。所以当相应transform插件应用时，我们不需要特意指定syntax插件。

另外，你也可以提供任何选项。这些选项来自于@bable/parser。这时，你的.babelrc文件如下：

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

Plugin/Preset 路径

如果你的插件来自于npm。你可以直接传名称。babel会自动检查node_modules。

1
2
3

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

你也可以为你的自定义插件指定相对/绝对路径：

1
2
3

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

Plugin缩写

如果package的名称固定以babel-plugin-开头，也可以缩写如下：

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

缩写同样适用带有域名的package：

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

Plugin顺序

顺序影响到插件的visitor的顺序。

也就是说，如果两个transforms都要访问”Program”节点，这两个transforms都会以plugins或preset的顺序运行。

Plugins先运行、Presets后运行
Plugins里的顺序：从头到尾按顺序。
Presets里的顺序：从尾到头逆序运行。

比如：

1
2
3

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

以上先运行transform-decorators-legacy，在运行transform-class-properties。

再比如：

1
2
3

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

presets是逆序运行。因此，先运行stage-2，然后react，最后es2015。
这样做主要还是为了向后兼容，因为大多数用户都会把es2015列在stage-0前面。了解更多信息，可以查看Potential API changes for traversal

Plugin Options

Plugins和Presets都可以设置options。
对于没有设置options情况来说，下面三个是一样的：

1
2
3

{
  "plugins": ["pluginA", ["pluginA"], ["pluginA", {}]]
}

如果要设置options，如下：

{
  "plugins": [
    [
      "transform-async-to-module-method",
      {
        "module": "bluebird",
        "method": "coroutine"
      }
    ]
  ]
}

presets同样也是：

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

Plugin开发

可以查看babel手册创建自己的plugin。