如何使用JavaScript源映射(。映射文件)?

最近，我看到带有.js.map扩展名的文件附带了一些JavaScript库(比如角)，这在我脑海中提出了几个问题:

  • 这是干什么用的?为什么Angular的人关心交付.js.map文件?
  • 我(作为JavaScript开发人员)如何使用angular.min.js.map文件?
  • 我应该关心为我的JavaScript应用程序创建.js.map文件吗?
  • 它是如何产生的?我看了一下angular.min.js.map，它充满了奇怪格式的字符串，所以我假设它不是手动创建的。
203881 次浏览
小开
最佳答案

.map文件是用于缩小的JavaScript和CSS(现在还有TypeScript)文件。它们被称为源地图。当你缩小一个文件时，比如angular.js文件，它需要数千行漂亮的代码，然后把它变成只有几行丑陋的代码。希望在将代码交付到生产环境时，您使用的是简化的代码，而不是完整的、未简化的版本。当你的应用程序在生产中出现错误时，源映射将帮助你处理你的丑陋文件，并允许你看到代码的原始版本。如果没有源映射，那么任何错误充其量都是模糊的。

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

下面按顺序回答你的问题:

  • 去引用丑陋的代码
  • 开发人员如何使用它?你可以用它来调试生产应用。在开发模式下，你可以使用Angular的完整版本。在生产中，您将使用缩小版。
  • 我应该关心创建一个js。映射文件吗?如果你关心能够更容易地调试产品代码，那么是的，你应该这样做。
  • 它是如何产生的?在构建时创建。有一些构建工具可以像构建其他文件一样为您构建。map文件。如果输出文件不在项目根目录#71 . #71 . #71

我希望这是有意义的。

小开

我只想把重点放在问题的最后一部分;源映射文件是如何创建的?通过列出构建工具，我知道，可以创建源映射。

  1. 咕哝着说:使用插件grunt-contrib-uglify
  2. 狼吞虎咽地吃:使用插件gulp-uglify
  3. 谷歌关闭:使用参数--create_source_map
小开

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

小开

开发人员如何使用它?

  1. 不要链接你的js.map文件在你的index . html文件(不需要这样)

  2. 缩小工具(很好的工具)添加一个注释到你的.min.js文件:

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

    它将连接你的. map文件。

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

  3. Chrome浏览器:打开工具开发，导航到来源页签。您将看到来源文件夹，其中保存了未缩小的应用程序文件。

小开

只是补充一下如何使用地图文件:我使用谷歌Chrome for Ubuntu，如果我去源代码并点击一个文件，如果有一个地图文件，就会出现一个消息告诉我，我可以查看原始文件以及如何操作。

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

然后，我可以浏览列表以查看我想要检查的文件，并检查可能出现问题的位置。


提交答案