如何从节点中的现有源映射生成新的源映射？答案

【问题标题】：How can I generate new sourcemap from existing sourcemap in node?如何从节点中的现有源映射生成新的源映射？
【发布时间】：2013-10-21 13:38:04
【问题描述】：

我正在编写一个工具，它将使用 browserify 转换在许多 JavaScript 文件的顶部和底部添加几行。我试图弄清楚如何生成包含原始源转换以及删除由我的附加行创建的偏移量的源映射。例如：

# original source file - test.coffee
console.log "test"

这是使用coffeescript编译器转换成

// Generated by CoffeeScript 1.6.3
(function() {
      console.log("test");

}).call(this);

/*
//@ sourceMappingURL=test.map
*/

coffeescript 编译器还提供了一个 sourceMappingURL，它指向一个类似的映射

{
  "version": 3,
  "file": "test.js",
  "sourceRoot": "",
  "sources": [
    "test.coffee"
  ],
  "names": [],
  "mappings": ";AAAA;CAAA,CAAA,CAAA,GAAA,CAAO;CAAP"
}

我需要通过前后添加几行来修改 JavaScript 文件输出。

my.instrumentation.line(1);
my.instrumentation.line(2);
// Generated by CoffeeScript 1.6.3
(function() {
      console.log("test");

}).call(this);
my.instrumentation.line(8);
my.instrumentation.line(9);

我需要弄清楚如何使用coffeescript编译器提供的映射文件来映射我的更改，并通过coffeescript编译器，一直映射到原始coffeescript源。

目前，只要没有额外的源映射可以使用，我就可以进行此源映射。例如，如果我从 JS 而不是 CS 开始，我可以使用 Thorsten Lorzen's inline-source-map library 生成源映射，只要没有进行第二级转换，它就可以正常工作。在同一原始源上组合多个源映射时，我很困惑该怎么做。

任何帮助或建议将不胜感激。

【问题讨论】：

你见过Mozilla's source maps library吗？在节点中工作，可能满足您的需求？

标签： javascript coffeescript browserify source-maps

【解决方案1】：

我需要弄清楚如何使用coffeescript编译器提供的映射文件来映射我的更改，并通过coffeescript编译器，一直映射到原始coffeescript源。

使用 Mozilla source-map 项目提供的 API。

使用applySourceMap 方法。它执行以下操作：

将源文件的 SourceMap 应用到 SourceMap。使用提供的 SourceMap 重写到提供的源文件的每个映射。注意：生成的映射的分辨率是此映射和提供的映射的最小值。

和allGeneratedPostionsfor 方法。它执行以下操作：

返回所提供的原始源、行和列的所有生成的行和列信息。如果未提供任何列，则返回与我们正在搜索的行或具有任何映射的下一个最近行对应的所有映射。否则，返回与给定行对应的所有映射以及我们正在搜索的列或具有任何偏移量的下一个最近的列。

【讨论】：

【解决方案2】：

对我来说 applySourceMap 不起作用。当我添加一个 sn-p 时，它没有更新以下文件引用。对我来说，在同一个库 https://github.com/mozilla/source-map 前面加上 SourceNode.prototype.prepend(chunk) 有效。

https://gist.github.com/prumand/73ae1a01d22029d7969ce8a5dcaa453d

【讨论】：