100

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

4

3 回答 3

121

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

这与一些缩小器和其他编译为 JS 的语言（如CoffeeScript）生成的源映射格式相同。

于 2013-07-05T17:07:06.617 回答
21

源映射基本上就是它所说的，从一种语言到另一种语言的映射，因此调试器可以运行 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/en/tutorials/developertools/sourcemaps/

于 2017-07-11T03:59:39.890 回答
18

.mapTypescript 中最常见的文件有两种类型。一个是 Source Map ( .js.map)，另一个是 Declaration 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指定它来启用源映射，如下所示：compilerOptionstsconfig.json

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

源地图的安全说明：

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

声明地图：.d.ts.map

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

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

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

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

就是这样！希望有帮助。

于 2020-07-28T11:57:36.800 回答