利用 Babel 玩转你的代码
我在团队帮助开发 Node 工具时，遇到了需要对多份相似的代码进行一定的处理，但又不能改变原本仓库的代码，这个非常像我们的编译工具做的事情。在一开始的时候，参考了类似 FIS 的功能，简单参照使用代码的 HOOK 配合正则来进行代码的操作。后面觉得实在难以拓展且无法确保修正后的代码可用性，还是觉得必须使用 Babel 来实现源码的操作。
什么是 Babel
babel 可以说是前端工程化用的最多的工具之一。在 ES6 仅仅只有标准时，我们就开始利用 Babel 的 ES6 转换到 ES5 的功能来使用新的语法特性。包括后续大热的React 制定的 JSX 的语法，“凭空”创建出来的语法，为什么能这么快且自然的就融入到前端体系里，这都离不开 Babel 这个编译器的功劳（compiler）。除了编译器功能外，还可以对代码进行各类的静态分析。
原理
babel 利用 babylon 解析器进行语法解析。解析成 AST（抽象语法树）后，经过一定的规则对这个树进行处理后再生成新的语法树。最终新的语法树在生成对应的合法的 Javascript 语法。
AST
AST，就是编译时常说的抽象语法树。树状结构可以帮助我们更好的索引和操作数据结构。例如我们前端三板斧 HTML/CSS/Javascript，而我们平常认知最深的 HTML DOM 树，通过一棵树就可以表达整个页面结构，而 CSS 和 Javascript 都可以通过编译器将语法解析成 AST 抽象语法树。
代码生成 AST 需要进行词法分析和语法分析。
我们可以看一个最简单的程序语法来管中窥豹一下，我们利用 AST Expoler 看看下面这段语法的 AST 到底是长什么样的。
if(3 > 5) {
console.log('3 大于 5')
} else {
console.log('5 大于等于 3')
}
简单画个示意图，部分属性也精简了一下。
我们可以看到，所有的 AST 树的根结点都是 Program 节点。但即使一个非常简单的 if 判断语法对应的都是一支比较复杂的树结构。而 if 语句对应的最重要的三个属性就是 consequent/test/alternate。判断分支内是一个 BinaryExpression（二元表达式），而在 ture/false 分支内则是 CallExpression（函数调用表达式），而调用的函数来自 MemberExpression（成员表达式）。
下面这个表上面这段代码用到的
| 属性 | 描述 |
|---|---|
| BlockStatement | 块级表达式 |
| BinaryExpression | 二元表达式 |
| CallExpression | 函数调用表达式 |
| MemberExpression | 成员表达式 |
| Literal | 文字 |
更多详细的 AST 类型都可以查看 Babylon 提供的 Spec 文档。
babel 插件
在我们简单了解 AST 树后，就可以具体看看如何利用 Babel 插件来玩转我们的代码。Babel 提供了几个核心的 Lib，我们可以关心以下几个，babel-core、babel-types、babel-template。
- babel-core。Babel 的核心库，提供了将代码编译转化的能力。
- babel-types。提供 AST 树节点的类型。
- babel-template。可以将普通字符串转化成 AST，提供更便捷的使用。
Visitors
Visitors 访问者模式，是我们访问 AST 树上的节点时所用到的方法。
const visitors = {
BinaryExpression(path) {
console.log('访问二元表达式的节点')
},
Literal(path) {
console.log('访问文本')
}
}
例如上图就可以定义不同节点类型的访问者，对节点路径进行访问并对节点进行操作并转化。
Paths
我们在 我们定义成树状结构，除了可以完整描述整个代码的结构，也方便让节点和节点之间进行索引和操作。我们通过 visitor 访问节点时，其实访问的是节点的 path，并不是实际上的节点。path 上有该节点信息 path.node，也有类似 DOM 树上一样的可以访问到父节点的信息 path.parent，方便后续的操作。
// 我们通过 visitor 访问到的 AST 节点后，回调参数 path 示例
{
"parent": {
"type": "BinaryExpression",
"operator": ">"
....
},
"node": {
"type": "Literal",
"name": "3",
....
}
}
// in vistors
const visitors = {
Literal(path) {
console.log(path.node.name)
console.log(path.parent.operator)
}
}
示例
我们在了解 visitors 和 paths 后，就可以正式看看如何编写自己的 babel 插件了。
替换操作符
我们最开头的例子的判断条件是一个二元表达式，我们希望将大于号(>)都转换成小于等于(<=)号。
const babel = require('babel-core')
const t = require('babel-types')
const code = `
if(3>5) {}
`
const visitor = {
BinaryExpression(path) {
if(path.node.operator === '>') {
path.replaceWith(
t.binaryExpression(
'<=',
path.node.left,
path.node.right
)
);
}
}
}
const result = babel.transform(code, {
plugins: [
{ visitor }
]
})
console.log(result.code)
import 拆分
在网上很多有关 babel 插件的例子，都会提到这个 import 语句拆分的案例，我也觉得这个案例非常实用且有意义。
我们在使用 lodash 时，如果是用普通的方式引入时，会引入非常大的包，有的时候你只需要使用其中一两个小函数，所以 lodash 提供了分包按需引入的方式。但两者的写法不一样，所以我们需要使用 babel 插件来实现这个功能。
// 转化前，bad
import { uniq, sort as _sort } from 'lodash'
// 转化后，better
import uniq from 'lodash/uniq'
import _sort from 'lodash/sort'
我们可以先去 AST explore 先看看具体 AST 的树结构。然后再来写出我们的插件。
const babel = require('babel-core')
const t = require('babel-types')
const code = `import { unqi, sort as _sort } from 'lodash'`
const visitor = {
ImportDeclaration(path) {
const specifiers = path.node.specifiers
const source = path.node.source
if(!t.isImportDefaultSpecifier(specifiers[0])) {
const myImportDeclaration = specifiers.map(specifier => {
return t.importDeclaration(
[t.importDefaultSpecifier(specifier.local)],
t.stringLiteral(`${source.value}/${specifier.imported.name}`)
)
})
path.replaceWithMultiple(myImportDeclaration)
}
}
}
const result = babel.transform(code, {
plugins: [
{ visitor }
]
})
console.log(result.code)
为你的函数插入一行代码
我们如何对一个函数内部新增 AST 节点，“凭空”插入一行正确无误的代码呢。
const babel = require('babel-core')
const t = require('babel-types')
const code = `
class Page {
onLoad() {
console.log('Hello')
}
}
`
const visitor = {
BlockStatement(path) {
if(path.parent.key.name === 'onLoad' && path.node.body.length === 1) {
const body = path.node.body
const newBlockStatement = t.blockStatement(body.concat(
t.expressionStatement(
t.callExpression(
t.memberExpression(
t.identifier('console'),
t.identifier('log')
),
[t.stringLiteral('World!')]
)
)
))
path.replaceWith(newBlockStatement)
}
}
}
const result = babel.transform(code, {
plugins: [
{ visitor }
]
})
console.log(result.code)
其实思路是一样的，只要我们构建出一个 AST 节点，再把这个节点再插到原本的 AST 树上，那么这个 AST 树就可以转化成我们想要的代码了。
最后
这里我们了解了 AST 树，理解了我们学习工作中常用的 Babel 到底背后做了哪些事，我们就可以更好的融入到前端开发的社区，去做更多的事情。更多更复杂更详细的用法，都可以参照 Babel 官网，或 Babel 插件手册。当然有兴趣的同学也可以把玩一下 CSS 的相关 AST 编译，原理都是一样的。
