JavaScript的Source Map (sourceURL / sourceMappingUR

renweihub 发布于2019-08-21 16:02 / 1758人阅读

摘要：常见的源码转换，主要是以下三种情况压缩，减小体积。该项是一个数组，表示可能存在多个文件合并。第一层是行对应，以分号表示，每个分号对应转换后源码的一行。在这个位中，左边的第一位最高位表示是否连续。

这两天完成了自己的个人任务，准备学习一下前辈们的经验教训，在项目组的文档中发现了一个要求注意的点，如下：

Js文件的开头可以加上类似“//@ sourceURL=jquery.extends.js”，方便调试的时候找到代码。

过去在编写代码的时候从未遇到过这个东西，发现后查了一下，知道了这个东西其实是JavaScript的Source Map（源映射） (sourceURL / sourceMappingURL)。那么他是用来干嘛用的呢?
简单的说，源映射是用来为压缩后的代码调试提供方便的。我们知道，为了提高性能，很多网站都会将js代码先压缩再上线，上线之后一旦js出现了问题报错时浏览器只会显示错误位置在已压缩文件中的位置，但是压缩后的js文件也就两三行的样子，每一行都有上万的字符，这个时候报错说第一行有问题，我们怎么能看出来在第一行的哪个位置有问题呢？这样浏览器的错误提示对我们调试而言并没有什么意义。纵使我们费力的找出了报错所在的位置，这个时候我们看到的也是如下样子的代码：

getJSON:function(e,t,n){return b.get(e,t,n,"json")}

但是参数e、t、n是干嘛用的我们也不知道（压缩会把变量等缩写了，从而不能见名知意）。这个时候源映射就可以起到作用了。源映射(Source Map)是一种数据格式，它存储了源代码和生成代码之间的位置映射关系源映射一般使用 .map 扩展名，源映射本质是一个 JSON 文本文档，其 MIME 类型也一般设为 application/json。
我们先直击使用方法再去详解Source Map。那么如何使用源映射呢？
就像文档中所说的那样：在js文件中加上类似于//@ sourceURL=jquery.extends.js的代码，浏览器(最新版 Chrome、Firefox 和 Edge 均支持)就会加载 jquery.extends.js 并自动计算代码的实际位置。在 Chrome 开发面板(按F12打开)的设置(按F1打开)中，可以通过勾选 "Enable Source Maps" 选项来设置是否需要加载源映射。源映射本身并不会影响代码的执行，只会在定位错误位置时被使用。

接下来，我们从头开始详细说明一下Source 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就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。
有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。这无疑给开发者带来了很大方便。

三、如何启用Source map

正如前文所提到的，只要在转换后的代码开头，加上一行就可以了。　　
//@ sourceURL=jquery.extends.js

四、如何生成Source map

现在很多生成工具都支持生成源映射，如 Uglify, Grunt, Gulp，可以参考生成工具的文档。最常用的方法是使用Google的Closure编译器。
生成命令的格式如下：

java -jar compiler.jar
--js script.js
--create_source_map ./script-min.js.map
--source_map_format=V3
--js_output_file script-min.js

各个参数的意义如下：
　

-- js：转换前的代码文件
-- create_source_map：生成的source map文件
-- source_map_format：source map的版本，目前一律采用V3。
-- js_output_file：转换后的代码文件。

其他生成方法：https://code.tutsplus.com/tut...

五、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的版本。
-file：转换后的文件名。
-sourceRoot：转换前的文件所在的目录。如果与转换前的文件在同一目录，该项为空。
-sources：转换前的文件。该项是一个数组，表示可能存在多个文件合并。
-names：转换前的所有变量名和属性名。
-mappings：记录位置信息的字符串，下文详细介绍。

六、mappings属性

下面才是真正有趣的部分：两个文件的各个位置是如何一一对应的。
关键就是map文件的mappings属性。这是一个很长的字符串，它分成三层。
　

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

举例来说，假定mappings属性的内容如下：
　mappings:"AAAAA,BBBBB;CCCCC"
就表示，转换后的源码分成两行，第一行有两个位置，第二行有一个位置。

七、位置对应的原理

每个位置使用五位，表示五个字段。
从左边算起，

　　- 第一位，表示这个位置在（转换后的代码的）的第几列。
　　- 第二位，表示这个位置属于sources属性中的哪一个文件。
　　- 第三位，表示这个位置属于转换前代码的第几行。
　　- 第四位，表示这个位置属于转换前代码的第几列。
　　- 第五位，表示这个位置属于names属性中的哪一个变量。

有几点需要说明。首先，所有的值都是以0作为基数的。其次，第五位不是必需的，如果该位置没有对应names属性中的变量，可以省略第五位。再次，每一位都采用VLQ编码表示；由于VLQ编码是变长的，所以每一位可以由多个字符构成。
如果某个位置是AAAAA，由于A在VLQ编码中表示0，因此这个位置的五个位实际上都是0。它的意思是，该位置在转换后代码的第0列，对应sources属性中第0个文件，属于转换前代码的第0行第0列，对应names属性中的第0个变量。

八、VLQ编码

最后，谈谈如何用VLQ编码表示数值。
这种编码最早用于MIDI文件，后来被多种格式采用。它的特点就是可以非常精简地表示很大的数值。
VLQ编码是变长的。如果（整）数值在-15到+15之间（含两个端点），用一个字符表示；超出这个范围，就需要用多个字符表示。它规定，每个字符使用6个两进制位，正好可以借用Base 64编码的字符表。

在这6个位中，左边的第一位（最高位）表示是否"连续"（continuation）。如果是1，代表这６个位后面的6个位也属于同一个数；如果是0，表示该数值到这6个位结束。

Continuation
|　　　　　Sign
|　　　　　|
V　　　　　V
１０１０１１

这6个位中的右边最后一位（最低位）的含义，取决于这6个位是否是某个数值的VLQ编码的第一个字符。如果是的，这个位代表"符号"（sign），0为正，1为负（Source map的符号固定为0）；如果不是，这个位没有特殊含义，被算作数值的一部分。

九、VLQ编码：实例

下面看一个例子，如何对数值16进行VLQ编码。
　　

第一步，将16改写成二进制形式10000。　　
第二步，在最右边补充符号位。因为16大于0，所以符号位为0，整个数变成100000。
第三步，从右边的最低位开始，将整个数每隔5位，进行分段，即变成1和00000两段。如果最高位所在的段不足5位，则前面补0，因此两段变成00001和00000。
第四步，将两段的顺序倒过来，即00000和00001。
第五步，在每一段的最前面添加一个"连续位"，除了最后一段为0，其他都为1，即变成100000和000001。
第六步，将每一段转成Base 64编码。

查表可知，100000为g，000001为B。因此，数值16的VLQ编码为gB。上面的过程，看上去好像很复杂，做起来其实很简单，具体的实现请看官方的base64-vlq.js文件，里面有详细的注释。

参考原文：http://www.ruanyifeng.com/blo...

云服务器服务器托管 source-map javascript实现map sourceURL map集合的使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88334.html

webpack@4.32.2研究笔记【03】- devtool

摘要：简介选项用于控制是否需要生成，以及如何生成。表示把每一个模块文件都转换为字符串，并且在每一个模块代码的尾部添加文件名，并使用执行。通过来处理已有的。优点是不需要建立和部署内网的服务器，缺点是无法直接线上源码。简介 devtool选项用于控制是否需要生成source map，以及如何生成source map。源码地址什么是source map？ source ma...

wangtdgoodluck 2019-08-23 18:01 评论0 收藏0
source-map整理

摘要：这个就是把的换成了完整信息的形式特点结合了和的特点，将每个模块包起来，并且最后添加的信息，可以知道行列，可以为模块缓存它可以更快的重建。最终的只有一份，它是对生成的进行简化，然后再次生成的。 eval 每个 module 会通过 eval() 来执行，并在后面添加 //# sourceURL 形式： webpackJsonp([1],[ function(module,export...

CoreDump 2019-08-20 16:31 评论0 收藏0
vue + webpack +chrome 调试

摘要：最近整理一下针对的调试方法。一是的调试的插件，可以直接显示组件现在的状态。最终的只有一份，它是对生成的进行简化，然后再次生成的。关于的标记是不起作用的需要手动加入命令问题描述 vue 经过webpack的打包压缩之后，通过source看到的代码已经面目全非，无法轻易对代码进行调试。最近整理一下针对vue的调试方法。一、 devtools devtools是Chrome的调试vue的...

BWrong 2019-08-23 12:49 评论0 收藏0
window onerror 各浏览器下表现总结

摘要：各浏览器下表现总结做前端错误上报，必然离不开，但在不同设备上表现并不一致，浏览器为避免信息泄露，在一些情况下并不会给出详细的错误信息，本文的目的就是通过跑一些简单的小例子，验证在不同浏览器下的具体表现。 window onerror 各浏览器下表现总结做前端错误上报，必然离不开window onerror，但window onerror在不同设备上表现并不一致，浏览器为避免信息泄露，...

rickchen 2019-08-01 17:34 评论0 收藏0
window onerror 各浏览器下表现总结

摘要：各浏览器下表现总结做前端错误上报，必然离不开，但在不同设备上表现并不一致，浏览器为避免信息泄露，在一些情况下并不会给出详细的错误信息，本文的目的就是通过跑一些简单的小例子，验证在不同浏览器下的具体表现。 window onerror 各浏览器下表现总结做前端错误上报，必然离不开window onerror，但window onerror在不同设备上表现并不一致，浏览器为避免信息泄露，...

xiongzenghui 2019-08-21 16:19 评论0 收藏0