我该如何使用JavaScript源代码映射(.map文件)？

Question

最近，我看到一些JavaScript库（如Angular）随附有带有.js.map扩展名的文件，这让我产生了一些疑问：

• 这是用来做什么的？为什么Angular的开发人员会提供一个.js.map文件？
• 作为JavaScript开发人员，我如何使用angular.min.js.map文件？
• 我需要关心为我的JavaScript应用程序创建.js.map文件吗？
• 它是如何创建的？我查看了angular.min.js.map，发现里面充满了奇怪格式的字符串，所以我认为它不是手动创建的。

- Muhammad Reda

---

被接受的答案链接到mozilla.org上的一个视频，解释了什么是源映射，但我发现这个介绍更好。并不是说它完美无缺，但它通过一些webpack源映射设置，展示了在调试时每个设置如何改变最简单代码块在开发工具中的外观。剧透：有一系列[最小化到原始]的代码。你越接近最小化，生成sourcemap的速度就越快，但代码可能会更丑陋。越接近原始，你得到的是更易读的代码，但需要付出更多的sourcemap转译时间。 - ruffin

Answer 1

.map文件是针对已经进行了代码压缩的JavaScript、CSS（现在也包括TypeScript）文件而产生的。它们被称为source maps源映射文件。当你压缩一个文件，比如angular.js文件时，会将成千上万行漂亮的代码变成几行丑陋的代码。希望在将代码发布到生产环境时，使用的是已经进行了压缩的代码而不是完整的未压缩版本。当你的应用程序处于生产环境中并出现错误时，源映射文件可以帮助你查看原始代码版本而不是丑陋的代码版本。如果没有源映射文件，任何错误都会变得难以理解。

CSS文件同样适用。一旦你将Sass或Less文件编译成CSS后，它看起来与原始形式完全不同。如果启用了sourcemaps源映射，则可以查看文件的原始状态，而不是修改后的状态。

因此，按顺序回答您的问题：

• 它是用来做什么的？ 解压缩丑化的代码。
• 开发人员如何使用它？ 在调试生产应用程序时使用。在开发模式下，你可以使用完整版本的Angular。在生产环境中，使用经过压缩的版本。
• 我需要关心创建js.map文件吗？ 如果你希望更轻松地调试生产代码，那么是的，你应该这样做。
• 它是如何创建的？它是在构建时创建的。有些构建工具可以像处理其他文件一样构建您的.map文件。如果输出文件不位于项目根目录#71，则Sourcemaps将失败

希望这讲得清楚。

- frosty

---

请注意，地图文件只有在被调用时才会被发送，这就是让我感到困惑的原因。https://dev59.com/Il4d5IYBdhLWcg3wE_OP#27196201 - Abdelouahab

@frosty 解除引用丑化的代码。你能解释一下吗？一个.js.map文件不是维护着手工制作的文件和压缩文件之间的关系（通常称为引用）吗？ - Zameer Ansari

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - frosty

Answer 2

开发人员如何使用它？

1. 不要在您的index.html文件中链接js.map文件（没有必要）。

2. 缩小工具（好的工具）会向您的.min.js文件添加注释：

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

   它将连接您的.map文件。

   当min.js和js.map文件准备好时...

3. Chrome：打开dev-tools，导航到Sources选项卡。您将看到sources文件夹，其中包含未经缩小的应用程序文件。

- garfunkel61

---

如果压缩后的源代码中没有这个注释，而且我又不能修改它，那么我怎样才能从本地文件系统提供源映射呢？ - SasQ

Answer 3

我只想关注问题的最后一部分：如何创建源映射文件？通过列出我知道可以创建源映射的构建工具。

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

- Muhammad Reda

---

2021年更新：如果使用ES6 JS，请尝试使用gulp-terser。据我了解，gulp-uglify不支持ES6。如果您正在使用Babel将其转换为ES5，则没有问题。 - iCode

我之前用过一个用Ruby编写的工具: https://github.com/ConradIrwin/ruby-source_map。我正在寻找一个用Python或C编写的工具。 - NuclearPeon

Answer 4

地图文件将未压缩的文件映射到已压缩的文件。如果您在未压缩的文件中进行更改，则这些更改将自动反映在文件的压缩版本中。

- Surendra Yadav

---

关于“更改将自动反映”：假设缩小工具已经完成了这个功能？有哪些缩小工具的例子？ - Peter Mortensen

Answer 5

仅补充如何使用地图文件：我在Ubuntu上使用Google Chrome，如果进入“资源”并单击一个文件，如果有地图文件，则会出现一条消息告诉我可以查看原始文件以及如何操作。

对于我今天处理的Angular文件，我按Ctrl+P，在一个小窗口中列出了原始文件列表。

然后我可以浏览列表以查看我想检查问题的文件，并检查可能存在的问题。

- rotato poti