时间戳

首页 > 解决方案 > 映射两个源映射

javascript - 映射两个源映射

问题描述

有没有可以在两个源地图之间映射的工具？当我sourcemap 1转换a.ts为b.js. 然后sourcemap 2当我转换b.js为c.js.

现在，我需要获取源映射，就好像我直接从 转换a.ts为c.js. 在此处输入图像描述

如上图所示，文件中的红色部分a.ts必须指向最终文件中的红色部分c.js。

是否有一些 js 工具/lib 已经可以进行这种转换？

标签： javascriptdebuggingmappingsource-maps

解决方案

好的，我找到了如何使用source-mapjs lib 做到这一点。

import {SourceMapConsumer, SourceMapGenerator} from "source-map";

const mapFrom = JSON.parse('{"version":3,"sources":["aurelia-demo.ts"],"names":[],"mappings":"AAAA;AAAA;AAAA,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,kCAAkC,CAAC;AAC1D,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,oCAAoC,CAAC;AAAA;AAAA;AAE7D,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC;AAAA,EACvB,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AAAA,MACzB,QAAQ;AAAA,EACZ,CAAC,CAAC;AAAA;AAAA,EAEF,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AAAA,IACd,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;AAAA,EAClC,CAAC;AAAA;AAAA,EAED,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AAAA,IACb,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC;AAAA,EACxB,CAAC;AACH","file":"a.js","sourcesContent":["import {SomeDemo} from \\"./components/some-demo/some-demo\\";\\r\\nimport {SomeDemo2} from \\"./components/some-demo2/some-demo2\\";\\r\\n\\r\\nexport class AureliaDemo{\\r\\n  public components : [any] = [\\r\\n      SomeDemo\\r\\n  ];\\r\\n\\r\\n  render = () => {\\r\\n    this.components.push(SomeDemo2);\\r\\n  }\\r\\n\\r\\n  rimuv = () => {\\r\\n    this.components.pop();\\r\\n  }\\r\\n}"]}');

const rawSourceMap = JSON.parse('{"version":3,"file":"fin.js","sourceRoot":"","sources":["a.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gEAAoD;AACpD,sDAAsD;AACtD,8DAA0D;AAC1D,iEAA6D;AAG7D;IAAA;QAAA,iBAYC;QAXQ,eAAU,GAAW;YACxB,oBAAQ;SACX,CAAC;QAEF,WAAM,GAAG;YACP,KAAI,CAAC,UAAU,CAAC,IAAI,CAAC,sBAAS,CAAC,CAAC;QAClC,CAAC,CAAA;QAED,UAAK,GAAG;YACN,KAAI,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC;QACxB,CAAC,CAAA;IACH,CAAC;IAZY,WAAW;QADvB,IAAA,4BAAa,EAAC,YAAY,CAAC;OACf,WAAW,CAYvB;IAAD,kBAAC;CAAA,AAZD,IAYC;AAZY,kCAAW","sourcesContent":["import * as __au2ViewDef from \'./aurelia-demo.html\';\\nimport { customElement } from \'@aurelia/runtime-html\';\\nimport {SomeDemo} from \\"./components/some-demo/some-demo\\";\\r\\nimport {SomeDemo2} from \\"./components/some-demo2/some-demo2\\";\\r\\n\\r\\n@customElement(__au2ViewDef)\\nexport class AureliaDemo{\\r\\n  public components : [any] = [\\r\\n      SomeDemo\\r\\n  ];\\r\\n\\r\\n  render = () => {\\r\\n    this.components.push(SomeDemo2);\\r\\n  }\\r\\n\\r\\n  rimuv = () => {\\r\\n    this.components.pop();\\r\\n  }\\r\\n}"]}');

const consumer = await new SourceMapConsumer(mapFrom);
const consumer2 = await new SourceMapConsumer(rawSourceMap);


var generator = SourceMapGenerator.fromSourceMap(consumer2);
generator.applySourceMap(consumer);
console.log(JSON.parse(generator.toString()));

它应该输出：

{
  version: 3,
  sources: [ 'aurelia-demo.ts' ],
  names: [],
  mappings: ';;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gEAAA;AAAA,sDAAA;AAAA,8DAA0D;AAC1D,iEAA6D;AAE7D;IAAA;QAAA,iBAYA;QAXS,eAAU,GAAW;YACxB,oBAAQ;SACX,CAAC;QAEF,WAAM,GAAG;YACP,KAAI,CAAC,UAAU,CAAC,IAAI,CAAC,sBAAS,CAAC,CAAC;QAClC,CAAC,CAAA;
QAED,UAAK,GAAG;YACN,KAAI,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC;QACxB,CAAC,CAAA;IACH,CAAA;IAZa,WAAW;QAFqC,IAAA,4BAAA,EAAA,YAAA,CAAA;OAEhD,WAAW,CAYxB;IAAA,kBAAA;CAZA,AAYA,IAAA;AAZa,kCAAW',
  file: 'fin.js',
  sourceRoot: '',
  sourcesContent: [
    'import {SomeDemo} from "./components/some-demo/some-demo";\r\n' +
      'import {SomeDemo2} from "./components/some-demo2/some-demo2";\r\n' +
      '\r\n' +
      'export class AureliaDemo{\r\n' +
      '  public components : [any] = [\r\n' +
      '      SomeDemo\r\n' +
      '  ];\r\n' +
      '\r\n' +
      '  render = () => {\r\n' +
      '    this.components.push(SomeDemo2);\r\n' +
      '  }\r\n' +
      '\r\n' +
      '  rimuv = () => {\r\n' +
      '    this.components.pop();\r\n' +
      '  }\r\n' +
      '}'
  ]
}

推荐阅读