根据压缩后的行列数和sourcemap反向定位源码

sourcemap文件存储的是JS压缩前和压缩后的映射关系,map文件内容本身就是个json文件。

json格式如下:
   根据压缩后的行列数和sourcemap反向定位源码

 
根据压缩后的行列数和sourcemap反向定位源码
 
根据压缩后的行列数和sourcemap反向定位源码
    version 版本号

    sources存储的是各个依赖的子文件列表
    sourcesContent存储的是各个依赖的子文件源码

    其他几个字段暂时还没研究,不过暂时也不需要用到
 

    npm上有对应的sourcemap包,可以用于解析.map文件。代码如下:
    

var fs = require('fs'),
  path = require('path'),
  sourceMap = require('source-map')

// 要解析的map文件路径./test/vendor.8b1e40e47e1cc4a3533b.js.map
var GENERATED_FILE = path.join(
  '.',
  'test',
  'vendor.8b1e40e47e1cc4a3533b.js.map'
)
// 读取map文件,实际就是一个json文件
    var rawSourceMap = fs.readFileSync(GENERATED_FILE).toString();
    // 通过sourceMap库转换为sourceMapConsumer对象
    var consumer = await new sourceMap.SourceMapConsumer(rawSourceMap);
    // 传入要查找的行列数,查找到压缩前的源文件及行列数
    var sm = consumer.originalPositionFor({
        line: 2,  // 压缩后的行数
        column: 100086  // 压缩后的列数
      });
    // 压缩前的所有源文件列表
    var sources = consumer.sources;
    // 根据查到的source,到源文件列表中查找索引位置
    var smIndex = sources.indexOf(sm.source);
    // 到源码列表中查到源代码
    var smContent = consumer.sourcesContent[smIndex];
    // 将源代码串按"行结束标记"拆分为数组形式
    const rawLines = smContent.split(/\r?\n/g);
    // 输出源码行,因为数组索引从0开始,故行数需要-1
    console.log(rawLines[sm.line - 1]);

    最后输出了对应的行源码:

根据压缩后的行列数和sourcemap反向定位源码
 

相关推荐