// app.js listen server的入口文件中引入sourceMap.js
// https://github.com/mozilla/source-map
// 反解的那个文件放在和这个js同级目录
const fs = require('fs')
const path = require('path')
let sourceMap = require('source-map')
let sourcemapFilePath = path.join(__dirname,'./main.bundle.js.map')
let fixPath = (filePath)=>{
return filePath.replace(/\.[\.\/]+/,'')
}
let sourceFileMap = {}
module.exports = async(ctx,next)=>{
// 554行 17列
if(ctx.path==='/sourcemap'){
let sourceMapContent = fs.readFileSync(sourcemapFilePath,'utf-8');
let fileObj = JSON.parse(sourceMapContent);
let {sources} = fileObj
// sourceFileMap key 是修复
sources.forEach(item=>{
sourceFileMap[fixPath(item)]=item
})
let line = 554
let column = 17
const consumer = await new sourceMap.SourceMapConsumer(sourceMapContent);
let result = consumer.originalPositionFor({line,column})
let originSource = sourceFileMap[result.source]
let sourcesContent = fileObj.sourcesContent[sources.indexOf(originSource)]
let sourceContentArr = sourcesContent.split('\n');
console.log(result)
// 返回源码位置
ctx.body={sourceContentArr,sourcesContent,originSource,result}
}
return next()
}
/实践版本
// app.js listen server的入口文件中引入sourceMap.js // 反解的那个文件放在和这个js同级目录 const fs = require('fs') const path = require('path') let sourceMap = require('source-map') const { SourceMapConsumer } = sourceMap; let sourcemapFilePath = path.join(__dirname,'./client/bundle.js.map') let fixPath = (filePath)=>{ // 根据源码所在目录与当前目录的关系确定源码路径 return '../../' + filePath.replace(/\.[\.\/]+/,'') } let sourceFileMap = {} module.exports = async(ctx,next)=>{ // 554行 17列 // let sourceMapContent = fs.readFileSync(sourcemapFilePath,'utf-8'); // let fileObj = JSON.parse(sourceMapContent); // SourceMapConsumer.with(fileObj, null, consumer => { // const pos = consumer.originalPositionFor({ // line: 1, // column: 982 // }); // // console.log(pos); // }); if(ctx.path==='/sourcemap'){ let sourceMapContent = fs.readFileSync(sourcemapFilePath,'utf-8'); let fileObj = JSON.parse(sourceMapContent); let {sources} = fileObj // sourceFileMap key 是修复 sources.forEach(item=>{ sourceFileMap[fixPath(item)]=item }) let line = 1 let column = 982 const consumer = await new sourceMap.SourceMapConsumer(sourceMapContent); let result = consumer.originalPositionFor({line,column}) let originSource = sourceFileMap[result.source] let sourcesContent = fileObj.sourcesContent[sources.indexOf(originSource)] console.log(sourcesContent) let sourceContentArr = sourcesContent.split('\n'); // 返回源码位置 ctx.body={sourceContentArr,sourcesContent,originSource,result} } return next() }
参考:
https://github.com/paazmaya/shuji
https://github.com/lunnlew/reverse-sourcemap-tool
https://github.com/mozilla/source-map