5月28日 01:45

Babel 的编译流程是怎样的？

Babel 是 JavaScript 编译器，核心职责是将新版语法转换为向后兼容代码。整个编译流程分为三个阶段：解析、转换、生成。

解析（Parsing）

解析阶段将源代码字符串转为抽象语法树（AST），分为两步：

词法分析（Lexical Analysis）：将代码字符串拆分为 token 流。每个 token 是最小语法单元，如关键字、标识符、运算符、标点等。

javascript
// 源代码
const age = 25;

// 词法分析产生的 token 流
[
  { type: 'Keyword', value: 'const' },
  { type: 'Identifier', value: 'age' },
  { type: 'Punctuator', value: '=' },
  { type: 'Numeric', value: '25' },
  { type: 'Punctuator', value: ';' }
]

语法分析（Syntactic Analysis）：根据 token 流构建 AST，描述代码的层级结构和语义关系。

javascript
// 箭头函数的 AST 简化表示
const add = (a, b) => a + b;

// AST 核心结构
{
  type: "VariableDeclaration",
  declarations: [{
    type: "VariableDeclarator",
    id: { type: "Identifier", name: "add" },
    init: {
      type: "ArrowFunctionExpression",
      params: [
        { type: "Identifier", name: "a" },
        { type: "Identifier", name: "b" }
      ],
      body: {
        type: "BinaryExpression",
        operator: "+",
        left: { type: "Identifier", name: "a" },
        right: { type: "Identifier", name: "b" }
      }
    }
  }]
}

对应包：@babel/parser（早期基于 Babylon，后合并入 Babel 官方维护）。

转换（Transforming）

转换阶段是 Babel 的核心。它深度优先遍历 AST，通过插件对目标节点进行增删改操作。

访问者模式（Visitor Pattern） 是转换机制的基石。为每种 AST 节点类型注册访问者函数，遍历到该类型节点时自动触发。

javascript
// 插件示例：箭头函数转普通函数
module.exports = function(babel) {
  const { types: t } = babel;

  return {
    visitor: {
      ArrowFunctionExpression(path) {
        const { node } = path;
        // 箭头函数体如果不是 BlockStatement，包装一层
        const body = t.isBlockStatement(node.body)
          ? node.body
          : t.blockStatement([t.returnStatement(node.body)]);

        path.replaceWith(
          t.functionExpression(
            node.id,
            node.params,
            body,
            node.generator,
            node.async
          )
        );
      }
    }
  };
};

Path 对象：不是节点的简单引用，而是节点在树中位置的完整描述。它提供 replaceWith、remove、insertBefore 等操作方法，还持有父节点、作用域信息，支持向上查找绑定。

插件执行顺序：

插件按声明顺序从前往后执行
Preset 按声明顺序从后往前执行（先声明的 preset 最后执行）
同一节点可能被多个插件访问，先进入的插件修改后的结果会传给后续插件

Preset 机制：Preset 是插件的集合与配置快捷方式。@babel/preset-env 根据目标环境（browserslist 配置）自动引入所需的转换插件，避免手动逐个配置。

生成（Generating）

将转换后的 AST 重新生成为代码字符串，同时可产出 Source Map。

生成器递归遍历 AST 节点，根据节点类型拼接对应的代码文本。例如遇到 VariableDeclaration 节点，输出 var/let/const，然后递归处理声明列表。

javascript
// 转换前
const add = (a, b) => a + b;

// 转换后
var add = function add(a, b) {
  return a + b;
};

对应包：@babel/generator。通过 sourceMaps: true 选项可生成 Source Map，方便调试时映射回源码位置。

完整流程

shell
源代码 → @babel/parser → AST → @babel/traverse(插件) → 修改后AST → @babel/generator → 目标代码 + SourceMap

实际上在进入三阶段之前，还有一个配置阶段：Babel 读取 babel.config.js、.babelrc 或 package.json 中的 babel 配置，加载并合并 plugins 和 presets，确定最终的转换规则链。

面试常问要点

Q：Babel 和编译器（如 V8）的区别？ Babel 只做语法转译（syntax transform），不涉及类型检查和代码执行。TypeScript 编译器既转译语法也做类型检查，V8 则将代码编译为机器码执行。

Q：为什么 Babel 用 AST 而不是正则替换？ 正则无法理解代码语义，容易误替换（如字符串内的箭头符号）。AST 完整描述代码结构，能精确定位和修改目标节点，保证语义正确。

Q：plugin 和 preset 的区别？ Plugin 是单个转换规则，preset 是插件集合。preset-env 按目标环境自动选择插件，preset-react 处理 JSX，preset-typescript 处理 TS 语法。

标签：Babel