编译原理工程实践—05使用babel操作AST实现代码转换

1. 操作步骤

babel 是一个 JavaScript 编译器，使用 babel 可以随心所欲地转化和操作 AST，实现对代码的分析、优化、变更等。可以在 https://esprima.org/demo/parse.html 体验转换查看 js 代码的词法、语法和AST。

babel操作AST的流程如下图所示，主要分为三步：

• parse: 首先使用 @babel/parser 库将js代码解析为AST抽象语法树
• transform: 然后使用 @babel/traverse 库遍历并修改AST，得到新的AST
• generate: 最后使用 @babel/generator 库将新的AST生成为js代码，实现代码的转换

以下案例演示了使用 babel 修改箭头函数为普通函数：

const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;
const t = require('@babel/types');
// 1. 将代码解析为 AST
const code = `const sum = (a, b) => a + b;`;
const ast = parsercsxiaoyao.com.parse(code, {
  sourceType: 'module', // 或 'script'
  plugins: ['jsx', 'typescript']
});
// 2. 遍历 AST
traverse(ast, {
  // 访问所有 Identifier 节点
  Identifier(path) {
    console.log(`找到标识符: ${path.node.name}`);
  },
  // 访问箭头函数表达式
  ArrowFunctionExpression(path) {
    // 修改箭头函数为普通函数
    path.replaceWith(
      t.functionExpression(
        null, // 匿名函数
        path.node.params,
        t.blockStatement([t.returnStatement(path.node.body)])
      )
    );
  }
});
// 3. 生成代码（需 @babel/generator）
const { code: transformedCode } = require('@babel/generator').default(ast);
console.log(transformedCode);
// 输出: const sum = function(a, b) { return a + b; };

2. 核心操作方法

babel 的 @babel/traverse 模块提供了几个核心方法用于遍历和操作 AST：

• traverse(ast, visitors): 这是最基础的AST遍历方法，它接受一个 AST 对象和一个访问器，开发者可以通过开发访问器实现操作各类节点

• path.traverse(visitors): 用于在遍历过程中(访问器内部)继续遍历和操作当前节点的子节点

• path.replaceWith(node): 用于在遍历过程中(访问器内部)替换当前节点为指定节点

• path.remove(): 用于在遍历过程中(访问器内部)删除当前节点及其子节点

• path.skip(): 用于在访问器内部跳过当前节点的子节点的遍历，避免深度遍历以提高效率

• path.stop(): 用于停止整个访问器的遍历

3. visitors访问器格式

上面 traverse 的 visitors 参数是用于遍历 AST 的一种特殊的访问器参数，它有两类遍历方式：

• 通用钩子访问: 以节点类型为key，设置遍历方法，如下方所示，每个 Identifier 类型的节点会被调用两次

traverse(ast, {
  enter(path) {
    // 进入任何节点时触发
  },
  exit(path) {
    // 离开任何节点时触发
  }
});

• 按类型访问: 以节点类型为key，支持的节点类型和 path / state 的具体参数值后面介绍

traverse(ast, {
  Identifier(path, state) { // 节点类型
    // path 提供了许多有用的属性和方法来操作和查询 AST 节点
    // state 对象是一个可选的共享状态对象，用于在遍历过程中跨节点传递数据
    }
});

4. 支持的节点类型

Babel 的 @babel/traverse 支持遍历所有 Babel AST 节点类型，这些节点类型与 @babel/types 包中定义的 AST 节点类型完全对应。以下是完整的分类列表：

4.1 基础节点类型

4.2 表达式（Expressions）

4.3 语句（Statements）

4.4 声明（Declarations）

4.5 特殊节点

4.6 模块相关节点

4.7 类型注解（TypeScript/Flow）

5. visitor-path 常用属性和方法

babel 的 visitor path 对象是在 AST 遍历过程中传递给 visitor 函数的参数，它提供了许多有用的属性和方法来操作和查询 AST 节点。

5.1 核心属性

5.2 核心方法

1. 查询与遍历

2. 节点操作

3. 作用域操作

4. 类型检查

5. 流程控制

6. 代码生成与错误

7. 高级工具

5.3 特殊场景方法

• JSX 操作：isJSXElement(), getJSXAttribute(), buildJSXElement() 等。

• 类型注解：getTypeAnnotation(), setTypeAnnotation()（用于 Flow/TypeScript）。

• 模版字面量：getTemplateLiteralElements().

5.4 注意事项

1. 避免直接修改 node 属性：推荐使用 replaceWith 或 insertBefore 等方法，以确保 AST 的完整性。
2. 作用域管理：在修改变量名或声明时，务必通过 scope 方法操作，避免破坏作用域链。
3. 性能优化：在遍历大型 AST 时，尽量使用 skip() 或条件判断减少不必要的遍历。