AST是JavaScript代码的树状表示，用于分析和转换代码。通过Babel等工具解析代码生成AST，可遍历修改节点实现语法转换、重构或静态检查，再生成新代码。例如将const转为let，核心在于操作AST节点的type和属性，最终输出修改后的代码字符串。
JavaScript AST（抽象语法树）是代码在解析过程中的树状表示形式，它把源码转换成由节点组成的结构，便于分析、转换和操作。通过操作AST，可以实现代码压缩、语法转换（如Babel）、静态检查（如ESLint）、代码生成等高级功能。
什么是AST？
当你写一段JavaScript代码，比如：
const a = 1;经过解析后，会生成类似如下的AST结构：
{ type: "Program", body: [ { type: "VariableDeclaration", declarations: [ { type: "VariableDeclarator", id: { type: "Identifier", name: "a" }, init: { type: "Literal", value: 1 } } ], kind: "const" } ] }每个节点代表代码中的一个语法结构，例如变量声明、表达式、函数等。type字段标识节点类型，其他字段描述其内容或子节点。
立即学习“Java免费学习笔记（深入）”；
常用工具库：Babel 和 Esprima
直接手动构建或解析AST很复杂，通常借助工具库来完成。
Babel Parser (基于@babel/parser)Babel提供了一个强大的解析器，能将JS代码转为AST：
const parser = require("@babel/parser"); const code = `const a = 1;`; const ast = parser.parse(code); console.log(ast);parse方法返回标准的Babel AST结构，兼容ESTree规范。
有了AST后，可以用traverse进行遍历：
const traverse = require("@babel/traverse").default; traverse(ast, { VariableDeclarator(path) { if (path.node.id.name === "a") { path.node.init = { type: "NumericLiteral", value: 2 }; } } });上面代码将变量a的值从1改为2。path对象提供了当前节点的操作能力，包括替换、删除、插入等。
生成代码：@babel/generator修改完AST后，使用generator将AST重新转回代码字符串：
const generate = require("@babel/generator").default; const output = generate(ast).code; console.log(output); // 输出: const a = 2;实际应用场景
AST操作常见于以下场景：
- 代码转换：将ES6+语法降级为ES5，如Babel所做的事。
- 宏系统或DSL：在代码中嵌入特定标记，通过AST提取并替换为实际逻辑。
- 自动化重构：批量重命名变量、修改函数调用方式等。
- 静态分析：检测未使用变量、潜在错误等，ESLint核心机制。
- 代码生成：根据配置自动生成重复代码，提升开发效率。
简单示例：将所有const替换为let
const parser = require("@babel/parser"); const traverse = require("@babel/traverse").default; const generate = require("@babel/generator").default; const code = ` const a = 1; const b = 2; `; const ast = parser.parse(code); traverse(ast, { VariableDeclaration(path) { if (path.node.kind === "const") { path.node.kind = "let"; } } }); const result = generate(ast).code; console.log(result); // 输出: // let a = 1; // let b = 2;这个例子展示了如何通过识别节点类型并修改属性，实现语法级别的批量变更。
基本上就这些。掌握AST操作，等于掌握了“操控代码的代码”，是构建前端工具链的关键技能。不复杂但容易忽略细节，建议多动手调试AST结构来加深理解。
