多代码转换（TypeScript、Hermes等）下Source Map生成及溯源技术咨询

1. 多轮转换的Source Map生成机制及准确性保障 #

每一次代码转换生成的Source Map，本质是当前转换输出文件到输入文件的行/列位置映射，所有主流工具都遵循W3C制定的Source Map标准规范。要确保TypeScript编译、Hermes转换、混淆等各阶段的映射准确，核心要遵循「传递式关联」的流程：

• TypeScript编译：开启tsconfig.json中的sourceMap选项，TSC会生成编译后JS到原始TS的Source Map，并在输出JS末尾添加//# sourceMappingURL=xxx.map注释，关联对应Map文件。
• Hermes字节码转换：启动时添加--source-map参数，让Hermes读取上一步的JS文件及其Source Map，生成的字节码对应的Source Map会直接关联原始TS文件，而非中间JS。
• 混淆/压缩：以Terser为例，配置sourceMap: { content: 上游Source Map内容, url: '最终map文件名' }，工具会基于上游映射关系，生成混淆后JS到原始TS的关联映射，而非仅指向中间产物。

只要每一步转换都传入上游的Source Map并启用自身的Map输出配置，就能保证各阶段映射的准确性。

2. 回溯至原始TypeScript代码的实现方式 #

可以通过链式关联或合并Source Map两种方式实现：

链式关联（调试器自动处理） #

只要每一步转换后的输出文件都通过sourceMappingURL正确关联对应的Map文件，且每个Map文件的sources字段包含上游源文件（或上游Map的引用），Chrome DevTools、Hermes Debugger等调试工具会自动链式解析所有映射关系，直接定位到原始TS代码。
比如最终bundle.js末尾的//# sourceMappingURL=bundle.map，bundle.map的sources指向混淆后的JS文件，该JS文件又关联Hermes转换后的Map，以此类推直到原始TS文件，调试器会自动完成全链路解析。

合并Source Map（生成直接映射） #

若需要生成一个直接从最终bundle到原始TS的单一Source Map，可使用source-map工具库手动合并：

1. 从最后一层转换的Source Map开始，用SourceMapConsumer读取其内容。
2. 逆序读取每一层上游的Source Map，通过applySourceMap方法串联映射关系。
3. 用SourceMapGenerator生成合并后的Map文件，该文件直接对应原始TS代码。

示例代码（Node.js环境）：

const { SourceMapConsumer, SourceMapGenerator } = require('source-map');

async function mergeSourceMaps(finalMapPath, ...upstreamMapPaths) {
  let currentConsumer = await new SourceMapConsumer(require(finalMapPath));
  let generator = SourceMapGenerator.fromSourceMap(currentConsumer);

  // 逆序处理上游Map，从靠近原始代码的层开始合并
  for (const mapPath of upstreamMapPaths.reverse()) {
    const upstreamConsumer = await new SourceMapConsumer(require(mapPath));
    generator.applySourceMap(upstreamConsumer);
  }

  return generator.toJSON();
}

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