针对 Source Maps 的一篇介绍（翻译）

原文连接

组合而且压缩你的JavaScript 和 CSS文件是提升性能最方便的方式之一。可是当你须要调试这些压缩后的代码的时候会发生什么呢？它多是异常噩梦。不过不用怕，这里有一个经过source maps的name来解决的问题的方案。

source maps提供了一种将压缩后的文件代码映射到源文件的初始位置的方式。这意味着在软件的帮助下，你能够轻易的调试你的应用甚至在你已经作了代码优化（压缩）处理的状况下。谷歌以及火狐浏览器的开发者工具目前都内置了对source maps的支持。

这篇博客将告诉你source maps的工做原理以及如何生成。咱们将主要关注JS的源映射，CSS的源映射也是相同原理。

---

注意：Firefox的开发人员工具默认启用对源映射的支持。您可能须要在Chrome中手动启用支持。要执行此操做，请启动Chrome开发工具并打开“ 设置”窗格（右下角的齿轮）。在常规选项卡中，确保启用JS源地图和启用CSS源的地图都打勾。

---

源映射的工做原理

顾名思义，源映射由一大堆文件组成，使压缩后的代码能够映射回源文件。你能够为每个压缩后的文件提供不一样的源映射。

经过在优化（压缩）后的文件的底部添加特殊注释，向浏览器提供可用的源映射。

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

此注释一般由用于生成源映射的程序添加。若是启用了对源映射的支持而且开发人员工具已打开，则开发人员工具将仅加载此文件。

您还能够经过X-SourceMap在压缩的JavaScript文件的响应中发送HTTP header来指定源映射。

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 VLQ字符串。（这是魔术发生的地方。）

使用UglifyJS生成源映射

UglifyJS是一个受欢迎的命令行工具，能够对你的文件进行组合压缩。版本2 支持大量的命令行标志用以生成source maps。

• --source-map - 源映射的输出文件。
• --source-map-root- （可选）这将填充sourceRoot地图文件中的属性。
• --source-map-url - （可选）服务器上源映射的路径。这将被放在优化文件的注释中。//# sourceMappingURL=/path/to/script.js.map
• --in-source-map - （可选）输入源映射。若是要压缩已从其余位置的源文件生成的JavaScript文件，这可能颇有用。想一想JavaScript库。
• --prefix或-p- （可选）n从sources属性中显示的文件路径中删除多个目录。例如，-p 3将从文件路径中删除前三个目录，所以one/two/three/file.js将成为file.js。使用-p relative将使UglifyJS为您找出源地图和原始文件之间的相对路径。

以下示例：

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

除此以外还有其余的工具能够用来生成source maps。列表以下：

• Closure
• CoffeeScript Compiler
• GruntJS Task for JSMin

谷歌浏览器开发者工具中的Source Maps

若是你正确设置了源映射，则应该会看到Sources选项卡的文件窗格中列出的每一个原始JavaScript文件。

检查页面的HTML，确认仅引用了压缩的JavaScript文件。开发工具正在加载源映射文件，而后获取每一个原始源文件。

火狐浏览器开发者工具中的Source Maps

Firefox用户能够在开发者工具的“ 调试器”选项卡中查看各个源文件。dev工具再次肯定源映射可用，而后获取每一个引用的源文件。

若是您但愿查看压缩版本，请单击选项卡右上角的齿轮图标，而后取消选择 Show original sources（显示原始源）。

总结

使用Source Maps容许开发人员维护以及修复代码时，直接进行调试，同时优化其站点以提升性能。

参考连接

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