简介

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

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

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

使用

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

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

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

图1

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

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

图2

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

图3

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

图4

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

sourceMap原理

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

图5

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

图6

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

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

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

图7

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

sourceMap内嵌式

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

图8

生成方式：

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，但是浏览器到底是怎么用的，其实对我们来说还是黑盒子，要想知道其中的奥秘可能就需要扒浏览器的代码了！

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