Combine source maps of two compilation steps

Question

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

Whipstall

Answer 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.

Universe

Hello Rich, could you please provide some example how to use your tool for example with gulp? Because it's not very obvious from your documentation on github how to do it. Thank you in advance. – Nitrosyl

@Rich Harris. Thank you for this addon. It works great! – Conversationalist

Answer 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

Tesch

Well, in my use case I don't really care about the intermediate file, it's just a by-product… anyway, your answer at least tells me that this idea is technically feasible with current implementation of source maps, and there's just no tool that performs exactly this operation. Thank you. – Whipstall

Looks like Grunt can handle a 2 stage map, at least in the case of passing a single compiled Coffeescript through uglify - github.com/gruntjs/grunt-contrib-uglify – Tesch

And via those links, Powerbuild: github.com/tarruda/powerbuild minimal CommonJS browser bundler with aliasing, extensibility, and source maps – Tesch

Answer 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.

Metamathematics

No additional tooling required only if there are only two phases of code transformation. – Whipstall

@Whipstall yes, no tooling required for the setup described in this question. But generally, as long as all tools keep all sourcemaps inline, and all tools support reading inline source maps (I know not all do, but that seems like a reasonable goal), this Should All Work (tm). – Metamathematics

Answer 4

The answer seems to be a little outdated. Try remapping, @babel/core use it for transformOptions inputSourceMap. You can see how babel use it here, it encapsule a function called 'mergeSourceMap'

Fall

Answer 5

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.

Corliss