《前端风向标》专栏不定期分享前端框架相关的技术、热点动态，帮助社区成员进行能力拓展学习，开启技术探索之旅！ 本期分享《前端工程化的基石--转译器》，欢迎查阅。
本期作者：黄轩 openInula核心贡献者/架构SIG 成员
在现代前端开发中，JavaScript 语言在ECMAScript规范的推动下发展迅速，新的语法特性和提案层出不穷。然而，浏览器的跟进速度往往不一，旧版本的浏览器可能无法识别这些新语法。为了让开发者能够无缝使用最新的语言特性，同时保证代码在各种环境下的兼容性，转译器（Transpiler）应运而生，成为前端工程化中不可或缺的一环。
什么是转译器？
转译器，也常被称为源到源编译器（Source-to-Source Compiler），是一种特殊的编译器。它读取用某种编程语言编写的源代码，然后将其转换为另一种编程语言或同一语言的另一个版本的等效源代码。在前端领域，最典型的应用就是将 ES6+（ECMAScript 2015 及更高版本）的 JavaScript 代码转换为向后兼容的 ES5 代码。
转译器使得开发者可以：
- 使用最新的 JavaScript 语法特性，提高开发效率和代码可读性。
- 确保代码在旧版浏览器或特定 JavaScript 环境中也能正确运行。
- 使用像 TypeScript 或 JSX 这样的 JavaScript 超集或扩展语法。
转译器的关键步骤：以 Babel 为例深入解析
Babel 是目前应用最广泛的 JavaScript 转译器之一。它通过一套精心设计的模块化工具链，实现了高效且灵活的代码转换。理解 Babel 的核心工作流程，有助于我们深入理解转译器是如何工作的。
Babel 的转译过程主要分为三个核心阶段：
- 解析（Parsing）: 将源代码字符串转换为机器更容易理解的结构——抽象语法树（AST）。
- 转换（Transforming）: 遍历并操作 AST，将其转换为期望的形态。这是转译的核心，实际的语法转换在此阶段完成。
- 生成（Generating）: 将转换后的 AST 重新转换回代码字符串，同时可以生成源码映射（Source Map）。
下面我们以 Babel 的核心模块为例，结合概念性的源码逻辑来剖析这三个步骤。
1. 解析 (Parsing) - @babel/parser
解析阶段的目标是将输入的源代码字符串转换成一种结构化的、树形的表示，即抽象语法树（AST）。Babel 使用 @babel/parser 来完成这个任务。
流程概述：
@babel/parser 首先进行词法分析得到Token和，在进行语法分析得到即抽象语法树（AST）
- 词法分析（Tokenization）：将代码字符串分解成一个个不可再分的单元，称为“令牌”（Token）。例如，
const answer = 42;会被分解为 const, answer, =, 42 等Token； - 语法分析（Parsing）: 根据语言的语法规则，将令牌流组合成一个表示程序结构的树状结构，即 AST。每个节点都代表了源代码中的一种结构；
假设我们有如下 JavaScript 代码：
// sourceCode.js
const name = "Babel";
@babel/parser 会将其解析成类似下面的 AST 结构 ：
{
"type": "Program",
"start": 0,
"end": 21,
"body": [
{
"type": "VariableDeclaration",
"start": 0,
"end": 21,
"declarations": [
{
"type": "VariableDeclarator",
"start": 6,
"end": 20,
"id": {
"type": "Identifier",
"start": 6,
"end": 10,
"name": "name"
},
"init": {
"type": "Literal",
"start": 13,
"end": 20,
"value": "Babel",
"raw": "\"Babel\""
}
}
],
"kind": "const"
}
],
"sourceType": "module"
}
这个 AST 清晰地描述了代码的结构：一个程序，包含一个 const 类型的变量声明，变量名为 name，初始值为字符串 "Babel"。Babel 遵循 ESTree 规范 (并有所扩展) 来定义其 AST 结构。
2. 转换 (Transforming) - @babel/traverse
解析得到 AST 后，Babel 进入转换阶段。这个阶段的核心任务是遍历 AST，并对其中的节点进行增、删、改等操作，以实现代码的转换。@babel/traverse 模块负责遍历 AST，而具体的转换逻辑则由各种 Babel 插件（Plugins） 提供。
源码示例 (@babel/traverse 和 Plugin)： 假设我们想把上面代码中的 const 关键字转换为 var。我们可以编写一个简单的 Babel 插件：
const myVisitor = {
VariableDeclaration(path) {
// 'path' 是一个非常重要的对象，它代表了两个节点之间的连接，
// 包含了当前节点(path.node)、父节点、作用域、以及大量用于操作 AST 的方法。
console.log(`Visiting VariableDeclaration of kind: ${path.node.kind}`);
if (path.node.kind === 'const') {
// 直接修改 AST 节点
path.node.kind = 'var';
console.log(`Changed 'const' to 'var' for variable: ${path.node.declarations.id.name}`);
}
};
调用该插件
const traverse = require('@babel/traverse').default;
traverse(ast, myVisitor);
经过上述 traverse(ast, myVisitor) 或插件处理后，AST 变为：
{
"type": "Program",
"start": 0,
"end": 21,
"body": [
{
"type": "VariableDeclaration",
"start": 0,
"end": 21,
"declarations": [
{
"type": "VariableDeclarator",
"start": 6,
"end": 20,
"id": {
"type": "Identifier",
"start": 6,
"end": 10,
"name": "name"
},
"init": {
"type": "Literal",
"start": 13,
"end": 20,
"value": "Babel",
"raw": "\"Babel\""
}
}
],
"kind": "var" // <--- 这里被修改了
}
],
"sourceType": "module"
}
在插件中，path 对象是操作 AST 的关键。它提供了丰富的方法来查询节点信息（如 path.isNodeType()）、访问父子节点、获取作用域信息（path.scope）、替换节点（path.replaceWith()）、删除节点（path.remove()）。Babel 的绝大多数功能，如 ES6 转 ES5、JSX 转换、TypeScript 转换等，都是通过一个个精细的插件，利用 @babel/traverse 进行修改来实现的。
3. 生成 (Generating) - @babel/generator
当 AST 被所有相关插件转换完毕后，最后一步就是将这个修改后的 AST 再转换回 JavaScript 代码字符串。这个任务由 @babel/generator 模块完成。
流程概述：
@babel/generator 会深度优先遍历最终的 AST，然后根据每个节点的类型和属性，将其“打印”成对应的代码字符串。它还会处理代码的格式化、注释的保留以及生成 Source Map。
const generate = require('@babel/generator').default;
// 假设我们有上面转换阶段得到的 transformedAst 对象
const output = generate(
transformedAst,
{
sourceMaps: true, // 是否生成 source map
sourceFileName: "source.js", // 原始文件名 (用于 source map)
comments: true, // 是否保留 AST 中的注释
compact: false, // 是否移除不必要空格和换行
retainLines: false, // 是否尝试保留原始行号
minified: false // 是否进行简化 (如合并变量声明)
// ... 还有更多选项
}
);
generator的本质就是递归遍历AST，并根据节点类型拼接字符串，经过简化的核心逻辑如下
function conceptualGenerate(astNode, options = {}) {
let code = "";
if (astNode.type === "File") {
code += conceptualGenerate(astNode.program, options);
} else if (astNode.type === "Program") {
astNode.body.forEach(node => {
code += conceptualGenerate(node, options);
});
} else if (astNode.type === "VariableDeclaration") {
code += `${astNode.kind} `; // 'var'
astNode.declarations.forEach((decl, index) => {
code += conceptualGenerate(decl.id, options); // 'name'
if (decl.init) {
code += ` = ${conceptualGenerate(decl.init, options)}`; // '"Babel"'
}
if (index < astNode.declarations.length - 1) {
code += ", ";
}
});
code += ";\n";
} else if (astNode.type === "Identifier") {
code += astNode.name;
} else if (astNode.type === "StringLiteral") {
code += `"${astNode.value}"`; // 需要处理转义，此处仅为示意
}
// ... 省略其他所有节点类型的处理逻辑
return code;
}
4. Babel Core (@babel/core)
以上三个步骤 (@babel/parser, @babel/traverse + 插件, @babel/generator) 是 Babel 转译过程的核心。而 @babel/core 模块则充当了 orchestrator（协调器） 的角色。 它将这些模块串联起来，提供了统一的 API (如 babel.transformSync, babel.transformFileSync, babel.transformFromAstSync)，接收源代码和配置（包括要使用的插件和预设），然后按顺序执行解析、转换、生成这三个阶段，最终输出转换后的代码和 Source Map。
// 概念上 @babel/core 的 transform 流程
function conceptualBabelTransform(sourceCode, options) {
// 1. 解析 (Parsing)
const ast = options.parser.parse(sourceCode, options.parserOpts);
// 2. 转换 (Transforming)
// 应用所有插件 (plugins) 和预设 (presets) 中的插件
// presets 是一系列插件的集合
let currentAst = ast;
for (const plugin of options.plugins) {
const pluginVisitor = plugin({ types: t /* ...其他Babel辅助工具 */ }).visitor;
// traverse(currentAst, pluginVisitor); // 伪代码，实际更复杂，会合并visitor等
// Babel 会有一个更复杂的机制来合并和运行所有visitor
}
const transformedAst = currentAst; // 假设 currentAst 已经被所有插件修改
// 3. 生成 (Generating)
const { code, map } = options.generator.generate(transformedAst, options.generatorOpts);
return { code, map, ast: transformedAst };
}
总结
转译器是前端工程化中应对 JavaScript 语言快速发展和环境兼容性问题的关键技术。通过深入了解以 Babel 为代表的转译器的工作原理——从解析源代码到 AST，通过访问者模式在插件中转换 AST，再到将 AST 生成目标代码——可以更好地理解代码是如何被转换的，也能在遇到问题时更有方向性地去排查，甚至有能力去编写自定义的 Babel 插件来满足特定的代码转换需求。
⭐Star一下不迷路，欢迎交流~
· openInula社区主仓地址：
· openInula官网：
