阅读 JavaScript-TypeScript 源映射并在另一个中显示代码

Question

我有两个主要问题：

1. 如何在NodeJs 中读取或解析 js/ts 源映射文件
2. 如何从打字稿选定的代码中找到等效的 javascript 编译部分代码

---

我正在构建一个打字稿编译器，为此我正在使用打字稿 API。

编译代码后，我想让用户选择一部分 ts 代码，然后我想在 WebView 中突出显示编译后的等效代码。

那么如何找到/定位那段代码呢？

如果您需要更多信息，请告诉我。 抱歉英语不好

Answer 1

source-map是一个解析源映射的库，并为您提供一个 api 来对它们运行查询。

main.js.map

{
  "version": 3,
  "file": "main.js",
  "sourceRoot": "",
  "sources": [
    "main.ts"
  ],
  "names": [],
  "mappings": "AAKA,IAAM,KAAK,GAAM;IACf,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;CACL,CAAA"
}

示例用法

await sourcemap.SourceMapConsumer.with(mainSourceMap /* main.js.map */, null, (consumer) => {
  consumer.sources // [ 'main.ts' ]

  consumer.generatedPositionFor({
    source: "main.ts",
    line: 7,
    column: 2,
  }) // { line: 2, column: 4, lastColumn: 4 }

  consumer.originalPositionFor({
    line: 2,
    column: 4,
  })  // { source: 'main.ts', line: 7, column: 2, name: null }
})