Question

我的网络应用程序有两步编译过程。首先，我将CoffeeScript文件编译成JavaScript文件[1]。然后，JavaScript Closure Compiler [2]将JavaScript文件（包括来自CoffeeScript的文件和外部文件，如grunt-angular-templates中的AngularJS模板生成的文件）编译成单个最小化文件。

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

，源地图[2]由函数表示：

g(position in JavaScript) = position in minimized JS

我希望获得一个由函数组合表示的源映射：

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

Answer 1

尝试sorcery - 它的目的就是为了这个目的（我是作者，我来这里寻找相关工具的信息）。只要.map文件位于正确的位置（或内联为数据URI），您只需在生成的文件上运行sorcery，它就会找到中间源图并组成它们。

Answer 2

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

https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit?pli=1#heading=h.e8hx254xu4sa

来源地图修订版3; 多级映射说明

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

https://hacks.mozilla.org/2013/05/compiling-to-javascript-and-debugging-with-source-maps/ https://github.com/fitzgen/source-map

Answer 3

Closure Compiler现在实现--apply_input_source_maps（和--parse_inline_source_maps来启动）。这应该完全符合您在此尝试实现的目标，无需额外的工具。

Answer 4

combine-source-map包，一个Mozilla [source-map]包装器看起来像[sorcery]更受欢迎的替代品，Rich Harris had recommended（2M对32k下载）。

通过产品页面自己的描述，combine-source-map将：

添加多个文件的源地图，偏移它们，然后将它们组合成一个源地图。

在评估 merge-source-maps 后，它看起来很有希望，即使它只处理源映射中基于文件系统的源。它在使用内联源时崩溃（可能是封闭编译器对原始代码的限制）。通过一些更改，也可以正确处理内联源。

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

4 个答案: