简介

今天这篇文章我们一起聊一聊sourceMap的原理，我们的研究对象是一个常用于各种构建工具的npm包——source-map。

sourceMap的主要作用是为了方便调试，因为现在的前端代码都是模块化、组件化的，在上线前会对js和css文件进行合并、压缩混淆，如果对这样的线上代码进行调试，肯定痛苦万分，sourceMap的作用就是能让浏览器的调试面板将生成后的代码映射到源码文件中，开发者可以在源码文件中debug，这样就会让程序员开心很多！

到目前为止，支持sourceMap的浏览器还是蛮少的，反正chrome是支持的，火狐貌似也是支持的。

使用

看一个例子，如下，我们现在写两个简单的js文件：

现在我们把这两个js文件合并起来并且产出一个sourceMap以供我们在chrome上断点调试！

我们可以结合前面文章提到的gulp写一个简单的构建流，如下：

用gulp运行一下，会在dist目录下产出两个文件：all.js——代码合并后的文件，all.js.map——sourceMap的json串所在的文件。

当你打开all.js后，你会发现all.js用独特的方式引入了all.js.map文件，如下图红色区域，

我们现在写一个html的空白页，仅仅引入all.js，

打开这个页面，并查看chrome devtools的source面板，你会发现这两个源码文件也被映射了进来，并且可以使用这两个源码文件来debug，即使你把本地目录下的两个源码文件删除也不影响映射，非常神奇！

下面我们就来看看生成后的代码是如何映射到源码中的？

sourceMap原理

打开图2中.map文件，如下：

• version 代表sourceMap的版本，写死3就可以了；
• sources和file 前者是源文件，后者是生成后的代码文件，这个一眼就能看出来；
• names 数组，存放转换前的所有变量名和属性名，不是必须的，所以不用太关注；
• sourcesContent 数组，存放每个源代码的内容；
• mappings 一堆乱七八糟的东西，看不出来是啥，这个就是今天主要的分析对象。

目前大多数的sourceMap都是用source-map这个包实现的，那么我们使用一下它！

如图6，使用source-map先生成一个SourceMapGenerator实例对象，这个实例对象主要是用于存储生成后代码的每一行与源码中每一行的对应关系以及存储每个源码文件的内容（最后一行），此处调用了addMapping方法，它的内部就是一个数组。

• 首先读取每个源码文件的内容，然后通过split就可以得到每个源码文件有多少行；
• addMapping方法参数是个对象，这个对象包含源码文件名，源码内容行和每行起始的列、生成后代码的内容行和起始列；
• 这里比较难处理的是生成后代码的内容行和起始列，如果仅仅是把源码文件内容简单的从上到下合并在一起，lineOffset从0依次递增就可以了，columnOffset统一是0；如果上一个文件的最后一行和下一个文件的第一行合并在了一行，那么此时的columnOffset就是上一个文件的最后一行的字符长度加1；如果文件内容之间有分隔符，那就把分割符所占的行与列也计算在内；
• 如果生成后的文件是压缩混淆的，那么就需要AST去计算对应关系了，好在这种情况uglify-js帮助我们做了sourceMap。

现在已经收集了源码内容以及行列生成前后的对应关系，再回头看看图5中的json是如何生成的？

此时生成sourcesContent的对应的源码内容就很简单了，此处不在嗷述，主要来看看mappings是如何生成的，如下图所示，算法还是有点绕的！

• 首先是for循环遍历图6中存储的对应关系的数据；
• 区域1：生成后的代码如果本次数据的行和上一次数据的行不是同一行，以分号开始，如果本次数据的行和上一次数据的行是同一行，以逗号开始；
• 区域2、3、4、5、6都用到了一种编码方式base64-vql，它可以用base64表示任意数值，在上一篇文章中我已经阐述了它的原理，不了解的可以去看一下；
• 区域2、3、4、5、6分别代表生成后代码的行、源码文件在source中的索引、源码所在的行、源码所在的列、变量名和属性名在name中的索引，它们所有本次的值和上一次的值之差会进行base64-vql的编码；
• 每次循环会最多生成5个值加一个标点符号，然后拼接起来，如图5中mappings所示。

最终这样的json文件放在chrome等浏览器中就会被自动读取，生成对应的map。

sourceMap内嵌式

除了生成一个外链式的json文件，其实还可以生成内嵌式的data Url，如下图所示

生成方式：

 var base64Map = new Buffer(JSON.stringify(sourceMap)).toString('base64');
 var data = '//# sourceMappingURL=data:application/json;charset=utf8;base64,' + base64Map;

将上面生成的data插入到文件底部即可！

总结

source-map除了能生成map还能解析map的json串，有兴趣的同学可以继续研究！另外虽然source-map帮我们生成了map，但是浏览器到底是怎么用的，其实对我们来说还是黑盒子，要想知道其中的奥秘可能就需要扒浏览器的代码了！

喜欢我的文章就关注我吧，有问题可以发表评论，我们一起学习，共同成长！