动手点关注 干货不迷路 👇
Babel 是一个 source to source(源码到源码)的 JavaScript 编译器,简单来说,你为 Babel 提供一些 JavaScript 代码,Babel 可以更改这些代码,然后返回给你新生成的代码。Babel 主要用于将 ECMAScript 2015+ 代码转换为能够向后兼容的 JavaScript 版本。Babel 使用插件系统进行代码转换,因此任何人都可以为 babel 编写自己的转换插件,以支持实现广泛的功能。
Babel 的编译流程主要分为三个部分:解析(parse),转换(transform),生成(generate)。
code -> AST -> transformed AST -> transformed code
将源码转换成抽象语法树(AST, Abstract Syntax Tree)。
比如:
function square(n) {
return n * n;
}
以上的程序可以被转换成类似这样的抽象语法树:
- FunctionDeclaration:
- id:
- Identifier:
- name: square
- params [1]
- Identifier
- name: n
- body:
- BlockStatement
- body [1]
- ReturnStatement
- argument
- BinaryExpression
- operator: *
- left
- Identifier
- name: n
- right
- Identifier
- name: n
转换阶段接受一个 AST 并遍历它,在遍历的过程中对树的节点进行增删改。这也是运行 Babel 插件的阶段。
将经过一系列转换之后的 AST 转换成字符串形式的代码,同时还会创建 sourcemap。
对于每一个阶段,Babel 都提供了一些工具库:
以上提及的包都是 @babel/core 的 dependencies,所以只需要安装 @babel/core 就能访问到它们。
除了上面提到的工具库,以下工具库也比较常用:
本文不会深入讨论它们的详细用法,当你在编写插件的时候,可以根据功能需求找到它们,我们后文也会涉及到部分用法。
接下来让我们开始认识 Babel 插件吧。
babel 插件是一个简单的函数,它必须返回一个匹配以下接口的对象。如果 Babel 发现未知属性,它将抛出错误。
export default function(api, options, dirname) {
return {
visitor: {
StringLiteral(path, state) {},
}
};
};
Babel 插件接受 3 个参数:
返回的对象有 name、manipulateOptions、pre、visitor、post、inherits 等属性:
我们上面提到了一些陌生的概念:visitor、path、state,现在让我们一起来认识它们:
这个名字来源于设计模式中的访问者模式(https://en.wikipedia.org/wiki/Visitor_pattern)。简单的说它就是一个对象,指定了在遍历 AST 过程中,访问指定节点时应该被调用的方法。
function foo() {
return 'string'
}
- Program
- FunctionDeclaration (body[0])
- Identifier (id)
- BlockStatement (body)
- ReturnStatement (body[0])
- StringLiteral (arugument)
当 visitor.StringLiteral 是一个函数时,它将在向下遍历的过程中被调用(即进入阶段)。当 visitor.StringLiteral 是一个对象时({ enter(path, state) {}, exit(path, state) {} }
),visitor.StringLiteral.enter 将在向下遍历的过程中被调用(进入阶段),visitor.StringLiteral.exit 将在向上遍历的过程中被调用(退出阶段)。
Path 用于表示两个节点之间连接的对象,这是一个可操作和访问的巨大可变对象。
Path 之间的关系如图所示:
除了能在 Path 对象上访问到当前 AST 节点、父级 AST 节点、父级 Path 对象,还能访问到添加、更新、移动和删除节点等其他方法,这些方法提高了我们对 AST 增删改的效率。
在实际编写插件的过程中,某一类型节点的处理可能需要依赖其他类型节点的处理结果,但由于 visitor 属性之间互不关联,因此需要 state 帮助我们在不同的 visitor 之间传递状态。
const anotherVisitor = {
Identifier(path) {
console.log(this.someParam) // => 'xxx'
}
};
const MyVisitor = {
FunctionDeclaration(path, state) {
// state.cwd: 当前执行目录
// state.opts: 插件 options
// state.filename: 当前文件名(绝对路径)
// state.file: BabelFile 对象,包含当前整个 ast,当前文件内容 code,etc.
// state.key: 当前插件名字
path.traverse(anotherVisitor, { someParam: 'xxx' });
}
};
export default function({ types: t }) {
return {
pre(state) {
this.cache = new Map();
},
visitor: {
StringLiteral(path) {
this.cache.set(path.node.value, 1);
}
},
post(state) {
console.log(this.cache);
}
};
}
Babel 没有完整的文档讲解所有的 api,因此下面会列举一些可能还算常用的 api(并不是所有,主要是 path 和 types 上的方法或属性),我们并不需要全部背下来,在你需要用的时候,能找到对应的方法即可。
你可以通过 babel 的 typescript 类型定义找到以下列举的属性和方法,还可以通过 Babel Handbook 找到它们的具体使用方法。
Babel Handbook:https://astexplorer.net/
查询
遍历
判断
增删改
作用域
在 @babel/types 的类型定义中,可以找到所有 AST 节点类型。我们不需要记住所有节点类型,社区内有一个 AST 可视化工具能够帮助我们分析 AST:axtexplorer.net。
在这个网站的左侧,可以输入我们想要分析的代码,在右侧会自动生成对应的 AST。当我们在左侧代码区域点击某一个节点,比如函数名 foo,右侧 AST 会自动跳转到对应的 Identifier AST 节点,并高亮展示。
现在让我们来实现一个简单的插件吧!以下是插件需要实现的功能:
因此,对于以下输入:
const s1 = "foo";
const s2 = "foo";
const s3 = "bar";
function f1() {
const s4 = "baz";
if (true) {
const s5 = "baz";
}
}
应该输出以下代码:
var _foo = "foo",
_baz = "baz";
const s1 = _foo;
const s2 = _foo;
const s3 = "bar";
function f1() {
const s4 = _baz;
if (true) {
const s5 = _baz;
}
}
通过 https://astexplorer.net/,我们发现代码里的字符串在 AST 上对应的节点叫做 StringLiteral,如果想要拿到代码里所有的字符串并且统计每种字符串的数量,就需要遍历 StringLiteral 节点。
我们需要一个对象用于存储所有 StringLiteral,key 是 StringLiteral 节点的 value 属性值,value 是一个数组,用于存储拥有相同 path.node.value 的所有 path 对象,最后把这个对象存到 state 对象上,以便于在遍历结束时能统计相同字符串的重复次数,从而可以判断哪些节点需要被替换为一个标识符。
export default function() {
return {
visitor: {
StringLiteral(path, state) {
state.stringPathMap = state.stringPathMap || {};
const nodes = state.stringPathMap[path.node.value] || [];
nodes.push(path);
state.stringPathMap[path.node.value] = nodes;
}
}
};
}
通过 https://astexplorer.net/,我们发现如果想要往顶层作用域中插入一个变量,其实就是往 Program 节点的 body 上插入 AST 节点。Program 节点也是 AST 的顶层节点,在遍历过程的退出阶段,Program 节点是最后一个被处理的,因此我们需要做的事情是:根据收集到的字符串字面量,分别创建一个位于顶层作用域的变量,并将它们统一插入到 Program 的 body 中,同时将代码中的字符串替换为对应的变量。
export default function() {
return {
visitor: {
StringLiteral(path, state) { /** ... */ },
Program: {
exit(path, state) {
const { minCount = 2 } = state.opts || {};
for (const [string, paths] of Object.entries(state.stringPathMap || {})) {
if (paths.length < minCount) {
continue;
}
const id = path.scope.generateUidIdentifier(string);
paths.forEach(p => {
p.replaceWith(id);
});
path.scope.push({ id, init: types.stringLiteral(string) });
}
},
},
}
};
}
import { PluginPass, NodePath } from '@babel/core';
import { declare } from '@babel/helper-plugin-utils';
interface Options {
/**
* 当字符串字面量的重复次数大于或小于 minCount,将会被提升到顶层作用域
*/
minCount?: number;
}
type State = PluginPass & {
// 以 StringLiteral 节点的 value 属性值为 key,存放所有 StringLiteral 的 Path 对象
stringPathMap?: Record<string, NodePath[]>;
};
const HoistCommonString = declare<Options>(({ assertVersion, types }, options) => {
// 判断当前 Babel 版本是否为 7
assertVersion(7);
return {
// 插件名字
name: 'hoist-common-string',
visitor: {
StringLiteral(path, state: State) {
// 将所有 StringLiteral 节点对应的 path 对象收集起来,存到 state 对象里,
// 以便于在遍历结束时能统计相同字符串的重复次数
state.stringPathMap = state.stringPathMap || {};
const nodes = state.stringPathMap[path.node.value] || [];
nodes.push(path);
state.stringPathMap[path.node.value] = nodes;
},
Program: {
// 将在遍历过程的退出阶段被调用
// Program 节点是顶层 AST 节点,可以认为 Program.exit 是最后一个执行的 visitor 函数
exit(path, state: State) {
// 插件参数。还可以通过 state.opts 拿到插件参数
const { minCount = 2 } = options || {};
for (const [string, paths] of Object.entries(state.stringPathMap || {})) {
// 对于重复次数少于 minCount 的 Path,不做处理
if (paths.length < minCount) {
continue;
}
// 基于给定的字符串创建一个唯一的标识符
const id = path.scope.generateUidIdentifier(string);
// 将所有相同的字符串字面量替换为上面生成的标识符
paths.forEach(p => {
p.replaceWith(id);
});
// 将标识符添加到顶层作用域中
path.scope.push({ id, init: types.stringLiteral(string) });
}
},
},
},
};
});
测试 Babel 插件有三种常用的方法:
我们一般使用第二种方法,配合 babel-plugin-tester 可以很好地帮助我们完成测试工作。配合 babel-plugin-tester,我们可以对比输入输出的字符串、文件、快照。
import pluginTester from 'babel-plugin-tester';
import xxxPlugin from './xxxPlugin';
pluginTester({
plugin: xxxPlugin,
fixtures: path.join(__dirname, '__fixtures__'),
tests: {
// 1. 对比转换前后的字符串
// 1.1 输入输出完全一致时,可以简写
'does not change code with no identifiers': '"hello";',
// 1.2 输入输出不一致
'changes this code': {
code: 'var hello = "hi";',
output: 'var olleh = "hi";',
},
// 2. 对比转换前后的文件
'using fixtures files': {
fixture: 'changed.js',
outputFixture: 'changed-output.js',
},
// 3. 与上一次生成的快照做对比
'using jest snapshots': {
code: `
function sayHi(person) {
return 'Hello ' + person + '!'
}
`,
snapshot: true,
},
},
});
本文将以快照测试为例,以下是测试我们插件的示例代码:
import pluginTester from 'babel-plugin-tester';
import HoistCommonString from '../index';
pluginTester({
// 插件
plugin: HoistCommonString,
// 插件名,可选
pluginName: 'hoist-common-string',
// 插件参数,可选
pluginOptions: {
minCount: 2,
},
tests: {
'using jest snapshots': {
// 输入
code: `const s1 = "foo";
const s2 = "foo";
const s3 = "bar";
function f1() {
const s4 = "baz";
if (true) {
const s5 = "baz";
}
}`,
// 使用快照测试
snapshot: true,
},
},
});
当我们运行 jest 后(更多关于 jest 的介绍,可以查看 jest 官方文档https://jestjs.io/docs/getting-started),会生成一个 snapshots 目录:
有了快照以后,每次迭代插件都可以跑一下单测以快速检查功能是否正常。快照的更新也很简单,只需要执行 jest --updateSnapshot
。
如果想要使用 Babel 插件,需要在配置文件里添加 plugins 选项,plugins 选项接受一个数组,值为字符串或者数组。以下是一些例子:
// .babelrc
{
"plugins": [
"babel-plugin-myPlugin1",
["babel-plugin-myPlugin2"],
["babel-plugin-myPlugin3", { /** 插件 options */ }],
"./node_modules/asdf/plugin"
]
}
Babel 对插件名字的格式有一定的要求,比如最好包含 babel-plugin,如果不包含的话也会自动补充。以下是 Babel 插件名字的自动补全规则:
到这里,Babel 插件的学习就告一段落了,如果大家想继续深入学习 Babel 插件,可以访问 Babel 的仓库(https://github.com/babel/babel/tree/main/packages)这是一个 monorepo,里面包含了很多真实的插件,通过阅读这些插件,相信你一定能对 Babel 插件有更深入的理解!
Babel plugin handbook:https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md
Babel 官方文档:https://babeljs.io/docs/en/
Babel 插件通关秘籍:https://juejin.cn/book/6946117847848321055
我们来自字节跳动飞书商业应用研发部(Lark Business Applications),目前我们在北京、深圳、上海、武汉、杭州、成都、广州、三亚都设立了办公区域。我们关注的产品领域主要在企业经营管理软件上,包括飞书 OKR、飞书绩效、飞书招聘、飞书人事等 HCM 领域系统,也包括飞书审批、OA、法务、财务、采购、差旅与报销等系统。欢迎各位加入我们。
内推:欢迎扫码投递简历