Node.js中tsc与tsc-alias配合时Source Maps行号不准确的解决办法

tsc-alias确实可能导致这个问题。它在替换代码中的别名路径时，会直接修改TypeScript编译生成的JS文件，但默认情况下不会同步更新对应的source map文件。当JS文件的内容（比如导入语句的长度）发生变化后，原source map里记录的行号、列号就会和修改后的JS文件不匹配，最终导致映射偏差。

以下是具体的修复方案：

1. 启用tsc-alias的source map同步功能 #

tsc-alias本身提供了--sourceMap（简写-s）参数，用来在替换别名时同步更新source map文件。修改你的构建和监听命令：

• 构建命令：

  tsc && tsc-alias --sourceMap
  

• 监听命令：

  concurrently --kill-others "tsc -w" "tsc-alias -w --sourceMap"
  

2. 检查tsconfig配置的一致性 #

• 确认rootDir和outDir的对应关系完全匹配：你的rootDir设为make，outDir设为host，要确保编译后的文件结构和源码结构完全一致，避免source map的基础路径计算错误。
• 排查是否有其他工具在tsc-alias之后修改JS文件：比如代码格式化、压缩工具，这类操作会改变JS文件的行号、列号，导致source map失效。如果有，需要调整流程，让这些工具也同步更新source map，或者放在tsc-alias之前执行。

3. 替代方案（若上述方法无效） #

如果tsc-alias的source map功能无法解决问题，可以考虑更换构建工具：

• 使用esbuild：它原生支持路径别名，并且在编译时自动生成正确的source map，无需额外的别名替换步骤，构建速度也更快，适合大型项目。
• 使用webpack配合ts-loader：webpack会自动处理tsconfig.json中的paths别名，同时生成准确的source map，还能整合其他构建流程。

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