Combine source maps of two compilation steps

问题:

I've got a two-step compilation process for my web application. Firstly, I compile CoffeeScript files into JavaScript files [1]. Then the JavaScript files (both ones that come from CoffeeScript, and external ones, like produced from AngularJS templates by grunt-angular-templates) are compiled by Google Closure Compiler [2] into a single minimized file.

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

Both steps [1] and [2] produce source maps.

Is it possible to combine these source maps into a single source map that would allow me to debug CoffeeScript files from a web browser that runs the minimized JS file?

In other words: let say the source map [1] is represented by a function:

f(position in CoffeeScript) = position in JavaScript

and the source map [2] is represented by a function:

g(position in JavaScript) = position in minimized JS

I'd like to get a source map which is represented by a function composition:

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

回答1:

Try sorcery - it's designed for exactly this purpose (I'm the author, I came here looking for info on related tools). As long as the .map files are in the correct location (or inlined as data URIs), you just run sorcery on the generated file and it will locate the intermediate sourcemaps and compose them.

回答2:

As best I can tell from the source map specification (and other discussions), multilevel mapping has not yet been defined

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

Source Maps Revision 3; Multi-level Mapping Notes

Someone may have developed some tools to address this, maybe in a Github repository. Of course you have both the tools to generate such maps, and browsers that can use them.

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

回答3:

Closure Compiler now implements --apply_input_source_maps (and --parse_inline_source_maps to boot). That should do exactly what you're trying to achieve here, no additional tooling required.

回答4:

The combine-source-map package, a Mozilla [source-map] wrapper looks like a more popular alternative to [sorcery], as Rich Harris had recommended (2M vs. 32k downloads).

By the product page's own description, combine-source-map will:

Add source maps of multiple files, offset them and then combine them into one source map.

After evaluating merge-source-maps it looks promising, even though it only handles file system-based sources in source maps. It crashes when using inline sources (may be a limitation of the original code from closure compiler). With a few changes, it can be made to properly handle inline sources, as well.