merge-source-map

英文 | 中文

合并多个源映射。

安装

cargo add sourcemap merge-source-map

用法

这里我会用一个例子来告诉你如何使用它。

要求

假设你现在有一个名为 index.ts 的文件

function sayHello(name: string) {
  console.log(`Hello, ${name}`);
}

首先使用 tsc(带有 sourceMap 和 inlineSources 选项) 编译它到 index.js

function sayHello(name) {
  console.log("Hello, ".concat(name));
}

同时，将获得一个名为 index.js.map 的文件

{
  "version": 3,
  "file": "index.js",
  "sourceRoot": "",
  "sources": [
    "index.ts"
  ],
  "names": [],
  "mappings": "AAAA,SAAS,QAAQ,CAAC,IAAY;IAC5B,OAAO,CAAC,GAAG,CAAC,iBAAU,IAAI,CAAE,CAAC,CAAC;AAChC,CAAC",
  "sourcesContent": [
    "function sayHello(name: string) {\n  console.log(`Hello, ${name}`);\n}\n"
  ]
}

然后将编译后的 index.js 产品传递给 swc 进行压缩，并获得压缩产品和另一个名为 minify.js.map 的文件

function sayHello(o){console.log("Hello, ".concat(o))}

{
  "version": 3,
  "file": "minify.js",
  "sourceRoot": "",
  "sources": [
    "index.js"
  ],
  "names": [
    "sayHello",
    "name",
    "console",
    "log",
    "concat"
  ],
  "mappings": "AAAA,SAASA,SAASC,CAAI,EAClBC,QAAQC,GAAG,CAAC,UAAUC,MAAM,CAACH,GACjC",
  "sourcesContent": [
    "function sayHello(name) {\n    console.log(\"Hello, \".concat(name));\n}\n"
  ]
}

那么如何合并两个源映射呢？

合并源映射

use merge_source_map::merge;
use sourcemap::SourceMap;

fn main() {
    let sourcemap1 = r#"{
        "version": 3,
        "file": "index.js",
        "sourceRoot": "",
        "sources": [
          "index.ts"
        ],
        "names": [],
        "mappings": "AAAA,SAAS,QAAQ,CAAC,IAAY;IAC5B,OAAO,CAAC,GAAG,CAAC,iBAAU,IAAI,CAAE,CAAC,CAAC;AAChC,CAAC",
        "sourcesContent": [
          "function sayHello(name: string) {\n  console.log(`Hello, ${name}`);\n}\n"
        ]
    }"#;
    let sourcemap2 = r#"{
        "version": 3,
        "file": "minify.js",
        "sourceRoot": "",
        "sources": [
          "index.js"
        ],
        "names": [
          "sayHello",
          "name",
          "console",
          "log",
          "concat"
        ],
        "mappings": "AAAA,SAASA,SAASC,CAAI,EAClBC,QAAQC,GAAG,CAAC,UAAUC,MAAM,CAACH,GACjC",
        "sourcesContent": [
          "function sayHello(name) {\n    console.log(\"Hello, \".concat(name));\n}\n"
        ]
    }"#;

    // merge sourcemap
    let merged = merge(
        vec![
            SourceMap::from_reader(sourcemap1.as_bytes()).unwrap(),
            SourceMap::from_reader(sourcemap2.as_bytes()).unwrap(),
        ],
        Default::default(),
    );
    let mut buf = vec![];
    merged.to_writer(&mut buf).unwrap();
    let merged = String::from_utf8(buf).unwrap();
}

合并后的源映射

{
  "version": 3,
  "sources": [
    "index.ts"
  ],
  "sourcesContent": [
    "function sayHello(name: string) {\n  console.log(`Hello, ${name}`);\n}\n"
  ],
  "names": [],
  "mappings": "AAAA,SAAS,SAAS,CAAY,EAC5B,QAAQ,GAAG,CAAC,UAAA,MAAA,CAAU,GACxB"
}

您可以在 这里查看结果。

许可证

MIT