Javascript .map文件 - javascript源地图

Question

最近我看到一些带有.js.map扩展名的文件附带了一些JavaScript库（例如Angular），这只是我脑子里提出的几个问题：

• 它的用途是什么？为什么Angular的人员会提供.js.map文件？
• 我（作为JavaScript开发人员）如何使用angular.min.js.map文件？
• 我应该关心为我的JavaScript应用程序创建.js.map个文件吗？
• 如何创建？我看了angular.min.js.map并且它充满了奇怪的格式化字符串，因此我认为它不是手动创建的。

Answer 1

.map个文件适用于已经缩小的js和css（以及现在ts}个文件。它们被称为SourceMaps。当你缩小文件时，比如angular.js文件，它需要数千行漂亮的代码，并将它变成只有几行丑陋的代码。希望当您将代码发送到生产环境时，您使用的是缩小代码而不是完整的未经编辑的版本。当您的应用程序投入生产并出现错误时，源映射将帮助您获取丑陋的文件，并允许您查看代码的原始版本。如果你没有源图，那么任何错误都会显得神秘莫测。

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

所以，按顺序回答你的问题：

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

我希望这是有道理的。

Answer 2

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

1. Grunt：使用插件grunt-contrib-uglify
2. Gulp：使用插件gulp-uglify
3. Google closure：使用参数--create_source_map

我不知道是否有其他工具可以创建源地图。

Answer 3

• 开发人员如何使用它？

我在评论中没有找到答案，这里是如何使用的：

1. 请勿在index.html文件中链接您的js.map文件（不需要）

2. Minifiacation工具（好的）为您的 .min.js 文件添加评论：

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

将连接您的 .map 文件。

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

1. Chrome：打开开发工具，导航至来源标签，您会看到来源文件夹，其中保留了未缩小的应用程序文件

Answer 4

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

Answer 5

只是添加如何使用地图文件。我使用chrome作为ubuntu，如果我去源并点击一个文件，如果有一个地图文件，就会出现一条消息，告诉我我可以查看原始文件以及如何操作。

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

  

控制-P   并在一个小窗口中显示原始文件列表。

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