TypeScript 4.7编译后借助Sourcemap反编译代码的可行方案咨询

错误原因分析 #

提示“Not all sources were included in the sourcemap”通常有两个核心原因：

• 你的Sourcemap文件本身未包含所有原始TypeScript文件的映射信息，可能是编译配置缺失关键项导致
• 旧版reverse-sourcemap工具对TypeScript 4.7生成的Sourcemap格式支持不足

解决方案 #

1. 检查并修复TypeScript编译配置 #

确保tsconfig.json里的配置能生成包含完整源码的Sourcemap：

{
  "compilerOptions": {
    "sourceMap": true,              // 必须开启Sourcemap生成
    "inlineSources": true,          // 将原始TS源码直接嵌入到Sourcemap文件中
    "sourceRoot": "./src",          // 指定原始源码的根目录，帮助工具定位文件结构
    "target": "ESNext",
    "module": "ESNext"
  },
  "include": ["src/**/*"]           // 确保所有TS文件都被纳入编译范围
}

修改配置后重新编译项目，再尝试反编译操作。

2. 换用兼容新版TS的反编译工具 #

工具1：sourcemap-reverse

这是对新版Sourcemap支持更完善的工具，安装和使用步骤：

# 全局安装工具
npm install -g sourcemap-reverse

# 执行反编译，将恢复的源码输出到指定目录
sourcemap-reverse your-compiled-file.js.map output-directory

工具2：@jridgewell/trace-mapping（自定义脚本）

如果需要更灵活的控制，可以用这个底层库编写自定义提取脚本：

import { readFileSync, writeFileSync, mkdirSync } from 'fs';
import { resolve, dirname } from 'path';
import { TraceMap } from '@jridgewell/trace-mapping';

// 读取目标Sourcemap文件
const mapPath = resolve('./dist/your-compiled-file.js.map');
const mapContent = JSON.parse(readFileSync(mapPath, 'utf8'));
const traceMap = new TraceMap(mapContent);

// 遍历所有源文件并导出恢复的源码
traceMap.sources.forEach((sourcePath, index) => {
  const sourceContent = traceMap.sourceContent(index);
  if (!sourceContent) return;

  // 构建输出路径
  const outputFullPath = resolve('./recovered-sources', sourcePath);
  // 创建所需的目录结构
  mkdirSync(dirname(outputFullPath), { recursive: true });
  // 写入恢复的源码文件
  writeFileSync(outputFullPath, sourceContent);
});

安装依赖后执行脚本：

npm install @jridgewell/trace-mapping
ts-node recover-sources.ts

3. 验证Sourcemap完整性 #

如果上述方法仍失败，先通过浏览器开发者工具验证Sourcemap是否有效：

1. 在浏览器中打开加载了编译后JS的页面
2. 打开开发者工具的Sources面板，查看能否找到并正常显示原始TS文件
3. 若浏览器能正常映射，说明Sourcemap有效，问题出在工具兼容性；若浏览器也无法映射，需重新检查编译配置或确认所有源文件都被正确纳入编译。

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