AST是javaScript代码解析后的树形结构，每个节点代表语法单元，通过操作AST可实现代码转换、分析与生成；利用Babel生态中的@babel/parser、traverse、types和generator工具，能解析、遍历、修改并重新生成代码；例如将箭头函数转为普通函数或删除console.log调用，广泛应用于Babel、ESLint等工具中。
javascript的AST（抽象语法树）是代码解析后的树形结构表示，每个节点代表源代码中的一个语法结构。通过操作AST，可以实现代码分析、转换、优化甚至生成新代码。这类技术广泛应用于Babel、ESLint、Prettier等工具中。
什么是AST
当你写下一段JavaScript代码，比如：
经过解析后会生成一棵AST，结构大致如下：
- Program（根节点）
- └─ VariableDeclaration（变量声明）
- └─ VariableDeclarator
- ├─ id: Identifier（add）
- └─ init: ArrowfunctionExpression
- ├─ params: [Identifier(a), Identifier(b)]
- └─ body: BinaryExpression (+)
每一个节点都有类型（type）、位置信息和子节点。理解这些结构是操作AST的基础。
立即学习“Java免费学习笔记（深入）”；
常用工具库：Babel Parser 与 Babel Traversal
Babel 提供了一套完整的AST处理生态。核心工具包括：
- @babel/parser：将js代码转为AST
- @babel/traverse：遍历和修改AST节点
- @babel/generator：将修改后的AST还原为代码
- @babel/types：提供创建或判断节点类型的工具函数
示例：使用 @babel/parser 解析代码
const parser = require(‘@babel/parser’); const code = `const add = (a, b) => a + b;`; const ast = parser.parse(code);
然后用 @babel/traverse 遍历函数表达式：
const traverse = require(‘@babel/traverse’); traverse(ast, { ArrowFunctionExpression(path) { console.log(‘找到箭头函数:’, path.node.params.map(p => p.name)); } });
修改AST并生成新代码
在遍历时可以对AST进行修改，例如将所有箭头函数转为普通函数。
步骤如下：
- 识别 ArrowFunctionExpression 节点
- 构造新的 FunctionExpression 结构
- 替换原节点
示例代码：
const t = require(‘@babel/types’); const generate = require(‘@babel/generator’); traverse(ast, { ArrowFunctionExpression(path) { const { params, body } = path.node; // 构造新函数节点 const func = t.functionExpression( NULL, params, t.blockStatement([t.returnStatement(body)]) ); path.replaceWith(func); // 替换节点 } }); // 生成新代码 const output = generate(ast).code; console.log(output); // 输出: const add = function(a, b) { return a + b; };
实际应用场景
AST操作不只是理论，它在工程中有多种用途：
- 代码转换：如Babel将es6+转为ES5
- 静态分析：ESLint检查变量命名、未使用变量等
- 代码压缩：UglifyJS移除冗余逻辑
- DSL支持：自定义语法扩展JavaScript
- 自动化重构：批量重命名、迁移api调用
例如，你想把项目中所有的 console.log 删除，可以用AST遍历所有CallExpression，判断是否为 console.log 并移除语句。
traverse(ast, { CallExpression(path) { const { callee } = path.node; if ( t.isMemberExpression(callee) && t.isIdentifier(callee.Object, { name: ‘console’ }) ) { path.parentPath.remove(); // 删除整个语句 } } });
基本上就这些。掌握AST操作需要熟悉节点类型和路径机制，但一旦理解，就能实现强大的代码自动化能力。