Typescript 什么是类型脚本映射文件？

我看到了TypeScript的

.map

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

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

这与一些小型浏览器和其他编译为JS语言（如）生成的源代码映射格式相同

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

出于实际调试目的：

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

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

)

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

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

---

有两种类型的

.map

文件在Typescript中最常见。一个是源映射（

.js.Map

），另一个是声明映射（

.d.ts.Map

）。我会逐一详细解释

---

源地图：

.js.map

源映射（

.js.map

）文件包含映射定义，这些定义将生成的每段Javascript代码链接回相应Typescript文件的特定行和列。这些文件中的映射定义是JSON格式的

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

为什么使用源地图？

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

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

如何使用源地图？

您可以在编译时使用

--sourceMap

选项启用源映射，也可以在项目的

tsconfig.json

文件的

compilerOptions

中指定源映射，如下所示：

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

源地图的安全注意事项：

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

---

声明映射：

.d.ts.map

声明映射（

.d.ts.map

）文件也称为声明源映射，包含将

.d.ts

文件中生成的每个类型声明链接回原始源文件（

.ts

）的映射定义。这些文件中的映射定义是JSON格式的

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

要启用声明映射，请在项目的

tsconfig.json

文件中指定以下两个选项：

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

---

---

就这样！希望有帮助。

在网站中包含

.map

文件的正确方式是什么？令人印象深刻的答案-清晰简洁。