Javascript .map文件-JavaScript源地图

本文翻译自：Javascript .map files - javascript source maps

Recently I have seen files with .js.map extension shipped with some JavaScript libraries (like Angular ), and that just raised few questions in my head: 最近，我看到一些JavaScript库（例如Angular ）附带了带有.js.map扩展名的文件，这在我脑海中引发了几个问题：

• What is it for? 这是为了什么 Why do the guys at Angular care to deliver a .js.map file? 为什么Angular的.js.map关心提供.js.map文件？
• How can I (as a JavaScript developer) use the angular.min.js.map file? 我（作为JavaScript开发人员）如何使用angular.min.js.map文件？
• Should I care about creating .js.map files for my JavaScript applications? 我应该关心为我的JavaScript应用程序创建.js.map文件吗？
• How does it get created? 如何创建？ I took a look at angular.min.js.map and it was filled with strange-formatted strings so I assume it's not created manually. 我看了一下angular.min.js.map ，其中充满了格式奇怪的字符串，所以我认为它不是手动创建的。

---

#1楼

参考：https://stackoom.com/question/1T8FW/Javascript-map文件-JavaScript源地图

---

#2楼

The .map files are for js and css (and now ts too) files that have been minified. .map文件适用于已缩小的js和css （现在也适用于ts ）文件。 They are called SourceMaps. 它们被称为SourceMaps。 When you minify a file, like the angular.js file, it takes thousands of lines of pretty code and turns it into only a few lines of ugly code. 当您缩小文件（例如angular.js文件）时，它将占用数千行漂亮的代码，并将其变成仅几行丑陋的代码。 Hopefully, when you are shipping your code to production, you are using the minified code instead of the full, unminified version. 希望在将代码交付生产时，您使用的是最小化的代码，而不是完整的，未最小化的版本。 When your app is in production, and has an error, the sourcemap will help take your ugly file, and will allow you to see the original version of the code. 当您的应用在生产中并且出现错误时，源映射将帮助您获取丑陋的文件，并允许您查看代码的原始版本。 If you didn't have the sourcemap, then any error would seem cryptic at best. 如果您没有源地图，那么任何错误充其量似乎都是神秘的。

Same for CSS files. CSS文件也一样。 Once you take a SASS or LESS file and compile it to CSS, it looks nothing like it's original form. 一旦获取了SASS或LESS文件并将其编译为CSS，它看起来就不会像原始形式一样。 If you enable sourcemaps, then you can see the original state of the file, instead of the modified state. 如果启用了源贴图，则可以看到文件的原始状态，而不是修改后的状态。

So, to answer you questions in order: 因此，依次回答您的问题：

• What is it for? 这是为了什么 To de-reference uglified code 取消引用丑陋的代码
• How can a developer use it? 开发人员如何使用它？ You use it for debugging a production app. 您可以使用它来调试生产应用程序。 In development mode you can use the full version of Angular. 在开发模式下，您可以使用完整版的Angular。 In production, you would use the minified version. 在生产中，您将使用缩小版本。
• Should I care about creating a js.map file? 我应该关心创建js.map文件吗？ If you care about being able to debug production code easier, then yes, you should do it. 如果您希望能够更轻松地调试生产代码，那么可以，您应该这样做。
• How does it get created? 如何创建？ It is created at build time. 它是在构建时创建的。 There are build tools that can build your .map file for you as it does other files. 有一些构建工具可以像其他文件一样为您构建.map文件。 https://github.com/gruntjs/grunt-contrib-uglify/issues/71 https://github.com/gruntjs/grunt-contrib-uglify/issues/71

I hope this makes sense. 我希望这是有道理的。

---

#3楼

Just wanted to focus on the last part of the question; 只是想关注问题的最后一部分； How source map files are created? 如何创建源地图文件？ by listing the build tools I know that can create source maps. 通过列出我知道可以创建源地图的构建工具。

1. Grunt : using plugin grunt-contrib-uglify Grunt ：使用插件grunt-contrib-uglify
2. Gulp : using plugin gulp-uglify Gulp ：使用插件gulp-uglify
3. Google closure : using parameter --create_source_map 谷歌关闭 ：使用参数--create_source_map

---

#4楼

The map file maps the unminified file to the minified file. 映射文件将未缩小的文件映射到缩小的文件。 If you make changes in the unminified file, the changes will be automatically reflected to the minified version of the file. 如果您在未缩小的文件中进行更改，则更改将自动反映到文件的缩小版本中。

---

#5楼

• How can a developer use it? 开发人员如何使用它？

I didn't find answer for this in the comments, here is how can be used: 我在评论中没有找到答案，这是可以使用的方法：

1. Don't link your js.map file in your index.html file (no need for that) 不要将您的js.map文件链接到index.html文件中（不需要这样做）

2. Minifiacation tools (good ones) add a comment to your .min.js file: 小型化工具（不错的工具）会在.min.js文件中添加注释：

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

which will connect your .map file. 这将连接您的.map文件。

When the min.js and js.map files are ready... 当min.js和js.map文件准备就绪时...

3. Chrome: Open dev-tools , navigate to Sources tab, You will see sources folder, where un-minified applications files are kept. Chrome：打开dev-tools ，导航到Sources选项卡，您将看到sources文件夹，其中保存了未缩小的应用程序文件。

---

#6楼

Just to add to how to use map files. 只是增加了如何使用地图文件。 I use chrome for ubuntu and if I go to sources and click on a file, if there is a map file a message comes up telling me that I can view the original file and how to do it. 我将chrome用于ubuntu，如果我去浏览源并单击一个文件，如果有地图文件，则会出现一条消息，告诉我可以查看原始文件以及如何执行此操作。

For the Angular files that I worked with today I click 对于我今天使用的Angular文件，单击

Ctrl-P and a list of original files comes up in a small window. Ctrl-P和原始文件列表在一个小窗口中显示。

I can then browse through the list to view the file that I would like to inspect and check where the issue might be. 然后，我可以浏览列表以查看我要检查的文件，并检查问题所在。