如何使用sourcemaps恢复原始文件？

Question

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

它是如何做到的？

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

Answer 1

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

CLI工具？嗯，有一个source-map-visualize，它试图找到所有的原始源，并将它们预加载到这个online source map visualization中。

Answer 2

非常简单的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);
  });
});