根據壓縮後的行列數和sourcemap反向定位源碼

sourcemap文件存儲的是JS壓縮前和壓縮後的映射關係，map文件內容自己就是個json文件。

json格式以下：
   

 

 

    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]);

    最後輸出了對應的行源碼：