sourcemap反解 npm install --save-dev source-map =======>https://github.com/mozilla/source-map

// 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

发布了293 篇原创文章 · 获赞 27 · 访问量 12万+

猜你喜欢

转载自blog.csdn.net/gwdgwd123/article/details/103674480