Javascript .map文件-JavaScript源地图

最近，我看到.js.map一些JavaScript库（例如Angular）附带了具有扩展名的文件，这在我脑海中引发了几个问题：

• 这是为了什么 为什么Angular的员工会关心传递.js.map文件？
• 我（作为JavaScript开发人员）如何使用该angular.min.js.map文件？
• 我应该关心.js.map为JavaScript应用程序创建文件吗？
• 如何创建？我看了一下，angular.min.js.map里面充满了格式奇怪的字符串，所以我认为它不是手动创建的。

该.map文件是为js和css（现在ts也是如此）已经过压缩文件。它们被称为SourceMaps。当您缩小文件（例如angular.js文件）时，它将占用数千行漂亮的代码，并将其变成仅几行丑陋的代码。希望在将代码交付生产时，您使用的是最小化的代码，而不是完整的，未最小化的版本。当您的应用在生产中且出现错误时，源地图将帮助您获取丑陋的文件，并允许您查看代码的原始版本。如果您没有源地图，那么任何错误充其量似乎都是神秘的。

CSS文件也一样。一旦获取了SASS或LESS文件并将其编译为CSS，它看起来就不会像原始形式一样。如果启用源地图，则可以看到文件的原始状态，而不是修改后的状态。

因此，依次回答您的问题：

• 这是为了什么 取消引用丑陋的代码
• 开发人员如何使用它？您可以使用它来调试生产应用程序。在开发模式下，您可以使用完整版的Angular。在生产中，您将使用缩小版本。
• 我应该关心创建js.map文件吗？如果您希望能够更轻松地调试生产代码，那么可以，您应该这样做。
• 如何创建？它是在构建时创建的。有一些构建工具可以像其他文件一样为您构建.map文件。https://github.com/gruntjs/grunt-contrib-uglify/issues/71

我希望这是有道理的。

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

1. Grunt：使用插件grunt-contrib-uglify
2. Gulp：使用插件gulp-uglify
3. 谷歌关闭：使用参数--create_source_map

• 开发人员如何使用它？

我在评论中没有找到答案，这是可以使用的方法：

1. 不要将您的js.map文件链接到index.html文件中（不需要这样做）

2. 小型化工具（不错的工具）会在.min.js文件中添加注释：

   //＃sourceMappingURL = yourFileName.min.js.map

这将连接您的.map文件。

当min.js和js.map文件准备就绪时...

3. Chrome：打开dev-tools，导航到Sources选项卡，您将看到sources文件夹，其中保存了未缩小的应用程序文件。

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

只是增加了如何使用地图文件。我将chrome用于ubuntu，如果我去浏览源并单击一个文件，如果有地图文件，则会出现一条消息，告诉我可以查看原始文件以及如何执行此操作。

对于我今天使用的Angular文件，单击

Ctrl-P和原始文件列表在一个小窗口中显示。

然后，我可以浏览列表以查看我要检查的文件，并检查问题所在。