Wepack(1):SourceMap讲解以及使用

今天我们来讲讲定位源码的工具 Sourcemap ， 我们先讲最简单的配置，之后才补充 sourcemap 的其他属性

Sourcemap

作用

1. 可以在打包的代码直接对应相应源码 例如 vue2 , vue3
2. 可以把对应的错误上传到相关服务器

使用

1. webpack.config.js

const config = {
  entry: './src/commomjs.js', // 打包入口地址
  devtool: 'source-map',
  output: {
    filename: 'bundle.js', // 输出文件名
    path: path.join(__dirname, 'dist'), // 输出文件目录
  },
  // ...
  plugins: [
    new webpack.SourceMapDevToolPlugin({
      filename: '[name].js.map',
    }),
    // ...
  ];
}

2. commomjs.js

console.log('sourcemap');

3. 然后执行 npm run build

// bundle.js
/*! For license information please see bundle.js.LICENSE.txt */
console.log('sourcemap');
//# sourceMappingURL=main.js.map

会发现 dist 出现一个叫 main.js.map 的文件，这就是 sourcemap 生成的索引,然后格式化下，出现的结果

{
  // sourcemap 当前版本
  "version": 3,
  // 对应的dist文件
  "file": "bundle.js",
  // mappings 记录位置信息的字符串
  "mappings": ";AAAAA,QAAQC,IAAI",
  // 转换前的文件。该项是一个数组，表示可能存在多个文件合并。
  "sources": ["webpack:///./src/commomjs.js"],
  // 转换前文件的原始内容。
  "sourcesContent": ["console.log('sourcemap')"],
  // 转换前的所有变量名和属性名
  "names": ["console", "log"],
  // 转换前的文件所在的目录。如果与转换前的文件在同一目录，该项为空。
  "sourceRoot": ""
}

解析

我们看看 mappings 是怎么对应的，我先了解其中对应的意思

{
  "mappings": ";AAAAA,QAAQC,IAAI"
}

其中 ; 代表换行，, 表示列 , 从我们的代码可以看出 其中console.log('sourcemap')代表着 AAAAA,QAAQC,IAAI

那这几个代表啥意思呢 , 这其实就是 位置转换 , 大致就是下面这些

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

每一个位置都可以用 VLQ 编码 转换，形成一种映射关系。可以在下面的网站转换测试，将 AAAAA,QAAQC,IAAI 转换后的结果：

VLQ CODEC

转换后发现

[0, 0, 0, 0, 0], [8, 0, 0, 8, 1], [4, 0, 0, 4];

根据上面的规则，我们可以看出

console 这个变量对应 编码转化后 0 列 ， 第一个文件 , 转化前第 0 行 ， 转化前第 0 列 , 出现在 name 中第 1 个元素

log 这个变量对应 编码转化后 8 列 ， 第一个文件 , 转化前第 0 行 ， 转化前第 8(0为console的位置+8) 列 , 出现在 name 中第 2 个元素

source 这个变量对应 编码转化后 0 + 8 + 4(log(的长度) = 12 列 ， 第一个文件 , 转化前第 0 行 ， 转化前第 0 + 8 + 4(log(的长度) = 12 列 , 未出现在 name 所以不显示

所以可以得到上面的结论

懂得了这些我们改写下 commonjs.js

var a = 123;
console.log(123);

结果为

//bundle.js
console.log(123);
//# sourceMappingURL=main.js.map

{
  "version": 3,
  "file": "bundle.js",
  "mappings": "AACAA,QAAQC,IAAI",
  "sources": ["webpack:///./src/commomjs.js"],
  "sourcesContent": ["var a = 123;\nconsole.log(123)"],
  "names": ["console", "log"],
  "sourceRoot": ""
}

转化后得知 [0,0,1,0,0], [8,0,0,8,1], [4,0,0,4]

其中 [0,0,1,0,0] 代表 console , console 这个变量对应 编码转化后 0 列 ， 第一个文件 , 转化前第 1 行 ， 转化前第 0 列 , 出现在 name 中第 1 个元素

其中 [8,0,0,8,1] 代表 log , log 这个变量对应 编码转化后 0 列 ， 第一个文件 , 转化前第 (1(这个1为console)+0) 行 ， 转化前第 8 列 , 出现在 name 中第 2 个元素

其中 [8,0,0,8,1] 代表 123 ,source 这个变量对应 编码转化后 0 + 8 + 4(log(的长度) = 12 列 ， 第一个文件 , 转化前第 (1(这个1为console)+0+0) 行 ， 转化前第 0 + 8 + 4(log(的长度) = 12 列 , 未出现在 name 所以不显示

其实可以看出，数组的前 4 位都是相加到最后的，最后一位则代表 `name` 出现的位置

转化 + 测试

最后我们试试 4 是怎么转化成 I 的

转化规则如下

第一步，将16改写成二进制形式10000。

第二步，在最右边补充符号位。因为16大于0，所以符号位为0，整个数变成100000。

第三步，从右边的最低位开始，将整个数每隔5位，进行分段，即变成1和00000两段。如果最高位所在的段不足5位，则前面补0，因此两段变成00001和00000。

第四步，将两段的顺序倒过来，即00000和00001。

第五步，在每一段的最前面添加一个"连续位"，除了最后一段为0，其他都为1，即变成100000和000001。

第六步，将每一段转成Base 64编码。

我们一个一个试试

将 4 转化为 二进制 为 0100

补充符号位，为 01000

分割（由于前4位没有溢出，也就是不会像16一样100000），所以分割为 [01000]

补位 001000

转化为 Base 64 为 I

参考

1. SoucreMap讲解
2. JavaScript Source Map 详解
3. VLQ转化实现
4. Webpack官网