JavaScript内核与高级编程之：`JavaScript`的`Babel AST`：其在代码转换中的生成、遍历和修改。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

嘿，各位代码界的弄潮儿们，早上好/下午好/晚上好！今天咱们不聊风花雪月，只聊聊代码背后的秘密——JavaScript的Babel AST，也就是抽象语法树。别被“抽象”吓到，这玩意儿其实挺实在的，掌握了它，你就能像黑客帝国里的尼奥一样，看到代码的本质。

一、什么是AST？为什么要用它？

想象一下，你对着一堆代码，电脑也对着一堆代码。你看到的是有含义的逻辑，而电脑看到的只是一堆字符串。 AST，就是把这堆字符串转化成电脑也能理解的结构化数据，让它知道哪个是变量，哪个是函数，哪个是循环。

1. 代码解析的基石

AST是编译器、解释器等工具进行语法分析的基础。没了AST，代码转换、代码分析、代码优化都成了空中楼阁。

2. Babel的灵魂

Babel，这个前端开发必备的工具，能把ES6+的代码转换成ES5，让老旧浏览器也能运行。它的核心就是AST。 Babel先将代码解析成AST，然后修改AST，最后再把修改后的AST转换成新的代码。

3. 代码转换的利器

你想自动给代码加注释？你想自动优化代码？你想实现代码混淆？只要有了AST，这些都不是梦。

二、 AST长啥样？

AST本质上是一个树状结构，每个节点代表代码中的一个语法结构。比如，一个变量声明，一个函数定义，一个循环语句，都会对应AST上的一个节点。

咱们来看一个简单的例子：

const a = 1 + 2;

这行代码对应的AST（简化版）大概是这样的：

{
  "type": "VariableDeclaration",
  "declarations": [
    {
      "type": "VariableDeclarator",
      "id": {
        "type": "Identifier",
        "name": "a"
      },
      "init": {
        "type": "BinaryExpression",
        "operator": "+",
        "left": {
          "type": "NumericLiteral",
          "value": 1
        },
        "right": {
          "type": "NumericLiteral",
          "value": 2
        }
      }
    }
  ],
  "kind": "const"
}

看起来有点复杂？别怕，咱们来拆解一下：

type: 节点的类型，比如VariableDeclaration（变量声明）、Identifier（标识符，也就是变量名）、NumericLiteral（数字字面量）。
declarations: 一个数组，包含了所有声明的变量。
id: 被声明的变量的名字。
init: 变量的初始值。
BinaryExpression: 二元表达式，比如加减乘除。
operator: 操作符，比如+。
left: 左边的操作数。
right: 右边的操作数。
kind: 声明类型，例如 const, let, var。

看到了吗？ AST把代码拆解成了细粒度的节点，每个节点都包含了关于代码片段的信息。

三、如何生成AST？

Babel提供了一个叫做@babel/parser的包，专门用来把代码解析成AST。

1. 安装 @babel/parser

npm install @babel/parser --save-dev

2. 使用 parse 方法

const parser = require("@babel/parser");

const code = `const a = 1 + 2;`;

const ast = parser.parse(code, {
  sourceType: "module", // 指定代码类型，module 表示 ES module
  plugins: ["jsx"] // 如果代码包含 JSX 语法，需要添加 jsx 插件
});

console.log(JSON.stringify(ast, null, 2)); // 格式化输出AST

运行上面的代码，你就能在控制台看到生成的AST了。

3. 常用配置项

parser.parse 方法接受一个可选的配置对象，常用的配置项包括：

配置项	描述
`sourceType`	指定代码类型，`module` 表示 ES module，`script` 表示传统的 script 脚本。
`plugins`	一个数组，包含了需要启用的插件。比如，如果代码包含 JSX 语法，需要添加 `jsx` 插件。其他常用的插件包括 `typescript`、`flow` 等。
`startLine`	指定起始行号，默认为 1。
`tokens`	是否生成 tokens，tokens 是代码的词法单元，比如关键字、标识符、操作符等。

四、如何遍历AST？

有了AST，下一步就是遍历它，找到你感兴趣的节点。 Babel提供了一个叫做@babel/traverse的包，专门用来遍历AST。

1. 安装 @babel/traverse

npm install @babel/traverse --save-dev

2. 使用 traverse 方法

const parser = require("@babel/parser");
const traverse = require("@babel/traverse").default;

const code = `
  const a = 1 + 2;
  function add(x, y) {
    return x + y;
  }
`;

const ast = parser.parse(code, {
  sourceType: "module"
});

traverse(ast, {
  Identifier(path) {
    console.log("Identifier:", path.node.name);
  },
  NumericLiteral(path) {
    console.log("NumericLiteral:", path.node.value);
  }
});

运行上面的代码，你就能在控制台看到遍历的结果。

3. path 对象

在 traverse 方法的回调函数中，你会得到一个 path 对象。 path 对象包含了当前节点的信息，以及一些有用的方法，比如：

path.node: 当前节点。
path.parent: 父节点。
path.scope: 作用域。
path.replaceWith(newNode): 用新节点替换当前节点。
path.remove(): 删除当前节点。
path.skip(): 跳过当前节点的子节点。
path.traverse(visitor): 遍历当前节点的子节点。

