源映射简介

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

合并和压缩js和css文件是给你的网站带来性能优势的最简单的方法.但在这之后,当你需要在被压缩的文件中debug时,这无疑是一场噩梦.但别担心,我们有被称为源映射的这一技术来解决这一难题.

源映射提供了一个在被压缩的文件中映射原始代码位置的方法.这意味着在一些程序的帮助下,你能更简单的在你的应用程序中debug.chrome和firefox的开发者工具都内置了源映射.

在这篇博客中,你能够学习到如何在开发中使用源映射,并且还能了解他们是如何生成的.现在先让我们聚焦于js代码的源映射,js代码的源映射原理同样也适用于css.

PS:firefox的开发者工具是默认支持和开启源映射的.chrome则需要手动开启源映射.
chrome开启源映射步骤如下:
启动chrome的开发者工具并打开设置面板(Settings pane).在通用选项卡中确保开启了js源映射和css源映射.

源映射是如何工作的

源映射是由一大堆信息组成的,这些信息能够通过映射让被压缩文件中的代码回退到被压缩前的文件中.你能够为你不同的被压缩文件指定不同的源映射.

通过在浏览器底部添加一个特别的注释,来向浏览器表明源映射可用.

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

这条注释通常由程序添加,一个生成源映射的程序.浏览器的开发者工具只会读取这个文件,前提是源映射被启用并且浏览器的开发者工具也被打开.

你也能通过发送X-SourceMap HTTP头在被压缩的js文件的response中,以此来指定一个可用的源映射.

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

这个源映射文件包含了json对象和它本身的映射与原始js文件的信息.这里有个简单的例子:

    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 – (可选)从哪里开始解析URL中的文件.
names – 一个包含源文件中所有变量和函数名的数组.
mappings – 一个Base64 VLQs 字符串,包含了实际代码的映射. (这就是魔法发生的地方.)

生成UglifyJS源映射

UglifyJS是一个流行的命令行工具,它允许你合并和压缩js文件.版本2支持命令行标志(flag),该标志能帮助生成源映射.

--source-map – 源映射的输出文件.
--source-map-root – (可选)这将在映射文件中填充sourceRoot属性.
--source-map-url – (可选)源映射在你服务器上的路径.这会用于注释中,该注释会被放入优化文件. //# sourceMappingURL=/path/to/script.js.map
--in-source-map – (可选)源映射输入.如果压缩已经从其他源文件中生成的JavaScript文件,这将非常有用.思考下js库.
--prefix or -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

源映射简介