AST是JavaScript代码解析后的抽象语法树,由标准化节点对象构成;直接操作字符串易破坏语法结构,而AST操作能确保语法合法、结构可控。

AST 是什么,为什么不能直接操作字符串
JavaScript 代码在执行前会被解析成一棵树形结构,叫 AST(Abstract Syntax Tree)。它不是字符串、不是正则能安全处理的对象,而是由 estree 规范定义的标准化节点对象集合。比如 const a = 1 + 2 解析后会生成 VariableDeclaration、BinaryExpression 等节点,每个节点带 type、loc、arguments 等字段。
直接用 replace() 或正则改代码,极易破坏括号配对、注释位置、空格语义,尤其在压缩或有 JSX/TypeScript 的场景下几乎必然出错。AST 操作是唯一能保证语法合法、结构可控的修改方式。
用 @babel/parser 解析出 AST 树
@babel/parser 是目前最常用、兼容性最好的 JS AST 解析器,支持 ES2023、JSX、Flow、TypeScript(需开启对应选项)。
关键点:
立即学习“Java免费学习笔记(深入)”;
- 必须显式传入
sourceType: 'module'才能正确解析import/export - JSX 需要
plugins: ['jsx'];TS 需要plugins: ['typescript'],且allowDeclareFields: true等细节会影响节点结构 - 返回的是纯 JS 对象,不是 Babel 内部的
NodePath,不带遍历能力
const parser = require('@babel/parser');
const code = `function foo() { return 42; }`;
const ast = parser.parse(code, {
sourceType: 'module',
plugins: ['jsx']
});
console.log(ast.program.body[0].type); // 'FunctionDeclaration'
用 @babel/traverse 修改 AST 节点
@babel/traverse 提供基于访问者模式(Visitor Pattern)的安全遍历和替换能力。它不直接操作原始 AST 对象,而是通过 path.replaceWith()、path.remove()、path.insertBefore() 等方法保持节点关系完整。
常见误操作:
- 直接赋值
node.name = 'bar'—— 可能漏掉 parent、scope 更新,后续生成代码出错 - 在 visitor 里递归调用
traverse()—— 容易栈溢出,应优先用嵌套 visitor 或path.traverse() - 用
path.node创建新节点时没用@babel/types工厂函数 —— 手动构造对象缺少必要字段,Babel 后续处理会 crash
const traverse = require('@babel/traverse').default;
const t = require('@babel/types');
traverse(ast, {
Identifier(path) {
if (path.node.name === 'foo') {
path.replaceWith(t.identifier('bar'));
}
}
});
用 @babel/generator 把 AST 写回代码
@babel/generator 负责把修改后的 AST 转成字符串。它默认保留原始缩进和换行(如果原 AST 有 loc),但不会保留注释——除非你手动启用 retainLines: true 和 comments: true,并确保解析时也开启了注释收集(tokens: true 不够,得用 onComment 回调)。
注意:generator 不做语法校验,如果 AST 结构非法(比如 BinaryExpression 缺少 left),它会静默输出错误代码或抛出难以定位的异常。
const generate = require('@babel/generator').default;
const output = generate(ast, {
retainLines: true,
comments: true
});
console.log(output.code); // 修改后的源码字符串
真正难的从来不是“怎么走通流程”,而是判断该在哪个节点类型里动手、如何安全地构造新节点、以及怎么让修改不破坏 sourcemap 或已有注释。这些细节没有通用解法,只能靠反复打印 path.node 和查 estree spec。