4. Visitor 对象

traverse 方法接受一个 Visitor 对象， Visitor 对象是一个包含了各种节点类型处理函数的对象。比如，上面的例子中，我们定义了 Identifier 和 NumericLiteral 两个处理函数。当遍历到 Identifier 类型的节点时，就会调用 Identifier 函数。

5. 常用节点类型

节点类型	描述
`Identifier`	标识符，也就是变量名、函数名等。
`NumericLiteral`	数字字面量，比如 `1`、`3.14`。
`StringLiteral`	字符串字面量，比如 `"hello"`、`'world'`。
`BooleanLiteral`	布尔字面量，比如 `true`、`false`。
`NullLiteral`	`null` 字面量。
`BinaryExpression`	二元表达式，比如 `a + b`、`x * y`。
`CallExpression`	函数调用，比如 `add(1, 2)`。
`MemberExpression`	成员表达式，比如 `obj.name`、`arr[0]`。
`FunctionDeclaration`	函数声明，比如 `function add(x, y) {}`。
`VariableDeclaration`	变量声明，比如 `const a = 1;`、`let b = 2;`。
`IfStatement`	`if` 语句。
`ForStatement`	`for` 语句。
`WhileStatement`	`while` 语句。
`BlockStatement`	块语句，也就是用 `{}` 包裹的代码块。

五、如何修改AST？

修改AST是代码转换的关键。 Babel提供了一些方法来替换、删除、添加节点。

1. 替换节点

使用 path.replaceWith(newNode) 方法可以替换当前节点。

const parser = require("@babel/parser");
const traverse = require("@babel/traverse").default;
const generator = require("@babel/generator").default;
const t = require("@babel/types"); // 用于创建 AST 节点

const code = `const a = 1 + 2;`;

const ast = parser.parse(code, {
  sourceType: "module"
});

traverse(ast, {
  BinaryExpression(path) {
    // 将 1 + 2 替换成 3
    path.replaceWith(t.numericLiteral(3));
  }
});

const newCode = generator(ast).code;
console.log(newCode); // 输出：const a = 3;

2. 删除节点

使用 path.remove() 方法可以删除当前节点。

const parser = require("@babel/parser");
const traverse = require("@babel/traverse").default;
const generator = require("@babel/generator").default;

const code = `const a = 1 + 2;`;

const ast = parser.parse(code, {
  sourceType: "module"
});

traverse(ast, {
  VariableDeclaration(path) {
    // 删除变量声明
    path.remove();
  }
});

const newCode = generator(ast).code;
console.log(newCode); // 输出："" (空字符串)

3. 添加节点

添加节点稍微复杂一些，你需要找到合适的位置，然后使用 path.insertBefore() 或 path.insertAfter() 方法插入新节点。通常，你需要结合 path.container 属性来确定插入位置。

4. 使用 @babel/types 创建节点

Babel提供了一个叫做@babel/types的包，专门用来创建AST节点。使用@babel/types可以方便地创建各种类型的节点，避免手动构造复杂的JSON对象。

const t = require("@babel/types");

// 创建一个数字字面量节点
const numericLiteral = t.numericLiteral(10);

// 创建一个标识符节点
const identifier = t.identifier("x");

// 创建一个二元表达式节点
const binaryExpression = t.binaryExpression("+", identifier, numericLiteral);

// 创建一个变量声明节点
const variableDeclaration = t.variableDeclaration("const", [
  t.variableDeclarator(identifier, binaryExpression)
]);

六、实战：一个简单的代码转换

咱们来做一个简单的代码转换：将所有变量声明中的 const 替换成 var。

const parser = require("@babel/parser");
const traverse = require("@babel/traverse").default;
const generator = require("@babel/generator").default;

const code = `
  const a = 1;
  let b = 2;
  const c = 3;
`;

const ast = parser.parse(code, {
  sourceType: "module"
});

traverse(ast, {
  VariableDeclaration(path) {
    if (path.node.kind === "const") {
      path.node.kind = "var";
    }
  }
});

const newCode = generator(ast).code;
console.log(newCode);
// 输出：
// var a = 1;
// let b = 2;
// var c = 3;

七、总结

AST是代码转换的基石，掌握AST的生成、遍历和修改，你就能像魔法师一样操控代码。 Babel提供了一套完整的工具链，让你能够轻松地处理AST。

记住，学习AST不是一蹴而就的，需要不断地实践和探索。多写代码，多看文档，多尝试不同的代码转换，你就能逐渐掌握AST的奥秘。

一些Tips:

善用AST Explorer: https://astexplorer.net/ 这个网站可以让你在线查看代码对应的AST，方便你理解AST的结构。
阅读Babel插件源码: Babel的插件都是基于AST的，阅读它们的源码可以让你学习到很多实用的代码转换技巧。
多练习: 实践是最好的老师，多写代码，多尝试不同的代码转换，你就能逐渐掌握AST的奥秘。

好啦，今天的讲座就到这里。希望大家有所收获，早日成为代码转换大师！如果大家还有什么问题，欢迎随时提问。下次有机会，咱们再聊聊更高级的AST应用。拜了个拜！

发表回复 取消回复

发表回复取消回复