什么是TypeScript Map文件？

Question

我见过.mapTypeScript的文件.我想知道的是这些文件的用途.它们是否包含对.ts文件中引用的其他文件的引用？

Answer 1

.map文件是源映射文件,它允许工具在发出的JavaScript代码和创建它的TypeScript源文件之间进行映射.许多调试器(例如Visual Studio或Chrome的开发工具)都可以使用这些文件,因此您可以调试TypeScript文件而不是JavaScript文件.

这是由一些minifiers和其他编译到JS语言(如CoffeeScript)生成的相同源映射格式.

Answer 2

源映射基本上就是它所说的，是一种语言到另一种语言的映射，因此调试器可以运行JavaScript代码，但向您显示实际生成它的行。

出于实际调试目的：

源映射允许您执行的操作是在TypeScript文件上设置一个断点，然后调试代码。这可以在Chrome和Firefox中完成。令人困惑的是，Chrome中的调试器行为是：达到断点时，实际上会显示“ .js”文件（在断点处停止）。

从今天开始，Firefox调试器将在中断时显示实际的TypeScript文件。请参阅以下参考：

http://www.gamefromscratch.com/post/2014/05/27/TypeScript-debugging-in-Visual-Studio-with-IE-Chrome-and-Firefox-using-Source-Maps.aspx）

（这也显示了如何配置Visual Studio以创建源映射）

要了解源地图的工作原理，您可以在此处阅读“源地图的解剖”部分：

https://www.html5rocks.com/zh-CN/tutorials/developertools/sourcemaps/

Answer 3

.mapTypescript 中有两种最常见的文件类型。一个是源映射（.js.map），另一个是声明映射（.d.ts.map）。我将一一详细解释。

源地图： .js.map

源映射 ( .js.map) 文件包含映射定义，这些映射定义将生成的每段 Javascript 代码链接回相应 Typescript 文件的特定行和列。这些文件中的映射定义采用 JSON 格式。

启用源映射后，在调试时，Visual Studio Code 和 Chrome DevTools 将显示您的 Typescript 代码，而不是生成的复杂 Javascript 代码。

为什么要使用源映射？

例如，在生产应用程序中，我们使用 Rollup 之类的构建工具来删除死代码，使用 Prepack 消除代码并将其替换为可以在编译时而不是运行时进行评估的计算，然后使用 Uglify 缩小代码。更不用说已经转译的 Javascript 代码的复杂性了。因此，生成的代码可能与您实际编写的代码大不相同。因此建议使用源映射，它使调试变得非常容易，因为您可以逐步完成原始源代码。

进程监控、错误监控、日志记录和堆栈跟踪工具（如 Sentry、Bugsnag、PM2、Winston）也使用源映射将 Javascript 异常堆栈跟踪中的行和列映射回 Typescript。

如何使用源映射？

您可以通过--sourceMap在编译时使用选项或compilerOptions在tsconfig.json项目文件中指定它来启用源映射，如下所示：

{
  "compilerOptions": {
    ...
    "sourceMap": true,
    "outDir": "./out"
  }
}

源映射的安全说明：

如果您想通过混淆浏览器代码来实现一定的安全性，您可能希望从生产应用程序的浏览器代码中排除源地图。

声明地图： .d.ts.map

声明映射 ( .d.ts.map) 文件也称为声明源映射，包含将.d.ts文件中生成的每个类型声明链接回原始源文件 ( .ts) 的映射定义。这些文件中的映射定义采用 JSON 格式。

这有助于代码导航。当您使用项目引用将大项目拆分为多个小项目时，您将能够使用“转到定义”和重命名等编辑器功能来透明地导航和编辑子项目中的代码。

要启用声明映射，请在tsconfig.json项目文件中指定以下两个选项：

{
  "compilerOptions": {
    ...
    "declaration": true,
    "declarationMap": true
  }
}

就是这样！希望有帮助。