How do source maps work on several successive build steps?

Question

I tried googling and there is some good information on how the A-to-B source cards work, but I can not find any explanation of the logistics of the A-to-B source cards.

For example, using Browserify, you can have input files of various types (for example, main.js , module-1.coffee , module-2.es6 ) and use transformations (coffeeify, 6to5ify) to change the data on the way. bundle.js contains a huge built-in data URI in the comment on the source map. 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 is in the CoffeeScript module.

Can someone help me understand the logistics of this ... All source cards are “collapsed” onto one source card at the end? Or should the devtools browser traverse the source map tree until it finds a file that has no comment on the source map? Or does it work differently?

(Maybe this material is already well documented, and I was just looking for the wrong conditions?)

Answer 1

Yes, they were crashing because the multi-level source maps are not yet standardized. It is like this :

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

See the previous section on stack overflow for more information.