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

【问题标题】：Read JavaScript-TypeScript source map and reveal code in another one阅读 JavaScript-TypeScript 源映射并在另一个中显示代码
【发布时间】：2021-09-08 18:01:48
【问题描述】：

我有两个主要问题：

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

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

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

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

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

【问题讨论】：

标签： javascript node.js typescript visual-studio-code vscode-extensions

【解决方案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 }
})

【讨论】：