如何在Rollup的renderChunk钩子中用MagicString生成有效Sourcemap

核心问题分析 #

你遇到的空sourcemap问题，本质是没有将MagicString的代码修改和Rollup此前生成的原始sourcemap关联起来。默认调用generateMap()时，如果不传入原始sourcemap，无法继承之前的映射关系，导致输出空的sourcemap；而hires:true会强制生成基于当前代码的高分辨率映射，所以能输出内容，但这不是和原始构建流程合并后的正确映射。

正确实现方式 #

要生成能和Rollup已有sourcemap合并的结果，需要在MagicString中关联原始sourcemap，并正确配置generateMap的参数：

{
  name: 'postprocessing',
  renderChunk(code, chunk, opts) {
    // 初始化MagicString时关联原始sourcemap
    const s = new MagicString(code, {
      sourcemap: chunk.map // 传入Rollup之前生成的sourcemap
    });

    // 执行你的代码替换操作
    s.replace(...);

    // 生成合并后的sourcemap
    return {
      code: s.toString(),
      map: s.generateMap({
        file: chunk.fileName, // 指定输出文件名
        source: chunk.facadeModuleId, // 关联原始模块ID
        includeContent: true, // 嵌入源码内容，方便调试
        hires: false, // 使用默认低分辨率映射
        prev: chunk.map // 基于原始sourcemap生成新映射，实现合并
      })
    };
  }
}

关键参数说明 #

• sourcemap: chunk.map：让MagicString在初始化时绑定原始sourcemap，后续的代码修改会基于原始映射记录位置变更。
• prev: chunk.map：告诉generateMap基于原始sourcemap生成新映射，完成新旧sourcemap的合并。
• file和source：确保sourcemap能正确关联输出文件和原始模块，避免sources字段为空。
• includeContent：将原始源码内容嵌入sourcemap，调试时无需额外加载原始文件。

为什么hires:false会输出空sourcemap？ #

当hires:false时，MagicString会尝试生成行级别的低分辨率映射，但如果没有关联原始sourcemap，它没有可参考的原始行信息，因此无法生成有效映射，最终输出空的sourcemap。而hires:true会生成字符级别的高分辨率映射，它直接基于当前修改后的代码记录位置，不需要依赖原始sourcemap，所以能输出内容，但这不是和Rollup构建流程合并后的正确映射。

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