Question

我正在编写一个工具，它将使用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生成一个源图，只要没有第二级转换，它就可以正常工作。在同一原始来源上组合多个源地图时，我完全不知道该怎么做。

任何帮助或建议都会非常值得赞赏。

Answer 1

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

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

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

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

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

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

Answer 2

对我而言，applySourceMap不起作用。当我添加一个代码片段时，它没有更新以下文件引用。对我来说，在https://github.com/mozilla/source-map的同一个库中添加SourceNode.prototype.prepend(chunk)是有效的。

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

如何从节点中的现有源图生成新的源图？

2 个答案: