Babel 是一个编译器(输入源码 => 输出编译后的代码)。就像其他编译器一样，编译过程分为三个阶段：解析、转换和打印输出。
现在，Babel 虽然开箱即用，但是什么动作都不做。它基本上类似于 const babel = code => code; ，将代码解析之后再输出同样的代码。如果想要 Babel 做一些实际的工作，就需要为其添加插件。
除了一个一个的添加插件，你还可以以 preset 的形式启用一组插件。
转换插件
这些插件用于转换你的代码。
转换插件将启用相应的语法插件，因此你不必同时指定这两种插件。
ES3
ES5
ES2015
ES2016
ES2017
ES2018
Modules
Experimental
Minification这些插件都在 minify 仓库中。
React
其他
语法插件
这些插件只允许 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": ["@babel/preset-env", "@babel/preset-react"]
}将按如下顺序执行： 首先是 @babel/preset-react，然后是 @babel/preset-env。
插件参数
插件和 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 = ;
// reverse the name: JavaScript -> tpircSavaJ
= name
.split("")
.reverse()
.join("");
},
},
};
}
