Javascript的.map文件 – JavaScript源地图

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

• 这是为了什么？ 为什么Angular关心的人要提供一个.js.map文件？
• 我如何（作为一个JavaScript开发人员）使用angular.min.js.map文件？
• 我应该关心为我的JavaScript应用程序创build.js.map文件吗？
• 它是如何创build的？ 我看了一下angular.min.js.map ，里面填充了奇怪格式的string，所以我认为它不是手动创build的。

Answer 1

.map文件适用于已被缩小的js和css文件。 他们被称为SourceMaps。 当你缩小一个文件，比如angular.js文件，它需要数千行漂亮的代码，并把它变成几行丑陋的代码。 希望在将代码发送到生产环境时，您使用的是缩小的代码，而不是完整的，未改变的版本。 当你的应用程序在生产中，并有一个错误，源代码将帮助你拿起你丑陋的文件，并将允许您看到代码的原始版本。 如果你没有源代码，那么任何错误最多都会显得模糊。

相同的CSS文件。 一旦你把SASS或LESS文件编译成CSS，它看起来不像原来的forms。 如果启用源代码，则可以看到文件的原始状态，而不是修改的状态。

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

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

我希望这是有道理的。

Answer 2

只想把重点放在问题的最后部分， 源地图文件是如何创build的？ 通过列出我知道可以创build源地图的构build工具。

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

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

Answer 3

• 开发人员如何使用它？ 我没有在评论中find这个答案，这里是如何使用：

  1. 不要链接你的js.map文件在你的index.html文件中（不需要这个）
  2. Minifiacation工具（好的）为.min.js文件添加注释：//＃sourceMappingURL = yourFileName.min.js.map， 它将连接你的.map文件

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

3. Chrome浏览器：打开开发工具，导航到“来源”标签，你会看到'源'文件夹，其中unminifide应用程序文件保存

Answer 4

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

Answer 5

只是添加到如何使用地图文件。 我使用chrome的Ubuntu的，如果我去源和点击一个文件，如果有一个地图文件的消息出现告诉我，我可以查看原始文件，以及如何做到这一点。

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

Ctrl-P和一个原始文件列表出现在一个小窗口。

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