Question

Babel 是一个编译器（输入源码 => 输出编译后的代码）。就像其他编译器一样，编译过程分为三个阶段：解析、转换和打印输出。

现在，Babel 虽然开箱即用，但是什么动作都不做。它基本上类似于 const babel = code => code; ，将代码解析之后再输出同样的代码。如果想要 Babel 做一些实际的工作，就需要为其添加插件。

除了一个一个的添加插件，你还可以以 preset 的形式启用一组插件。

转换插件

这些插件用于转换你的代码。

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

ES3

• member-expression-literals
• property-literals
• reserved-words

ES5

• property-mutators

ES2015

• arrow-functions
• block-scoped-functions
• block-scoping
• classes
• computed-properties
• destructuring
• duplicate-keys
• for-of
• function-name
• instanceof
• literals
• new-target
• object-super
• parameters
• shorthand-properties
• spread
• sticky-regex
• template-literals
• typeof-symbol
• unicode-regex

ES2016

• exponentiation-operator

ES2017

• async-to-generator

ES2018

• async-generator-functions
• dotall-regex
• named-capturing-groups-regex
• object-rest-spread
• optional-catch-binding
• unicode-property-regex

Modules

• modules-amd
• modules-commonjs
• modules-systemjs
• modules-umd

Experimental

• class-properties
• decorators
• do-expressions
• export-default-from
• export-namespace-from
• function-bind
• function-sent
• logical-assignment-operators
• nullish-coalescing-operator
• numeric-separator
• optional-chaining
• partial-application
• pipeline-operator
• private-methods
• throw-expressions

Minification

查看我们 minifier based on Babel 插件！

这些插件都在 minify 仓库中。

• inline-consecutive-adds
• inline-environment-variables
• member-expression-literals
• merge-sibling-variables
• minify-booleans
• minify-builtins
• minify-constant-folding
• minify-dead-code-elimination
• minify-flip-comparisons
• minify-guarded-expressions
• minify-infinity
• minify-mangle-names
• minify-numeric-literals
• minify-replace
• minify-simplify
• minify-type-constructors
• node-env-inline
• property-literals
• regexp-constructors
• remove-console
• remove-debugger
• remove-undefined
• simplify-comparison-operators
• undefined-to-void

React

• react-constant-elements
• react-display-name
• react-inline-elements
• react-jsx
• react-jsx-compat
• react-jsx-self
• react-jsx-source

其他

• external-helpers
• flow-strip-types
• jscript
• object-assign
• object-set-prototype-of-to-assign
• proto-to-assign
• regenerator
• runtime
• strict-mode
• typescript

语法插件

这些插件只允许 Babel 解析（parse） 特定类型的语法（而不是转换）。

注意：转换插件会自动启用语法插件。因此，如果你已经使用了相应的转换插件，则不需要指定语法插件。

或者，你也可以通过 Babel 解析器传递任何 plugins 参数 ：

Your .babelrc:

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

插件/Preset 路径

如果插件再 npm 上，你可以输入插件的名称，babel 会自动检查它是否已经被安装到 node_modules 目录下

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

你还可以指定插件的相对/绝对路径。

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

插件的短名称

如果插件名称的前缀为 babel-plugin-，你还可以使用它的短名称：

{
  "plugins": [
    "myPlugin",
    "babel-plugin-myPlugin" // 两个插件实际是同一个
  ]
}

这也适用于带有冠名（scope）的插件：

{
  "plugins": [
    "@org/babel-plugin-name",
    "@org/name" // 两个插件实际是同一个
  ]
}

插件顺序

插件的排列顺序很重要。

这意味着如果两个转换插件都将处理“程序（Program）”的某个代码片段，则将根据转换插件或 preset 的排列顺序依次执行。

• 插件在 Presets 前运行。
• 插件顺序从前往后排列。
• Preset 顺序是颠倒的（从后往前）。

例如：

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

先执行 transform-decorators-legacy ，在执行 transform-class-properties。

重要的时，preset 的顺序是 颠倒的。如下设置：

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

将按如下顺序执行：stage-2、react 然后是 es2015。

这主要的是为了确保向后兼容，因为大多数用户将 "es2015" 排在 "stage-0" 之前。有关详细信息，请参阅 notes on potential traversal API changes。

插件参数

插件和 preset 都可以接受参数，参数由插件名和参数对象组成一个数组，可以在配置文件中设置。

如果不指定参数，下面这几种形式都是一样的：

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

要指定参数，请传递一个以参数名作为键（key）的对象。

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

preset 的设置参数的工作原理完全相同：

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

插件开发

请参考 babel-handbook 学习如何创建自己的插件。

一个简单的用于反转名称顺序的插件（来自于首页）：

export default function() {
  return {
    visitor: {
      Identifier(path) {
        const name = path.node.name;
        // reverse the name: JavaScript -> tpircSavaJ
        path.node.name = name
          .split("")
          .reverse()
          .join("");
      },
    },
  };
}