如何使用JavaScript源地图(.map文件)? [英] How to use JavaScript source maps (.map files)?

问题描述

最近我看到一些JavaScript库(例如 Angular )附带了扩展名为.js.map的文件，这引起了一些问题在我的脑海:

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:

• 这是做什么用的?为什么Angular的家伙会提供.js.map文件?
• 我(作为JavaScript开发人员)如何使用angular.min.js.map文件?
• 我是否应该为我的JavaScript应用程序创建.js.map文件?
• 如何创建?我查看了angular.min.js.map，其中充满了格式奇怪的字符串，所以我认为它不是手动创建的.

• What is it for? Why do the guys at Angular care to deliver a .js.map file?
• How can I (as a JavaScript developer) use the angular.min.js.map file?
• Should I care about creating .js.map files for my JavaScript applications?
• 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.

推荐答案

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

The .map files are for js and css (and now ts too) files that have been minified. They are called 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. 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.

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

Same for CSS files. Once you take a SASS or LESS file and compile it to CSS, it looks nothing like its original form. 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:

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

• 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. https://github.com/gruntjs/grunt-contrib-uglify/issues/71

我希望这是有道理的.

这篇关于如何使用JavaScript源地图(.map文件)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！