Javascript .map文件 - javascript源地图

Question

最近我看到带有.js.map扩展名的文件附带了一些JavaScript库(比如Angular),这只是我脑子里提出的几个问题:

• 它是为了什么？为什么Angular的人会提供.js.map文件？
• 我(作为JavaScript开发人员)如何使用该angular.min.js.map文件？
• 我应该关心.js.map为我的JavaScript应用程序创建文件吗？
• 它是如何创建的？我看了一下,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. 谷歌关闭:使用参数--create_source_map

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

Answer 3

• 开发人员如何使用它？

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

1. 不要将您的js.map文件链接到index.html文件中(不需要)

2. Minifiacation工具(好的)为你的.min.js文件添加注释:

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

这将连接.map文件.

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

3. Chrome:打开dev-tools,导航到Sources选项卡,您将看到sources文件夹,其中保留了未缩小的应用程序文件.

Answer 4

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