什么是JavaScript Souce Map

第一部分

　　我们经常可以看到后缀名为.map的文件,比如我们下载得到bootstrap的css文件，如下所示：

　　不难理解bootstrap.css、 bootstrap.min.css、等这些常规的代码，但是map，是什么鬼？！

　　一般遇到这问题，我们都可以先去stackoverflow上搜索，得到这篇问题。

　　最高票回答如下：

Many developers generate CSS style sheets using a CSS preprocessor, such as Sass, Less, or Stylus. Because the CSS files are generated, editing the CSS files directly is not as helpful.

For preprocessors that support CSS source maps, DevTools lets you live-edit your preprocessor source files in the Sources panel, and view the results without having to leave DevTools or refresh the page. When you inspect an element whose styles are provided by a generated CSS file, the Elements panel displays a link to the original source file, not the generated .css file.

　　即许多的开发者会使用css预处理器如sass、less、stylus等来生成css文件，因为这些css文件时生成的，所以直接编辑他们是没有用的。对于支持Source Maps的预处者来说，开发者工具可以让你在Sources面板中直接编辑你的源代码，并且直接查看结果而不用刷新页面。当你审查一个由生成的css文件显示的元素的时候，Element面板将会显示一个对于原文件的链接，而不是.css文件。

　　次高票回答回下：

　　　　

相信大家对此已经有了一定的了解，但是希望知道为什么，还得往下看！

第二部分

　　打开bootstrap.min.css，我们可以看到如下内容：

　　打开一个js文件，我们可以看到下面内容：

　　在上面的文件中我们可以看到，两者同样都有一行被注释，键为 sourceMappingURL，值就指向了对应的map文件。

为什么需要Source Map？

　　JavaScript和css都变得越来越复杂，所以现在从开发过程到生产过程，我们往往都需要进行文件的转化，原因无非以下三种：

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

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

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

　　这三种情况都使得实际运行的代码可开发中的代码不一样，这给调试工作带来了许多困难。因为通常JavaScript的解释器会告诉你，第几行第几列代码出错。但是，这对于转换后的代码毫无用处。举例来说，jQuery 1.9压缩后只有3行，每行3万个字符，所有内部变量都改了名字。你看着报错信息，感到毫无头绪，根本不知道它所对应的原始位置。

　　而这就是Source Map需要解决的问题。

什么是Source Map？

　　　简单说，Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。这无疑给开发者带来了很大方便。

如何使用Source Map？

　　正如前文所提到的，只要在转换后的代码尾部，加上一行就可以了。

　　//@ sourceMappingURL=/path/to/file.js.map

　　当然Map文件是需要存在的，值得注意的时，Map可以在网络也可以在本地。

如何生成Source Map？

　　实际上，现在都是使用webpack这种打包工具了，所以生成它是非常简单的，不再赘述。

Source Map文件格式？

　　打开一个Source Map，其中的格式大致是下面这样的：

　　{

　　　　version : ,

　　　　file: "out.js",

　　　　sourceRoot : "",

　　　　sources: ["foo.js", "bar.js"],

　　　　names: ["src", "maps", "are", "fun"],

　　　　mappings: "AAgBC,SAAQ,CAAEA"

　　}

　　整个文件就是一个JavaScript对象，可以被解释器读取。主要有以下几个属性；

　　- version：Source map的版本，目前为3。

　　- file：转换后的文件名。

　　- sourceRoot：转换前的文件所在的目录。如果与转换前的文件在同一目录，该项为空。

　　- sources：转换前的文件。该项是一个数组，表示可能存在多个文件合并。

　　- names：转换前的所有变量名和属性名。

　　- mappings：记录位置信息的字符串，下文详细介绍。

mappings属性

　　这一部分将讲解两个文件是如何一一对应的。

　　关键就是map文件的mappings属性。这是一个很长的字符串，它分成三层。

　第一层是行对应，以分号（;）表示，每个分号对应转换后源码的一行。所以，第一个分号前的内容，就对应源码的第一行，以此类推。

　　第二层是位置对应，以逗号（,）表示，每个逗号对应转换后源码的一个位置。所以，第一个逗号前的内容，就对应该行源码的第一个位置，以此类推。

　　第三层是位置转换，以VLQ编码表示，代表该位置对应的转换前的源码位置。

　　举例来说，假定mappings属性的内容如下：

mappings:"AAAAA,BBBBB;CCCCC"

　　就表示，转换后的源码分成两行，第一行有两个位置，第二行有一个位置。

位置对应的原理

每个位置使用五位，表示五个字段。

从左边算起，

　　- 第一位，表示这个位置在（转换后的代码的）的第几列。

　　- 第二位，表示这个位置属于sources属性中的哪一个文件。

　　- 第三位，表示这个位置属于转换前代码的第几行。

　　- 第四位，表示这个位置属于转换前代码的第几列。

　　- 第五位，表示这个位置属于names属性中的哪一个变量。

参考： JavaScript Map Source详解