Source Maps介绍

[ttop5]

最近在看Webpack相关的一些东西，这是官网推荐的一篇文章，主要讲的是项目打包后关于错误追踪调试的实现原理，根据我的理解翻译了一下。

原文链接：http://blog.teamtreehouse.com/introduction-source-maps

---

我们都知道为网站进行性能优化最简单的一招就是合并和压缩项目的JavaScript和CSS代码。但是当你需要去调试这些压缩后的代码的时候会发生什么？这简直就是噩梦（因为浏览器只会将错误指向直接运行代码，所以就你很难在原文件中定位错误代码）。不过不用担心，现在已经有一个成熟的解决方案了，它就是source maps。

source maps提供了一种从压缩文件代码到原始文件代码位置的映射。这就意味着在一些软件的帮助下，你可以很容易的去调试你的应用程序即使是在你的代码已经被优化的情况下。Chrome和Firefox的开发者工具都内建支持source maps。

在这篇文章中，你将学习到source maps的工作原理并了解如何生成它们。我们将主要关注JavaScript代码的source maps，当然这些原理也同样适用于CSS的source maps。

Source Maps是如何工作的

顾名思义，一个source map是由一大堆可用于将压缩文件中的代码映射回源代码的信息组成。你可以为不同的压缩文件指定不同的source map。

你可以向优化后的文件底部添加一行特殊的注释来告诉浏览器source map可用：

//# sourceMappingURL=/path/to/script.js.map

该语句通常由生成source map的程序来自动添加。开发者工具只是在支持source maps并且开发者工具被打开时才加载此文件。

你还可以通过在压缩JavaScript文件的响应中发送X-SourceMap HTTP来指定source map可用：

X-SourceMap: /path/to/script.js.map

source map包含一个关于它自身和原始JavaScript文件信息的JSON对象。例如：

{
    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 – 这个属性标识了source map的版本；
• file – source map文件名；
• sources – 包含该源文件URL的数组；
• sourceRoot – （可选）sources数组中源文件所在的目录；
• names – 一个包含源文件中所有变量和函数名的数组；
• mappings – 一串包含实际代码映射的Base64 VLQs字符串（这就是魔法发生的地方）。

使用UglifyJS生成Source Maps

UglifyJS是一个受欢迎的能让你合并和压缩JavaScript文件的命令行程序。2.0版本支持了一些有助于生成source maps的参数：

• --source-map – source map输出文件；
• --source-map-root – （可选）用于填充映射文件中的sourceRoot属性 ；
• --source-map-url – （可选）你服务器上source map的路径。这个将被放在优化后的文件的注释中使用 //# sourceMappingURL=/path/to/script.js.map
• --in-source-map – （可选）输入source map。如果你要压缩已经从其他地方的源文件生成JavaScript文件，这个会很有用。比如JavaScript库；
• --prefix or -p – （可选）删除sources属性中出现的n个目录。例如-p 3将从路径中删除前三个目录，于是one/two/three/file.js将变成file.js。使用-p relative就能让UglifyJS为你找出source map和源文件之间的相对路劲；

这是一个使用示例：

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

Chrome开发者工具中的Source Maps

如果你的source maps配置正确，你应该在浏览器的Source下看到列出的每个原始JavaScript文件。

检查页面的HTML确认只引用了压缩后的JavaScript文件。开发者工具为你加载源映射文件，然后获取每个原始文件。

Firefox开发者工具中的Source Maps

Firefox用户可以直接在开发者工具的Debugger下看到各个源文件。开发者工具再次确认source maps可用，然后获取每个引用的源文件。

如果你希望查看压缩版本，点击此窗口右上角齿轮状图标然后取消选择Show original sources。

写在最后

使用source maps能让开发人员在兼顾网站性能的同时保持一个直接的代码调试环境。

你在本文中学习了source maps的工作原理并了解了如何使用UglifyJS生成它们。如果你曾通过压缩资源来优化网站（你确实应该这样做），那么你很值得花时间来将source maps整合到你的工作流当中。

相关链接

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