如何使用源图恢复原始文件？

Question

我有一个使用Babel从ES6转换到ES5的文件.我有源图.我假设我可以使用这些资源恢复原始文件(在ES6中编写时的样子).

怎么做？

是否有CLI工具来执行此操作？

Answer 1

有一个很好的网络服务可以做到这一点：http://sokra.github.io/source-map-visualization/

• 点击“自定义”
• 选择您的*.js文件
• 选择对应的*.js.map文件
• 浏览右侧未缩小的代码

您可能不感兴趣的模块中可能有很多噪音webpack:///node_modules/。您可以尝试查找我发现，简单地搜索通常会在整个片段中webpack:///src显示实际的源代码。

Answer 2

在文本编辑器中打开源地图，您将看到它基本上只是一个简单的JSON对象。“源”字段包含所有源文件的URL /路径的数组，可以帮助您查找它们。还有一个可选的“ sourcesContent”字段，它也是一个数组，其中每个项目都在“ sources”数组中的同一索引处包含文件的内容；如果是这样，您可以在源地图中找到原始代码。

CLI工具？好吧，有一个source-map-visualize，它试图找到所有原始资源并将其预加载到此在线源地图可视化中。

Answer 3

非常简单的 NodeJS 实现，我根据自己的需要编写的。

const fs = require('fs');
const { SourceMapConsumer } = require("source-map");

fs.readFile('./example.js', 'utf8' , (err, data) => {
  if (err) return console.error(err);

  const sourceMapData = data.split('//# sourceMappingURL=data:application/json;base64,')[1];
  let buff = new Buffer.from(sourceMapData, 'base64');
  let rawSourceMap = buff.toString('ascii');

  const parsed = SourceMapConsumer(rawSourceMap);

  fs.writeFile('example.ts', parsed.sourcesContent, function (err) {
    if (err) return console.log(err);
  });
});