阅读 JavaScript-TypeScript source map 并在另一个中显示代码

Question

我有两个主要问题：

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

---

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

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

那段代码如何find/locate？

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

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