TypeScript .map

使用TypeScript编写的Node.js应用中，编写的TypeScript会编译成JavaScript，在前端HTML引用的是是经过编译的JavaScript代码，当前端JavaScript报错时实际上与开发源码的TypeScript对应不上，此时应该如何调试呢？

• 前端开发中压缩JS、CSS以减少体积加快网页显示，但带来的后果是若出现错误则无法在源TypeScript文件中定位错误。
• 对于Node.js而言服务端的Source Map最大的价值在于错误信息有正确的错误堆栈，只要能实现自定义错误堆栈信息即可。

Source Map

• .map文件是Source Map源映射文件，它允许编译生成的JavaScript代码和创建它的TypeScript源文件之间进行映射。

Source Map是一个独立的.map文件，采用JSON格式，会分别记录编译前后文件的变化信息。通常会与源码在同一目录下。调试器可以使用Source Map文件来调试TypeScript文件，而非JavaScript文件。

Source Map是一个文件，文件内容保存着转换代码的代码位置和转换前的代码位置的映射信息，当程序报错时可通过它找到开发态代码的位置。因此浏览器通过Source Map使用可以很好地解决源码和编译运行时代码差异的问题。

应用场景

• 压缩代码减小体积
• 多文件合并以减少HTTP请求次数，仅用于前端。
• 将其他语言编译为JavaScript

生成映射

TypeScript编译时可附带--sourcemap参数生成.map文件

$ tsc --sourcemap index.ts

使用映射

Chrome浏览器的Developer Tools开发者工具的Setting设置中，确认选中了Enable source maps。

Chrome

编译后的JavaScript代码中确保存在：

//# sourceMappingURL=index.js.map

然后可以像调试JavaScript代码一样调试TypeScript代码