如何使用sourcemaps恢复原文件？

Question

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

怎么做到的？

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

Answer 1

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

CLI 工具？嗯，有 source-map-visualize which tries to find all original sources and pre-loads them into this 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);
  });
});

Answer 3

我也写了一个脚本，对我来说很方便。我会在这里分享它可能对某人有用此脚本假定 .map.(js|css) 具有类似

的结构

{
    "version": 3,
    "file": "static/js/15.80b7f5e4.chunk.js",
    "mappings": "iOAkCA,UAzBqB",
    "sources": [
        "path/to/afile.js"
    ],
    "sourcesContent": [
        "content of the file"
    ],
    "names": [
        "post",
        "useState"
    ],
    "sourceRoot": ""
}

我没有使用地图文件中的 names 和 mapping 条目，我只是将 sources 映射到 sourceContent 并重新创建了文件结构。

const fs = require("fs");
const path = require("path");

function parseIfMap(filePath, content) {
  console.log("working on:", filePath);
  if (filePath.includes(".map")) {
    const jsonContent = JSON.parse(content);
    jsonContent.sources.forEach(function (value, index) {
      const parsed = path.parse(value);
      if (parsed.dir) {
        fs.mkdirSync(parsed.dir, { recursive: true });
      }
      fs.writeFile(
        value,
        jsonContent.sourcesContent[index],
        (path) => path && console.log(value, path)
      );
    });
  }
}

function readFiles(dirname, onError) {
  fs.readdir(dirname, function (err, filenames) {
    if (err) {
      onError(dirname, err);
      return;
    }
    filenames.forEach(function (filename) {
      const filePath = dirname + path.sep + filename;
      if (fs.lstatSync(filePath).isFile()) {
        fs.readFile(filePath, "utf-8", function (err, content) {
          if (err) {
            onError(err);
            return;
          }
          parseIfMap(filePath, content);
        });
      } else {
        readFiles(filePath, parseIfMap, onError);
      }
    });
  });
}
// change with you own file path
readFiles("static", console.log);

如何使用sourcemaps恢复原文件？

How to use sourcemaps to restore the original file?

javascript

source-maps