🌐AST抽象语法树
HUA

AST 是前端开发中一个非常重要的概念，它就像是代码的“编译器”，能够帮助我们理解和操作代码。本文将深入探讨 AST 的原理和应用，带你从零开始了解 AST。

一、什么是 AST？

AST（抽象语法树）是一种树形结构，用于表示程序代码的语法结构。它将代码分解为一系列的节点，每个节点代表代码中的一个元素，如变量、函数、表达式等。AST 是编译器和解释器的基础，也是代码分析和转换的关键工具。

1. AST 的结构

AST 的结构通常包括以下几种类型的节点：

  • 程序节点：表示整个程序。
  • 函数节点：表示函数定义。
  • 变量节点：表示变量声明。
  • 表达式节点：表示各种表达式，如算术表达式、逻辑表达式等。
  • 语句节点：表示代码中的语句，如 if 语句、for 循环等。

2. AST 的生成

AST 的生成过程通常分为两个阶段：

  1. 词法分析：将代码字符串分解为一系列的标记（tokens）。
  2. 语法分析：将标记组合成树形结构，形成 AST。
 1const code = 'const a = 1 + 2;';
 2const tokens = esprima.tokenize(code); 
 3const ast = esprima.parseScript(code); 
 4console.log(ast);

二、AST 的应用

1. 代码分析

AST 可以用来分析代码的结构，提取变量、函数、依赖等信息。例如，Babel 使用 AST 来解析代码，提取出需要转译的部分。

 1const ast = esprima.parseScript('const a = 1 + 2;');
 2console.log(ast.body[0].declarations[0].init.type);

2. 代码转换

AST 可以用来转换代码，例如将 ES6 代码转换为 ES5 代码。Babel 就是通过操作 AST 来实现代码转换的。

 1const code = 'const a = 1 + 2;';
 2const ast = esprima.parseScript(code);
 3const transformedCode = escodegen.generate(ast); 
 4console.log(transformedCode);

3. 代码压缩

AST 可以用来压缩代码，例如通过移除注释、简化变量名等方式。Terser 就是通过操作 AST 来实现代码压缩的。

 1const code = 'const a = 1 + 2;';
 2const ast = esprima.parseScript(code);
 3const compressedCode = uglifyjs.minify(ast).code;
 4console.log(compressedCode);

4. 代码检查

AST 可以用来检查代码的语法错误、风格问题等。ESLint 就是通过操作 AST 来实现代码检查的。

 1const code = 'const a = 1 + 2;';
 2const ast = esprima.parseScript(code);
 3const errors = eslint.lintText(code);
 4console.log(errors);

三、AST 的工具

1. Esprima

Esprima 是一个流行的 JavaScript 解析器，可以将代码字符串解析为 AST。

 1const esprima = require('esprima');
 2const code = 'const a = 1 + 2;';
 3const ast = esprima.parseScript(code);
 4console.log(ast);

2. Escodegen

Escodegen 是一个代码生成器，可以将 AST 转换回代码字符串。

 1const escodegen = require('escodegen');
 2const ast = esprima.parseScript('const a = 1 + 2;');
 3const code = escodegen.generate(ast);
 4console.log(code);

3. Babel

Babel 是一个代码转译器，可以将 ES6+ 代码转换为 ES5 代码。Babel 内部使用 AST 来实现代码转换。

 1const babel = require('@babel/core');
 2const code = 'const a = 1 + 2;';
 3const result = babel.transform(code, { presets: ['@babel/preset-env'] });
 4console.log(result.code);

4. Terser

Terser 是一个代码压缩器，可以将代码压缩为更小的体积。Terser 内部使用 AST 来实现代码压缩。

 1const terser = require('terser');
 2const code = 'const a = 1 + 2;';
 3const result = terser.minify(code);
 4console.log(result.code);

四、AST 的实战案例

1. 自定义代码转换

假设我们需要将代码中的所有变量名替换为 _ 开头的变量名，可以使用 AST 来实现。

 1const esprima = require('esprima');
 2const escodegen = require('escodegen');
 3const estraverse = require('estraverse');
 4
 5const code = 'const a = 1 + 2;';
 6const ast = esprima.parseScript(code);
 7
 8estraverse.replace(ast, {
 9  enter(node) {
10    if (node.type === 'VariableDeclarator') {
11      node.id.name = `_${node.id.name}`;
12    }
13  },
14});
15
16const transformedCode = escodegen.generate(ast);
17console.log(transformedCode);

2. 自定义代码检查

假设我们需要检查代码中是否存在 console.log，可以使用 AST 来实现。

 1const esprima = require('esprima');
 2const estraverse = require('estraverse');
 3
 4const code = 'console.log("Hello, world!");';
 5const ast = esprima.parseScript(code);
 6
 7let hasConsoleLog = false;
 8estraverse.traverse(ast, {
 9  enter(node) {
10    if (node.type === 'CallExpression' && node.callee.name === 'console.log') {
11      hasConsoleLog = true;
12    }
13  },
14});
15
16console.log(hasConsoleLog);

五、总结

AST 是前端开发中一个非常重要的概念，它可以帮助我们理解和操作代码。通过 AST，我们可以实现代码分析、代码转换、代码压缩和代码检查等功能。希望本文能够帮助你更好地理解和使用 AST。

🏁 一句话总结

AST 是代码的“编译器”，能够帮助我们理解和操作代码，实现代码分析、转换、压缩和检查等功能。

个人笔记记录 2021 ~ 2025