TypeScript 可以将 TypeScript 代码编译为 JavaScript 代码，并且还生成对应的 .map 文件，用于在浏览器调试时方便我们查看 TypeScript 代码而不是编译后的 JavaScript 代码。但是，在开发过程中，我们需要考虑如何处理这些 .map 文件，以免产生问题。
什么是 .map 文件？
.map 文件是生成的一个辅助映射文件，可以把编译后的 JavaScript 代码映射回原始的 TypeScript 代码，这样在调试时可以直接查看 TypeScript 源码而不必去查看编译后的 JavaScript 代码。
为什么需要处理 .map 文件？
在将 TypeScript 代码编译为 JavaScript 代码时，TypeScript 默认会生成与每个 JavaScript 文件对应的 .map 文件。这个文件会放在同一目录下，并且文件名与 JavaScript 文件名相同，只是后缀名为 .map。
在某些情况下， .map 文件可能会泄露项目的一些敏感信息，例如模块路径、文件路径等，这些信息可能会被恶意的攻击者用于攻击您的应用程序。
此外，如果您的项目采用了某些代码压缩工具，例如 UglifyJS 或 Closure Compiler，并且未正确处理 .map 文件，则可能会导致错误的行号和列号，使得调试变得困难。
如何处理 .map 文件？
1. 在 tsconfig.json 文件内禁用生成 .map 文件
打开您项目下的 tsconfig.json 文件，在 "compilerOptions" 键下添加 "sourceMap": false 参数。
-
------------------ -
------------ -----
-
-这样 TypeScript 就不会再生成 .map 文件了。
2. 启用后端服务器来处理 .map 文件
将 .map 文件部署到服务器端，通过服务器端脚本或插件，以更安全的方式使用 .map 文件。
例如，如果您正在使用 Node.js 进行服务器开发，您可以使用 sourcemaps.io 将 .map 文件部署到您的服务器上，并使用 source map support 库来处理 .map 文件。
----------------------------------------
这将会自动注册一个全局的异常处理程序，来解析 .map 文件并将错误信息映射回原始的 TypeScript 代码。
3. 手动处理 .map 文件
如果您不想禁用生成 .map 文件，也不想部署到服务器上处理。您可以手动删除或者忽略这些文件。
例如，如果您使用 gulp 和 del 进行构建系统，则可以使用以下代码删除 .map 文件：
----- --- - --------------- ------------------------
结论
处理 TypeScript 生成的 .map 文件可以提高应用程序的安全性，避免代码被恶意攻击者利用，同时还能提高构建系统的效率。
在实际项目中，选择适当的方式来处理 .map 文件是非常重要的。我希望这篇文章能为您提供一些有用的指导。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6713aa1fad1e889fe20f2427