浏览器如何或者从哪里获取“源映射”JavaScript文件的源文件？

Question

我开始着手处理一个已有的项目，该项目使用angular JS构建。当我打开Chrome浏览器的“源代码”视图时，浏览器会提示：

检测到源映射...

然后我看到了这个：

这些编译文件，如

• inline.bundle.js
• main.bundle.js
• 等等...

它们的原始文件位于我圈出来的源目录中，例如

• ng://
• webpack://
• 等等...

浏览器没有显示任何针对这些ng://、webpack://文件的网络请求，因此我的问题是，这些文件从哪里来？浏览器如何获取这些数据？

我猜想服务器向浏览器提供了一个“sourcemap”文件（或多个文件），其中包含所有原始源代码及其相应的编译代码。然后，浏览器解析了sourcemap，并为这些文件生成了一个“虚拟”文件树，这就是为什么没有网络请求的原因吗？这些“文件”从哪里来？

- the_velour_fog

Answer 1

源代码映射可以嵌入到原始JS包中，但在生产中通常不这样做。它也可以是外部文件（通常在捆绑包的最后一行引用）。Webpack通过devtool配置选项允许所有这些不同的选项。

- Madd0g

---

谢谢，我没有在任何输出文件中看到类似源映射数据的内容，而且这个//# sourceMappingURL=vendor.bundle.js.map被放置在vendor.bundle.js.map文件的底部。但是，在网络请求或源视图中都没有显示出任何vendor.bundle.js.map文件。 - the_velour_fog

它在某个时候会加载那个 .map 文件。也许你现在看不到它是因为缓存的原因。 - Keith

Answer 2

源映射的关联通常在编译后的文件末尾用注释表示。例如：

main.bundle.js

//# sourceMappingURL=main.bundle.js.map

源映射文件包含原始文件路径的数组，存储在其sources属性中（供浏览器在资源管理器视图中组织），以及它们的实际源内容存储在sourcesContent属性下。行/列号使用一种相当复杂的基于base64字符串的推导进行关联，定义在mappings属性下。

- Drazen Bjelovuk

Answer 3

如果你浏览angularjs、webpack等，你应该会看到以.map扩展名结尾的文件。当你加载一个网页时，服务器会发送一个头部，其中包含源映射文件的URL。根据规范，该头部的格式如下：

SourceMap: <url>

源代码映射必须遵循特定的格式。

{
"version" : 3,
"file": "out.js",
"sourceRoot": "",
"sources": ["foo.js", "bar.js"],
"sourcesContent": [null, null],
"names": ["src", "maps", "are", "fun"],
"mappings": "A,AAAB;;ABCDE;"
}

规格说明书可在Google文档上获取 https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit?hl=en_US&pli=1&pli=1 源映射是为了调试目的而引入的，以便您可以看到错误来自源代码的哪个位置。例如，您可以将一堆Sass文件编译为CSS，并且不知道在Sass文件中CSS来自何处。

- David