pc官方网站,wordpress 4.9.3,免费的软件下载大全安装,赵艳红网站建设规划今天我们来讲讲定位源码的工具 Sourcemap #xff0c; 我们先讲最简单的配置#xff0c;之后才补充 sourcemap 的其他属性
Sourcemap
作用
可以在打包的代码直接对应相应源码 例如 vue2 , vue3可以把对应的错误上传到相关服务器
使用
webpack.config.js
const config …今天我们来讲讲定位源码的工具 Sourcemap 我们先讲最简单的配置之后才补充 sourcemap 的其他属性
Sourcemap
作用
可以在打包的代码直接对应相应源码 例如 vue2 , vue3可以把对应的错误上传到相关服务器
使用
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,}),// ...];
}commomjs.js
console.log(sourcemap);然后执行 npm run build
// bundle.js
/*! For license information please see bundle.js.LICENSE.txt */
console.log(sourcemap);
//# sourceMappingURLmain.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);
//# sourceMappingURLmain.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)00) 行 转化前第 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
参考
SoucreMap讲解JavaScript Source Map 详解VLQ转化实现Webpack官网
