Browserify, Uglify, and Dissatisfy

I needed to make relatively minor changes to a JavaScript project created by someone else. They use minimized files, but I found that they don’t have a source map, they just click “unminify” in Chrome and are happy with the resulting goo. The project uses npm, browserify, and uglifyjs.

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 --in-source-map feature.

My final, almost working variant looked like this:

browserify src/js/DataModule.js -d | exorcist -b . dist/ >dist/generated.js && uglifyjs --compress --source-map dist/ --in-source-map dist/ 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!

Leave a Reply

Your email address will not be published. Required fields are marked *