如何让Rollup输出触发INVALID_ANNOTATION警告的转换后代码？

方法1：用Rollup的generateBundle钩子精准输出目标文件 #

在你的Vite配置文件（vite.config.ts或vite.config.js）里，给Rollup加个自定义插件，直接抓取处理后的foo.tsx代码：

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    rollupOptions: {
      plugins: [
        {
          name: 'dump-transformed-code',
          async generateBundle() {
            // 定位到目标模块
            const targetModuleId = Array.from(this.getModuleIds()).find(id => id.includes('src/foo.tsx'));
            if (targetModuleId) {
              const moduleInfo = this.getModuleInfo(targetModuleId);
              if (moduleInfo?.code) {
                // 打印到控制台，或者写入文件
                console.log('=== 处理后的foo.tsx代码 ===\n', moduleInfo.code);
                // 写入文件的话，先引入fs模块，再执行下面的代码
                // import fs from 'node:fs';
                // fs.writeFileSync('./transformed-foo.tsx', moduleInfo.code);
              }
            }
          }
        }
      ],
      // 保留你之前的警告转错误逻辑
      onLog(level, log, handler) {
        if (log.code === 'INVALID_ANNOTATION') {
          throw new Error(log.message);
        }
        handler(level, log);
      }
    }
  }
})

这个钩子会在Rollup完成所有代码转换（包括Babel）后触发，直接拿到最终处理后的代码，精准定位目标文件。

方法2：临时关闭压缩，直接看dist产物 #

Vite生产构建默认会压缩代码，临时关掉压缩后，dist里的文件就是未压缩的处理后代码：

1. 修改Vite配置：

export default defineConfig({
  build: {
    minify: false, // 关闭压缩
    rollupOptions: {
      // 保留你的onLog配置
    }
  }
})

2. 执行npm run build，然后去dist目录找对应chunk文件，直接查看内容。缺点是需要自己找代码位置，不如钩子精准。

方法3：用transform钩子在转换阶段打印 #

如果想在Babel刚处理完就看代码，加个transform钩子：

plugins: [
  {
    name: 'log-transform-step',
    transform(code, id) {
      if (id.includes('src/foo.tsx')) {
        console.log('=== Babel处理后的foo.tsx代码 ===\n', code);
      }
      return code;
    }
  }
]

注意这个钩子会在每个转换插件处理后都触发，要是有其他转换插件，可能需要调整插件顺序确保拿到的是Babel处理后的结果。

内容的提问来源于stack exchange，提问作者Aron Griffis