The .map files are for JavaScript and CSS (and now TypeScript too) files that have been minified. They are called source maps. 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. 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 source map will help take your ugly file, and will allow you to see the original version of the code. If you didn't have the source map, then any error would seem cryptic at best.

CSS文件也是如此。一旦你把一个Sass或Less文件编译成CSS，它看起来就完全不像它原来的形式了。如果启用sourcemaps，则可以看到文件的原始状态，而不是修改后的状态。

下面按顺序回答你的问题:

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. In production, you would use the minified version. Should I care about creating a js.map file? 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. Sourcemaps fail if the output file is not located in the project root directory #71

我希望这是有意义的。

我只想把重点放在问题的最后一部分;源映射文件是如何创建的?通过列出我所知道的可以创建源映射的构建工具。

使用插件Grunt -contrib-uglify Gulp:使用Gulp -uglify插件 谷歌闭包:使用参数——create_source_map

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

开发人员如何使用它?

不要链接你的js。映射文件在你的index.html文件(不需要) 缩小工具(很好的工具)会在你的.min.js文件中添加注释: / / # sourceMappingURL = yourFileName.min.js.map 这将连接您的.map文件。 当min.js和js. js。地图文件准备好了… Chrome浏览器:打开dev-tools，导航到Sources选项卡。您将看到sources文件夹，其中保存了未缩小的应用程序文件。

只是补充一下如何使用地图文件:我使用谷歌Chrome for Ubuntu，如果我去源代码并点击一个文件，如果有一个地图文件，就会出现一个消息告诉我，我可以查看原始文件以及如何操作。

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

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