Recast与Babel配合生成代码时注释丢失及括号问题求助

问题背景 #

使用Babel解析生成AST后，用Recast生成代码会丢失所有注释；直接用babel-generate则出现括号丢失的情况，因已知Babel存在括号移除的问题而选择Recast，寻求兼容Babel的解决方案。

解决方案一：修复babel-generate的括号丢失问题（推荐） #

无需切换到Recast，通过配置@babel/generator的retainParens选项即可强制保留括号，同时原生支持保留Babel解析出的注释。

示例代码：

import generate from '@babel/generator';

// 生成代码时添加retainParens配置
const result = generate(ast, {
  retainParens: true, // 强制保留所有原始括号，解决丢失问题
  tabWidth: 2,
  quotes: 'single',
  retainLines: true // 可选：保留原代码的行结构，提升注释位置准确性
}, originalCode); // 传入原始代码有助于更精准生成注释与格式

const generatedCode = result.code;

该配置对应你提到的Babel问题，retainParens会禁用Babel默认的括号优化逻辑，确保所有必要括号被保留。

解决方案二：让Recast保留Babel解析的注释 #

若必须使用Recast，需手动将Babel AST中的注释转换为Recast兼容的格式，并附着到对应AST节点上：

示例代码：

import recast from 'recast';

// 转换Babel注释为Recast格式
const recastComments = ast.comments.map(comment => {
  return recast.types.builders.comment(
    comment.type === 'CommentLine' ? 'Line' : 'Block',
    comment.value,
    comment.start,
    comment.end
  );
});

// 将注释附加到program节点（或对应目标节点）
ast.program.comments = recastComments;

// 调用recast.print时开启注释保留
const generatedResult = recast.print(ast, {
  tabWidth: 2,
  quote: 'single',
  comments: true // 启用注释输出
});

const generatedCode = generatedResult.code;

原理：Recast默认不会读取Babel AST根节点（File）下的comments数组，需手动将注释转换为Recast格式并关联到具体节点（如program或注释对应的代码节点）。

内容的提问来源于stack exchange，提问作者Deep Shah