Babel 插件 babel

Babel 是一个编译器，和其他编译器一样，编译过程分为三个阶段，分别是解析（parsing）、转换（transforming）和生成（generate）。其中分析和生成阶段由 Babel 核心完成，而转换阶段，则由Babel插件完成。所以如果我们要实现代码的转换，需要为 Babel 添加插件。Babel 也提供了很多的接口来供我们编写自身的插件来转换我们的实际代码。
插件的介绍
下面是一个典型的 Babel 插件结构：

export default function({ types: babelTypes }) { return { visitor: { Identifier(path, state) {}, ASTNodeTypeHere(path, state) {} } }; };

其中我们需要关注的内容如下：

babelType：类似 lodash 那样的工具集，主要用来操作 AST 节点，比如创建、校验、转变等。例如判断某个节点是不是标识符。
path：AST 中有很多节点，每个节点可能有不同的属性，并且节点之间可能存在关联。path 是个对象，它代表了两个节点之间的关联。我们可以在 path 上访问到节点的属性，也可以通过 path 来访问到关联的节点。
state：代表了插件的状态，我们可以通过 state 来访问插件的配置项。
visitor：Babel 采取递归的方式访问 AST 的每个节点，之所以叫做 visitor，只是因为有个类似的设计模式叫做访问者模式，不用在意背后的细节。
Identifier、ASTNodeTypeHere：AST 的每个节点，都有对应的节点类型，比如标识符、函数声明等，可以在 visitor 上声明同名的属性，当 Babel 遍历到相应类型的节点，属性对应的方法就会被调用，传入的参数就是 path、state。

插件的使用
例如我们来实现一个简单的插件，将所有名称为 hello 的标识符，转成 xkd。
首先要确保已经安装了 @babel/cli 依赖，如果没有可以执行下述命令：

npm install --save-dev @babel/cli

然后可以开始创建插件，判断标识符的名称是否是 a，如果是则替换成 xkd，plugin.js 文件内容如下所示：

module.exports = function({ types: babelTypes }) { return { name: "simple-plugin-replace", visitor: { Identifier(path, state) { if (path.node.name === 'a') { path.node.name = 'xkd'; } } } }; };

然后在 index.js 文件中编写源代码，例如：

var a = 10; function func(){ var a = 20; console.log(a); }

执行如下命令：

npx babel --plugins ./plugin.js index.js

输出的转码结果为：

"use strict"; var xkd = 10; function func() { var xkd = 20; console.log(xkd); }

可以看到，代码中的所有标识符 a 都被替换成了 xkd。
插件配置
插件可以有自己的配置项。我们可以修改前面的例子，看下在 Babel 插件中如何获取配置项。
示例：
例如我们修改 .babelrc 文件中的配置项：

{ "plugins": [ ["./plugin", { "a": "one", "b": "two" }] ] }

然后修改插件代码，从 state.opts 中获取到配置参数。

module.exports = function({ types: babelTypes }) { return { name: "simple-plugin-replace", visitor: { Identifier(path, state) { let name = path.node.name; if (state.opts[name]) { path.node.name = state.opts[name]; } } } }; };

在 index.js 文件中写入需要用到的测试代码：