如何使用 JavaScript 源映射（.map 文件）？

.map 文件用于已缩小的 JavaScript 和 CSS（现在也包括 TypeScript）文件。它们被称为 source maps。当你缩小一个文件时，比如 angular.js 文件，它需要数千行漂亮的代码，然后把它变成只有几行丑陋的代码。希望当您将代码交付到生产环境时，您使用的是缩小后的代码，而不是完整的、未缩小的版本。当您的应用程序在生产中并且出现错误时，源映射将帮助您获取丑陋的文件，并允许您查看代码的原始版本。如果您没有源映射，那么任何错误充其量都显得晦涩难懂。

CSS 文件也一样。获取 Sass 或 Less 文件并将其编译为 CSS 后，它看起来与原始形式完全不同。如果启用源映射，那么您可以看到文件的原始状态，而不是修改后的状态。

因此，按顺序回答您的问题：

它是干什么用的？取消引用丑陋的代码

开发人员如何使用它？您可以使用它来调试生产应用程序。在开发模式下，您可以使用完整版的 Angular。在生产中，您将使用缩小版。

我应该关心创建一个 js.map 文件吗？如果您关心能够更轻松地调试生产代码，那么是的，您应该这样做。

它是如何创建的？它是在构建时创建的。有一些构建工具可以像构建其他文件一样为您构建 .map 文件。如果输出文件不在项目根目录中，则 Sourcemaps 失败 #71

我希望这是有道理的。

---

开发人员如何使用它？

不要在 index.html 文件中链接 js.map 文件（不需要） 缩小工具（好的工具）在 .min.js 文件中添加注释：//# sourceMappingURL=yourFileName.min.js.map这将连接您的 .map 文件。当 min.js 和 js.map 文件准备好时... Chrome：打开开发工具，导航到 Sources 选项卡。您将看到源文件夹，其中保存了未缩小的应用程序文件。

---

我只想关注问题的最后一部分；如何创建源映射文件？通过列出我知道的可以创建源映射的构建工具。

Grunt：使用插件 grunt-contrib-uglify Gulp：使用插件 gulp-uglify Google 闭包：使用参数 --create_source_map

---

映射文件将未缩小的文件映射到缩小的文件。如果您在未缩小的文件中进行更改，更改将自动反映到文件的缩小版本。

---

只是为了添加如何使用地图文件：我在 Ubuntu 上使用 Google Chrome，如果我去源并单击一个文件，如果有地图文件，则会出现一条消息，告诉我我可以查看原始文件以及如何查看做。

对于我今天使用的 Angular 文件，我单击 Ctrl + P，原始文件列表会出现在一个小窗口中。

然后我可以浏览列表以查看我想要检查的文件并检查问题可能出在哪里。

---