前言
相信目前常与 ES6 代码打交道的同学对 Babel 应该不会陌生，在 ES6 代码被编译转化为 ES5 代码的过程中，Babel 插件显得尤为重要，我们最后经由 Babel 生成的代码取决于插件在这一层中做了什么事，在探索这其中的过程之前，我们先来了解下一些所需的基础知识。
抽象语法树
Babel 的工作流可以用下面一张图来表示，代码首先经由 babylon 解析成抽象语法树（AST），后经一些遍历和分析转换（主要过程），最后根据转换后的 AST 生成新的常规代码。
在这其中，理解清楚 AST 十分重要，我们之所以需要将代码转换为 AST 也是为了让计算机能够更好地进行理解。我们可以来看看下面这段代码被解析成 AST 后对应的结构图：
|
1 2 3 4 5 6 7 |
function abs(number) { if (number >= 0) { // test return number; // consequent } else { return -number; // alternate } } |
所有的 AST 根节点都是 Program 节点，从上图中我们可以看到解析生成的 AST 的结构的各个 Node 节点都很细微，Babylon AST 有个文档对每个节点类型都做了详细的说明，你可以对照各个节点类型在这查找到所需要的信息。在这个例子中，我们主要关注函数声明里的内容， IfStatement 对应代码中的 if...else 区块的内容，我们先对条件（test）进行判断，这里是个简单的二进制表达式，我们的分支也会从这个条件继续进行下去，consequent 代表条件值为 true 的分支，alternate 代表条件值为 false 的分支，最后两条分支各自在 ReturnStatement 节点进行返回。
了解 AST 各个节点的类型是后续编写插件的关紧，AST 通常情况下都是比较复杂的，上述一段简单的函数定义也生成了比较大的 AST，对于一些复杂的程序，我们可以借助astexplorer 来帮我们分析 AST 的结构。
遍历节点
在插件里进行节点遍历需要先了解 visitor 和 path 的概念，前者相当于从众多节点类型中选择开发者所需要的节点，后者相当于对节点之间的关系的访问。
visitor
Babel 使用 babel-traverse 进行树状的遍历，对于 AST 树上的每一个分支我们都会先向下遍历走到尽头，然后向上遍历退出遍历过的节点寻找下一个分支。Babel 提供我们一个visitor 对象供我们获取 AST 里所需的具体节点来进行访问，比如我只想访问 if...else 生成的节点，我们可以在 visitor 里指定获取它所对应的节点：
|
1 2 3 4 5 |
const visitor = { IfStatement() { console.log('get if'); } }; |
继续上述所说的遍历，其实这种遍历会让每个节点都会被访问两次，一次是向下遍历代表进入（enter），一次是向上退出（exit）。因此实际上每个节点都会有 enter 和 exit 方法，在实际操作的时候需要注意这种遍历方式可能会引起的一些问题，上述例子是省略掉enter 的简写。
|
1 2 3 4 5 6 |
const visitor = { IfStatement: { enter() {}, exit() {} } } |
path
visitor 模式中我们对节点的访问实际上是对节点路径的访问，在这个模式中我们一般把path 当作参数传入节点选择器中。path 表示两个节点之间的连接，通过这个对象我们可以访问到节点、父节点以及进行一系列跟节点操作相关的方法（类似 DOM 的操作）。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
var babel = require('babel-core'); var t = require('babel-types'); const code = `d = a + b + c`; const visitor = { Identifier(path) { console.log(path.node.name); // d a b c } }; const result = babel.transform(code, { plugins: [{ visitor: visitor }] }); |
替换节点
具备了 AST 相关知识和了解 visitor、path 后，就可以编写一个简单的 Babel 插件了。我们要把上述的 abs 函数换成原生支持的 Math.abs 来进行调用 。
首先我们先解析下 abs(-8) 的 AST 结构，直接从表达式语句（ExpressionStatement）开始：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
{ type: "ExpressionStatement", expression: { type: "CallExpression", callee: { type: "Identifier", name: "abs" }, arguments: [{ type: "UnaryExpression", operator: "-", prefix: true, arguments: { type: "NumericLiteral", value: 8 } }] } } |
我们可以看到表达式语句下面的 expression 主要是函数调用表达式（CallExpression），因此我们也需要创建一个函数调用表达式，此外，Math.abs 是一个二元操作表达式，属于MemberExpression 类型。上述两个 AST 节点我们可以借助 babel-types 里提供的一些方法帮我们快速创建。
|
1 2 3 4 5 6 7 |
// 创建函数调用表达式 t.CallExpression( // 创建对象属性引用 t.MemberExpression(t.identifier('Math'), t.identifier('abs')), // 原始节点函数调用参数 path.node.arguments ) |
最后我们需要对此次函数调用不符合的节点进行过滤，过滤掉名字不等于 abs 的函数调用，因为 Babel 在遍历的过程是递归的，如果不过滤做限制的话，程序将会一直运行最终报调用栈超过阈值的错误。
RangeError: unknown: Maximum call stack size exceeded
最终代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
var babel = require('babel-core'); var t = require('babel-types'); const code = `abs(-8);`; const visitor = { CallExpression(path) { if (path.node.callee.name !== 'abs') return; path.replaceWith(t.CallExpression( t.MemberExpression(t.identifier('Math'), t.identifier('abs')), path.node.arguments )); } }; const result = babel.transform(code, { plugins: [{ visitor: visitor }] }); // Math.abs(-8) console.log(result.code); |
上述例子使用了 transform api 直接解析转换生成了新的代码，另外在单独编写 Babel 插件的时候，暴露的参数里一般都含有常用的 babel-types 对象供使用。
|
1 2 3 4 5 |
export default function({ types: t }) { return { visitor: {} }; } |
总结
通过编写 Babel 插件我们能对 AST 有一定的了解，另外，我认为现阶段 Babel 插件不仅仅止于对 ES6 代码的转换上，npm 上有一系列的插件覆盖了许多适合的应用场景，后续具有一定的探索性。
