JavaScript中Babel怎么使用@babel/generator将修改后的AST重新生成可执行代码-js教程-PHP中文网

@babel/generator 的作用是将修改后的 ast 转换为格式友好的 javascript 字符串，支持 source map、注释保留、jsx 和 typescript（≥7.20），需配合 @babel/parser 解析和 @babel/traverse 修改 ast。

javascript中babel怎么使用@babel/generator将修改后的ast重新生成可执行代码

@babel/generator 的作用是把修改后的 AST（抽象语法树）转回标准 JavaScript 代码，它是 Babel 工具链中“生成”阶段的核心包。它不负责解析或转换逻辑，只做“AST → 字符串”的映射，且默认输出格式友好、带缩进和换行，适合调试或写入文件。

先安装依赖：

npm install @babel/generator @babel/types @babel/parser

然后用 @babel/parser 解析源码得到 AST，用 @babel/types 或手动方式修改节点，最后交由 @babel/generator 输出代码：

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

调用 generate(ast, options?, code?)，返回含 code（字符串）、map（source map）、rawMappings 等字段的对象
options 可控制缩进、是否压缩、是否保留注释等，常用：{ retainLines: true, compact: false, jsescOption: { minimal: true } }
传入原始 code（可选）有助于 source map 生成，尤其当 AST 被修改后仍需精准定位时

默认情况下，@babel/generator 会丢弃注释。如需保留，解析时要开启 tokens: true 并在生成时启用 comments: true：

解析：用 parser.parse(code, { tokens: true })，确保注释被挂载到 AST 节点的 leadingComments/trailingComments 上
生成：generate(ast, { comments: true, retainLines: true }) —— 否则注释不会输出
若修改了节点但没同步更新 loc（位置信息），生成的代码可能错位；建议避免手动改 loc，优先用 @babel/types 创建新节点

单独操作 AST 节点容易出错，推荐用 @babel/traverse 遍历并替换：

@babel/generator 默认支持 JSX（只要 parser 解析时启用了 plugins: ['jsx']），但对 TypeScript 类型语法需额外配置：

TypeScript：解析时加 plugins: ['typescript']，生成时无需额外插件，但类型节点（如 TSTypeAnnotation）会被跳过——除非你明确保留它们并确保 generator 版本 ≥7.20（支持部分 TS 节点输出）
JSX：确保 parser 和 generator 使用一致的 JSX 配置（如 pragma、throwIfNamespace），否则生成的 React.createElement 调用可能不符合预期
如果生成结果里出现 undefined 或空语句，大概率是某个节点类型未被 generator 显式支持，可检查 AST 结构并降级为字符串拼接兜底

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南