如何使用JavaScript源映射（.map文件）？

最近，我看到一些JavaScript库（如）附带了扩展名为

.js.map

的文件，这在我脑海中提出了几个问题：

• 这是干什么用的？为什么Angular公司的人要提交一个

  .js.map

  文件
• 作为一名JavaScript开发人员，我如何使用

  angular.min.js.map

  文件
• 我应该为我的JavaScript应用程序创建

  .js.map

  文件吗
• 它是如何创建的？我查看了

  angular.min.js.map

  ，其中填充了奇怪的格式化字符串，因此我假设它不是手动创建的

---

地图文件用于缩小的

js

和

css

（现在也是

ts

）文件。它们被称为源地图。当你缩小一个文件时，比如angular.js文件，它需要数千行漂亮的代码，而只需要几行丑陋的代码。希望在将代码交付生产时，您使用的是缩小的代码，而不是完整的、未统一的版本。当您的应用程序处于生产状态且出现错误时，sourcemap将帮助您获取丑陋的文件，并允许您查看代码的原始版本。如果您没有sourcemap，那么任何错误充其量看起来都很神秘

CSS文件也是如此。一旦您获取一个SASS或更少的文件并将其编译为CSS，它看起来与原始形式完全不同。如果启用sourcemaps，则可以看到文件的原始状态，而不是修改后的状态

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

• 为什么？取消引用丑陋代码
• 开发人员如何使用它？您可以使用它调试生产应用程序。在开发模式下，您可以使用Angular的完整版本。在生产中，您将使用缩小版
• 我应该关心创建一个js.map文件吗？如果您关心能够更轻松地调试生产代码，那么是的，您应该这样做
• 它是如何创建的？它是在构建时创建的。有一些构建工具可以像构建其他文件一样为您构建.map文件

---

我希望这是有意义的。

只想把重点放在问题的最后一部分源地图文件是如何创建的？通过列出我知道的可以创建源地图的构建工具

：使用插件

：使用插件

：使用参数

---

映射文件将未显示的文件映射到缩小的文件。如果在未统一的文件中进行更改，更改将自动反映到文件的缩小版本。

• 开发人员如何使用它？

我在评论中没有找到答案，以下是如何使用：

不要将js.map文件链接到index.html文件中（无需链接）

小型化工具（好的）在.min.js文件中添加注释：

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

它将连接您的.map文件

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

Chrome：打开开发工具，导航到源文件选项卡，您将看到源文件文件夹，其中保存着未缩小的应用程序文件

---

只是为了增加如何使用地图文件。我在ubuntu上使用chrome浏览器，如果我访问源代码并点击一个文件，如果有一个地图文件，就会出现一条消息告诉我可以查看原始文件以及如何查看

对于我今天使用的角度文件，我单击

Ctrl-p 在一个小窗口中会出现一个原始文件列表

---

然后，我可以浏览列表以查看我要检查的文件，并检查问题可能在哪里

请注意，映射文件在您调用它之前不会被发送，这让我感到困惑。谢谢aaron，这是我看到的关于sourcemap的更好的描述之一。我在gulp中使用它，我已经了解了gulp的所有知识，并且想知道sourcemaps是如何使用的，现在我可以自信地使用它了。与一年前的一些插件不兼容相比，现在大多数的gulp插件也兼容了。我只是想说这完全有道理@frosty将取消参考丑陋代码。你能解释一下吗？

.js.map

文件不是在手工制作的文件和缩小的文件之间保持一种关系（通常称为引用）吗？@student它说取消引用，因为我不想引用缩小的代码。它被缩小了，如果我看一看，它几乎一文不值。但是，如果它能将其反引用回原始来源，那将是史诗般的。而这正是sourcemap的含义。我希望这有帮助。我喜欢这个答案（谢谢），但它有420个喜欢。。。2021更新：如果使用ES6 JS，请尝试使用

gulp-terser

<据我所知，code>gulp uglify不支持ES6。如果您使用Babel传输到ES5，那么没有问题。如果此注释不在缩小的源文件中，并且我无法修改它，我如何从本地文件系统提供源文件映射？