Bootstrap 3.x 中使用的 .map 文件是啥？

Posted 2023-02-22

【中文标题】Bootstrap 3.x 中使用的 .map 文件是啥？

【英文标题】：what are the .map files used for in Bootstrap 3.x?Bootstrap 3.x 中使用的 .map 文件是什么？

【发布时间】：2014-02-25 14:18:44

【问题描述】：

CSS 文件夹中包含两个文件扩展名为 .map 的文件。它们是：

bootstrap-theme.css.map
bootstrap.css.map

它们似乎是缩小的文件，但我不知道它们的用途。

【参考方案1】：

地图文件（源地图）用于取消引用缩小代码（css 和 javascript）。

它们主要用于帮助开发人员调试生产环境，因为开发人员通常使用压缩文件进行生产，这使得无法调试。映射文件帮助他们取消引用代码以查看原始文件的样子。

【参考方案2】：

什么是 CSS 地图文件？

它是一个 JSON 格式的文件，将 CSS 文件链接到它的源文件，通常是用预处理器（即，Less、Sass、Stylus 等）编写的文件，这是为了对源文件进行实时调试从网络浏览器。

什么是 CSS 预处理器？示例：Sass、Less、Stylus

它是一个 CSS 生成器工具，它利用编程能力来稳健、快速地生成 CSS。

【讨论】：

应该将它们视为文本文件还是字节流？它们应该以\n 结尾吗？

@AaronFranke 它们是文本文件。我建议您复制 .map 文件的内容并将其粘贴到 jsonblob.com 以查看 JSON 键/值对

【参考方案3】：

您是否曾发现自己希望在不影响性能的情况下保持客户端代码的可读性，更重要的是即使在合并和缩小代码后仍可调试？现在你可以通过源地图的魔力了。

This article 使用实用的方法解释 Source Maps。

【参考方案4】：

对于来这里寻找这些文件的任何人（比如我），您通常可以通过在 URL 末尾添加 .map 来找到它们：

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css.map

请务必将版本替换为您正在使用的任何版本的 Bootstrap。

【参考方案5】：

如果你只是想摆脱错误，你也可以删除bootstrap.css中的这一行：

/*# sourceMappingURL=bootstrap.css.map */

【讨论】：

或者只是哈希#，它会变成一个简单的评论，以防你以后想要它。

如果我们从 bootstrap.css 中删除它，它会导致任何错误或类似的事情吗？

不，它没有。它只会让调试变得更加困难。

您不希望将其用于生产环境，因此请相应地编译它（gulp --production 如果您使用 gulp，这将不包括该 sourceMapping 行）并从您上传到生产服务器的文件中排除 *.map 文件.

什么错误？该问题未提及错误。

【参考方案6】：

引导 css 可以由 Less 生成。 map 文件的主要用途是在 chrome 开发工具中将 css 源代码链接到 less 源代码。 正如我们过去所做的那样。如果我们在 chrome 开发工具中检查元素。你可以看到css的源代码。 但是如果在带有引导 css 文件的页面中包含地图文件。您可以看到适用于您要检查的元素样式的较少代码。

【参考方案7】：

来自Working with CSS preprocessors in Chrome DevTools：

许多开发人员使用 CSS 预处理器（例如 Sass、Less 或 Stylus）生成 CSS 样式表。由于生成了 CSS 文件，因此直接编辑 CSS 文件并没有太大帮助。

对于支持 CSS 源映射的预处理器，DevTools 允许您在“源”面板中实时编辑预处理器源文件，并查看结果，而无需离开 DevTools 或刷新页面。当您检查其样式由生成的 CSS 文件提供的元素时，“元素”面板会显示指向原始源文件的链接，而不是生成的 .css 文件。

【讨论】：

这个答案解释了它们与 CSS 预处理器一起使用——我还没有深入探索。谢谢

听起来这些类似于debug symbols 的编程语言，不是吗？

我遇到了 js 错误，所以我在该目录中创建了一个假文件，以阻止错误显示。

@IssaFarax 您可以通过 ChromeDev 工具设置禁用加载源地图。打开 DevTools > 点击设置齿轮 > 取消选中 Enable (JavaScript|CSS) source maps

你也可以参考：***.com/questions/21766880/…

【参考方案8】：

这些是源地图。将这些与压缩源文件一起提供；开发者工具（例如 Firefox 和 Chrome 中的工具）将使用它们来进行调试，就像代码没有被压缩一样。