JavaScript Source Map知识详解

JavaScript Source Map知识详解2014-09-15 阮一峰

这是2.0版之前的最后一个新版本，有很多新功能，其中一个就是支持Source Map。

访问 http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js，打开压缩后的版本，滚动到底部，你可以看到最后一行是这样的：

//@ sourceMappingURL=jquery.min.map

这就是Source Map。它是一个独立的map文件，与源码在同一个目录下，你可以点击进去，看看它的样子。

这是一个很有用的功能，本文将详细讲解这个功能。

一、从源码转换讲起

JavaScript脚本正变得越来越复杂。大部分源码（尤其是各种函数库和框架）都要经过转换，才能投入生产环境。

常见的源码转换，主要是以下三种情况：

（1）压缩，减小体积。比如jQuery 1.9的源码，压缩前是252KB，压缩后是32KB。

（2）多个文件合并，减少HTTP请求数。

（3）其他语言编译成JavaScript。最常见的例子就是CoffeeScript。

这三种情况，都使得实际运行的代码不同于开发代码，除错（debug）变得困难重重。

通常，JavaScript的解释器会告诉你，第几行第几列代码出错。但是，这对于转换后的代码毫无用处。举例来说，jQuery 1.9压缩后只有3行，每行3万个字符，所有内部变量都改了名字。你看着报错信息，感到毫无头绪，根本不知道它所对应的原始位置。

这就是Source map想要解决的问题。

二、什么是Source map

简单说，Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。

有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。这无疑给开发者带来了很大方便。

目前，暂时只有Chrome浏览器支持这个功能。在Developer Tools的Setting设置中，确认选中"Enable source maps"。