[译] 源代码映射（Source Map）简介

• 原文地址：An Introduction to Source Maps
• 原文做者：Matt West
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：EmilyQiRabbit
• 校对者：calpa, Raoul1996

合并与压缩 JavaScript 和 CSS 的代码，是能为你的网站提高性能的最简单的举措之一。可是若是想要调试这些压缩过的文件，又会怎么样呢？那简直是噩梦了。可是别怕，眼前就有一个解决办法，它就是源代码映射。

源代码映射提供了一个映射，将压缩后的文件和原始文件联系起来。这就意味着 —— 借助一点软件的帮助 —— 就算是资源被压缩过，你也能很轻松的调试应用。Chrome 和 Firefox 开发者工具都内建支持源代码映射。

在这篇博客文章中，你将会学习到源代码映射是如何工做的，而且了解它们是怎么生成的。咱们将主要关注 JavaScript 代码的源代码映射，但这些原则也适用于 CSS 源代码映射。

---

注：在 Firefox 的开发者工具里，源代码映射是默认开启的。而 Chrome 则须要手动的开启支持（自 Chrome 39 开始 Source Maps 也已经默认处于启用状态，译者注）。开启的方法是，启动 Chrome 的开发工具而后打开 Settings 面板（右下角的小齿轮）。在 General 标签中确保 Enable JS source maps 和 Enable CSS source maps 都被勾选了。

---

源代码映射是如何工做的

顾名思义，源代码映射包含了将压缩后文件代码映射回源代码的全部信息。你能够为每一个压缩文件指定不一样的源映射。

经过向被优化文件的底部添加一个特殊注释，你可向浏览器指示源代码映射可用。

//# sourceMappingURL=/path/to/script.js.map
复制代码

此注释一般由生成源代码映射的程序添加。只有在启用了对源代码映射的支持并打开开发工具时，开发者工具才会加载此文件。

经过响应对压缩的 JavaScript 文件请求的时带 X-SourceMap HTTP 首部的方式，你一样能够声明源代码映射可用。

X-SourceMap: /path/to/script.js.map
复制代码

源代码映射文件包含一个 JSON 对象，里面有映射自己和源 JavaScript 文件的信息。这是一个简单的例子：

{
    version: 3,
    file: "script.js.map",
    sources: [
        "app.js",
        "content.js",
        "widget.js"
    ],
    sourceRoot: "/",
    names: ["slideUp", "slideDown", "save"],
    mappings: "AAA0B,kBAAhBA,QAAOC,SACjBD,OAAOC,OAAO..."
}
复制代码

咱们来仔细研究一下这些属性。

• version – 此属性指示文件所遵循的源映射规范的版本。
• file – 源代码映射文件的名称。
• sources – 一个由源文件的 URL 组成的数组。
• sourceRoot – （可选参数）全部 sources 包含的 URL 被解析的路径。
• names – 一个包含全部源文件变量和函数名的数组。
• mappings – 一个 Base64 VLQs 的字符串，包含了实际的代码映射。（这就是魔法发生的地方）

使用 UglifyJS 生成源文件映射

UglifyJS 是一个很流行的命令行工具，它能够帮助你合并和压缩 JavaScript 文件。版本 2 提供了不少命令行参数，帮助生成源文件映射。

• --source-map – 源文件映射的输出文件。
• --source-map-root – （可选参数）它将填充映射文件中的 Sourceroot 属性。
• --source-map-url – （可选参数）服务器中源文件映射的路径。它将会被放置在被优化文件中的注释使用。//# sourceMappingURL=/path/to/script.js.map
• --in-source-map – （可选参数）输入源代码映射。当你正在压缩那些已经在别处生成过源代码映射的 JavaScript 文件的时候，这个参数就颇有用了。好比 JavaScript 库。
• --prefix 或 -p – （可选参数）从 sources 属性的文件路径中，移除 n 个目录。例如，-p 3 将会从文件路径中移除前三个目录，那么 one/two/three/file.js 就会成为 file.js。使用 -p relative 将会让 UgulifyJS 为您计算源文件映射和原始文件之间的相对路径。

这是一个命令的例子，它使用了一些上述的命令行参数。

uglifyjs [input files] -o script.min.js --source-map script.js.map --source-map-root http://example.com/js -c -m
复制代码

---

注意：若是你为 Grunt 使用了 grunt-contrib-uglify 插件，请参考关于如何在 Gruntfile 文件中配置这些选项的文档信息。

---

还有不少其余可用的工具支持生成源文件映射，一些可选项在下文列出：

• Closure
• CoffeeScript Compiler
• GruntJS Task for JSMin

Chrome 开发工具中的源文件映射

Chrome 开发工具中的 Sources 标签

若是你已经正确的设置好了源文件映射，那么你将会看到全部的原始 JavaScript 文件在 Sources 标签的面板中被列出。

检查页面的 HTML，你将可以确认它其实只引用了压缩的 JavaScript 文件。开发工具将为您加载源文件映射文件，而后获取每一个原始文件。

试试这个例子

Firefox 开发者工具中的源文件映射

Firefox 开发者工具中的 Debugger 标签

Firefox 用户能够在开发者工具的 Debugger 标签看到独立的源文件。一样，开发工具已经肯定源映射是可用的以后，才获取每一个引用的源文件。

若是但愿查看压缩版本，请单击选项卡右上角的齿轮图标，并取消选择 Show original sources。

试试这个例子

最后总结

使用源代码映射可让开发人员维护一个能够直接调试的环境，同时也能够优化网站的性能。

在这篇文章中，您学习了源代码映射是如何工做的，并了解了如何使用 UgulifyJS 生成它们。若是你曾经用压缩过的文件（你应该这么作）发布网站，那么花点时间把源文件映射建立集成到你的工做流程中是很是值得的。

一些有价值的连接

• Source Maps Revision 3 Proposal
• UglifyJS
• Source Maps Demo

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。