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