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

Question

我的Web应用程序有两步编译过程.首先,我将CoffeeScript文件编译成JavaScript文件[1].然后,JavaScript grunt-angular-templatesClosure Compiler [2] 将JavaScript文件(来自CoffeeScript的文件和外部的文件,例如由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

尝试巫术 - 它的设计正是为了这个目的(我是作者,我来到这里寻找有关相关工具的信息).只要.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