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

Posted 2023-02-22

【中文标题】如何使用 JavaScript 源映射（.map 文件）？

【英文标题】：How can I use JavaScript source maps (.map files)?

【发布时间】：2014-03-10 06:49:34

【问题描述】：

最近我看到一些 javascript 库（如 Angular）附带了带有 .js.map 扩展名的文件，这只是在我脑海中提出了几个问题：

它有什么用？为什么 Angular 的人关心提供.js.map 文件？ 我（作为 JavaScript 开发人员）如何使用 angular.min.js.map 文件？ 我应该关心为我的 JavaScript 应用程序创建 .js.map 文件吗？ 它是如何创建的？我查看了angular.min.js.map，它充满了奇怪格式的字符串，所以我认为它不是手动创建的。

【参考方案1】：

.map 文件用于已缩小的 JavaScript 和 CSS（现在也包括 TypeScript）文件。他们被称为source maps。当你缩小一个文件时，比如 angular.js 文件，它需要数千行漂亮的代码，然后把它变成只有几行丑陋的代码。希望当您将代码交付到生产环境时，您使用的是缩小后的代码，而不是完整的、未缩小的版本。当您的应用程序在生产中并且出现错误时，源映射将帮助您获取丑陋的文件，并允许您查看代码的原始版本。如果您没有源映射，那么任何错误充其量只会显得晦涩难懂。

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

所以，按顺序回答你的问题：

它有什么用？

取消引用丑陋的代码

开发人员如何使用它？

您将它用于调试生产应用程序。在开发模式下，您可以使用完整版的 Angular。在生产中，您将使用缩小版。

我应该关心创建一个 js.map 文件吗？

如果您关心能够更轻松地调试生产代码，那么是的，您应该这样做。

它是如何创建的？

它是在构建时创建的。有一些构建工具可以像构建其他文件一样为您构建 .map 文件。 Sourcemaps fail if the output file is not located in the project root directory #71

我希望这是有道理的。

【讨论】：

请注意，地图文件在您调用之前不会发送，这让我感到困惑***.com/a/27196201/861487

@frosty 取消引用丑化代码。你能解释一下吗？ .js.map 文件不是维护手工文件和缩小文件之间的关系（通常称为reference）吗？

@student 它说取消引用，因为我不想引用缩小的代码。它被缩小了，如果我看它，它几乎一文不值。但是，如果它可以将其取消引用回原始来源，那将是史诗般的。这正是 sourcemap 的含义。我希望这会有所帮助。

【参考方案2】：

开发者如何使用它？

不要在 index.html 文件中链接您的 js.map 文件（不需要）

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

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

这将连接您的 .map 文件。

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

Chrome：打开 dev-tools，导航到 Sources 选项卡。您将看到 sources 文件夹，其中保存了未压缩的应用程序文件。

【讨论】：

如果缩小的源代码中不存在此注释并且我无法修改它，我如何从本地文件系统提供源映射？

【参考方案3】：

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

Grunt：使用插件grunt-contrib-uglify Gulp：使用插件gulp-uglify Google closure：使用参数--create_source_map

【讨论】：

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

有一个我以前用过的用 Ruby 编写的工具：github.com/ConradIrwin/ruby-source_map。我正在寻找用 python 或 c 编写的东西。

【参考方案4】：

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

【讨论】：

Re“更改将自动反映”：假设minification tool does it?有哪些此类缩小工具的示例？

【参考方案5】：

只是添加到如何使用地图文件：我在 Ubuntu 上使用 Google Chrome，如果我转到源并单击文件，如果有地图文件，则会出现一条消息，告诉我我可以查看原始文件以及如何做。

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

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