源码解析不成功

[StarRain-L]

在查看源码的时候,sourcemap.js文件中的loadSourceMap传的参数fileName,相比demo中的fileName不一样(下图),造成查看源码不成功,请问为什么出现这种情况,怎么解决呢?

[xy-sea]

抱歉 刚看到你的问题 查看源码功能需要使用项目打包后的文件 如web-see-demo中的案例，读取的是dist文件中.map文件，在开发环境中该功能是无效的，造成fileName读取的不对，以下是web-see-demo的打印信息

[StarRain-L]

我运行web-see-demo项目可以查看源码,然后完全参考web-see-demo项目,自己的项目npm引入web-see,把web-see-demo项目中相关的文件sourcemap.js也引进来,其它功能都好使,只是在查看源码的时候fileName文件不对,我上图的demo就是web-see-demo项目的fileName地址,我对比两个项目fileName的地址不一样,不知道为什么会这样,麻烦告诉一下查看源码应该怎么实现呢?

[xy-sea]

源码定位这块 做了一些优化，我也遇到了一些解析不了的问题，主要情况有两种，
一是要解析的是三方依赖，文件路径带node_modules，这种是解析不了的
二是文件的路径多了 /./的情况，如 webpack://web-see/./src/main.js
https://github.com/xy-sea/web-see/blob/main/test/src/utils/sourcemap.js，代码如下

if (result.source && result.source.includes('node_modules')) {
  // 三方报错解析不了，因为缺少三方的map文件，比如echart报错 webpack://web-see/node_modules/.pnpm/[email protected]/node_modules/echarts/lib/util/model.js
  return Message({
    type: 'error',
    duration: 5000,
    message: `源码解析失败: 因为报错来自三方依赖，报错文件为 ${result.source}`,
  });
}

let index = sources.indexOf(result.source);

// 未找到，将sources路径格式化后重新匹配 /./ 替换成 /
// 测试中发现会有路径中带/./的情况，如 webpack://web-see/./src/main.js
if (index === -1) {
  let copySources = JSON.parse(JSON.stringify(sources)).map(item =>
    item.replace(/\/.\//g, '/')
  );
  index = copySources.indexOf(result.source);
}
console.log('index', index);
if (index === -1) {
  return Message({
    type: 'error',
    duration: 5000,
    message: `源码解析失败`,
  });
}
let code = sourcesContent[index];