Babel 插件
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语法插件
这些插件只允许 Babel 解析（parse） 特定类型的语法（而不是转换）。
注意：转换插件会自动启用语法插件。因此，如果你已经使用了相应的转换插件，则不需要指定语法插件。
或者，你也可以通过 Babel 解析器传递任何 plugins 参数 ：
Your .babelrc:
{
"parserOpts": {
"plugins": ["jsx", "flow"]
}
}
Babel插件/Preset路径
如果插件再 npm 上，你可以输入插件的名称，babel 会自动检查它是否已经被安装到 node_modules 目录下
{
"plugins": ["babel-plugin-myPlugin"]
}
你还可以指定插件的相对/绝对路径。
{
"plugins": ["./node_modules/asdf/plugin"]
}
Babel插件的短名称
如果插件名称的前缀为 babel-plugin-，你还可以使用它的短名称：
{
"plugins": [
"myPlugin",
"babel-plugin-myPlugin" // 两个插件实际是同一个
]
}
这也适用于带有冠名（scope）的插件：
{
"plugins": [
"@org/babel-plugin-name",
"@org/name" // 两个插件实际是同一个
]
}
Babel插件顺序
插件的排列顺序很重要。
这意味着如果两个转换插件都将处理“程序（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。
Babel插件参数
插件和 preset 都可以接受参数，参数由插件名和参数对象组成一个数组，可以在配置文件中设置。
如果不指定参数，下面这几种形式都是一样的：
{
"plugins": ["pluginA", ["pluginA"], ["pluginA", {}]]
}
要指定参数，请传递一个以参数名作为键（key）的对象。
{
"plugins": [
[
"transform-async-to-module-method",
{
"module": "bluebird",
"method": "coroutine"
}
]
]
}
preset 的设置参数的工作原理完全相同：
{
"presets": [
[
"env",
{
"loose": true,
"modules": false
}
]
]
}
Babel插件开发
请参考 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("");
},
},
};
}