My attempts to build proper source map failed miserably: one thing kept leading to another, and in the end I hit dead-end. Since there are two code transformations (browserify + uglify), we need a recursive source map. If I use just uglify’s source map, it would point to the bundle generated by browserify, which is better than nothing, but still not the original source code. So, I needed to use the
My final, almost working variant looked like this:
browserify src/js/DataModule.js -d | exorcist -b . dist/generated.js.map >dist/generated.js && uglifyjs --compress --source-map dist/module.min.js.map --in-source-map dist/generated.js.map dist/generated.js > dist/module.min.js
Here are the problems I solved:
1. Uglifyjs won’t generate source map if input is coming form stdin. So, explicit intermediate files are required.
2. Browserify cannot generate external source maps. Uglify only understands external source maps. Exorcist tool is needed to bridge the gap.
3. Exorcist always sets ‘file’ field of the source map to ‘generated.js’. Uglifyjs complains that ‘generated.js’ is not found, unless your browserify bundle is actually named ‘generated.js’. Oh, well.
Here is the problem I did not solve: browserify puts some crazy relative paths into the source map like
..\\..\\..\\..\\Users\\ikriv\\Documents\\ivan\\dev\\work\\datamodule\\src\\js\\LoadModules.js while I am running it from
c:\users\ikriv\documents\ivan\dev\work\datamodule, so this ugly path is totally uncalled for.
I was unable to find a combination of options that would prevent it. I toyed with
cross-env NODE_PATH=... browserify..., but then gave up on the idea, since the playing time was up, and I needed to do some actual changes.
Unminified goo in Chrome, here I come!