Question

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

怎么做？

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

Answer 1

在文本编辑器中打开源地图，你会发现它主要只是一个简单的JSON对象。 “sources”字段包含一系列指向所有源文件的URL /路径，可帮助您找到它们。还有一个可选的“sourcesContent”字段，它也是一个数组，其中每个项目包含“sources”数组中相同索引处的文件的内容;如果是这样，你可以在源地图中找到原始代码。

CLI工具？好吧，有source-map-visualize试图查找所有原始资源并将其预先加载到此online source map visualization。

Answer 2

请参阅Shuji，它可以复制原始文件：

https://www.npmjs.com/package/shuji

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);
  });
});

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

3 个答案: