Javascript 合并两个编译步骤的源映射

我的web应用程序有两步编译过程。首先，我将CoffeeScript文件编译成JavaScript文件[1]。然后，JavaScript文件（既有来自CoffeeScript的文件，也有外部文件，如通过

grunt angular templates

）从AngularJS模板生成的文件）由Google Closure Compiler[2]编译成一个最小化的文件

CoffeeScript ---[1]---> JavaScript --[2]--\
                                           \->
AngularJS templates --> JavaScript ----------> single minimized JS file
                                           /->
                    other JS files -------/

步骤[1]和[2]都会生成源映射

是否可以将这些源映射合并到单个源映射中，从而允许我从运行最小化JS文件的web浏览器调试CoffeeScript文件

换句话说：假设源映射[1]由一个函数表示：

f(position in CoffeeScript) = position in JavaScript

g(position in JavaScript) = position in minimized JS

源映射[2]由一个函数表示：

f(position in CoffeeScript) = position in JavaScript

g(position in JavaScript) = position in minimized JS

我想得到一个由函数组合表示的源映射：

h(position in CoffeeScript) = g(f(position in CoffeeScript)) = 
                            = position in minimized JS

---

从源映射规范（以及其他讨论）中我可以看出，多级映射尚未定义

源地图第3版； 多级映射注释

可能有人开发了一些工具来解决这个问题，可能是在Github存储库中。当然，您既有生成此类地图的工具，也有可以使用它们的浏览器

---

试试看——它正是为这个目的而设计的（我是作者，我来这里是想了解相关工具的信息）。只要

.map

文件位于正确的位置（或作为数据URI内联），您只需在生成的文件上运行

巫术

，它就会找到中间源映射并组合它们。

闭包编译器现在实现

--应用输入源映射

（和

--解析内联源映射

以启动）。这正是您想要实现的，不需要额外的工具。

该软件包，Mozilla[source map]包装器看起来像是[sorcery]更受欢迎的替代品，如（2M vs.32k下载）

根据产品页面自己的描述，combine source map将：

添加多个文件的源映射，偏移它们，然后将它们合并到一个源映射中

---

在评估合并源映射后，它看起来很有希望，尽管它只处理源映射中基于文件系统的源。它在使用内联源代码时崩溃（可能是闭包编译器原始代码的限制）。只需做一些更改，就可以正确处理内联源代码。

好吧，在我的用例中，我并不真正关心中间文件，它只是一个副产品……无论如何，您的回答至少告诉我，这个想法在当前源代码映射的实现中在技术上是可行的，没有一种工具可以精确地执行这个操作。谢谢。看起来，

Grunt

可以处理两个阶段的映射，至少在通过

uglify

传递单个编译的

Coffeescript

的情况下，并且通过这些链接，Powerbuild:

最小CommonJS浏览器绑定器具有别名、可扩展性、，和源代码映射

只有在代码转换只有两个阶段时才需要额外的工具。@liori是的，本问题中描述的设置不需要工具。但是，一般来说，只要所有工具都保持所有源代码地图的内联，并且所有工具都支持读取内联源代码地图（我知道不是所有工具都支持，但这似乎是一个合理的目标），这一切都应该是行得通的（tm）。您好，Rich，您能否提供一些示例，说明如何使用您的工具，例如gulp？因为从您在github上的文档中不太清楚如何做到这一点。“提前谢谢你。”里奇·哈里斯。谢谢你的这个插件。它工作得很好！