How do source maps work over multiple, consecutive build steps?

Question

I've tried googling, and there's some good info about how A-to-B source maps work, but I can't find any explanation of the logistics of A-to-B-to-C source maps.

For example, with Browserify it's possible to have input files of different types (like main.js, module-1.coffee, module-2.es6), and use transforms (coffeeify, 6to5ify) to modify data on the way in. The final bundle.js contains a huge inline data URI in a source map comment. And it works – if some line in bundle.js throws an error, then devtools shows me the original source file and line number, even if it's in a CoffeeScript module.

Can anyone help me understand the logistics of this... Do all the sourcemaps get 'collapsed' into a single source map at the end? Or does the browser devtools have to traverse a tree of source maps until it finds a file that doesn't have a source map comment? Or does it work some other way?

(Maybe this stuff is already well documented and I'm just googling the wrong terms?)

Answer 1

Yes, they're collapsed, as multilevel source maps are not standartized yet. It goes like this:

var gen = SourceMapGenerator.fromSourceMap(new SourceMapConsumer(jsToMinMap));
gen.applySourceMap(new SourceMapConsumer(coffeeToJsMap));
var map = gen.toJSON();

Some more info in the previous topic on Stack Overflow.