什么是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 : 3,
　　　　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详解