Uglify bundled JS from Browserify

Question

I have the following modules installed:

• babelify
• babel-preset-es2015
• browserify
• uglifyify

Now I have a core file server.js which contains ES6 javascript. I can convert the ES6 to ES5 and bundle the code for browsers with the following command:

browserify server.js -o ./public/bundle.js -t [ babelify --presets [es2015] ]

But now I want to get uglifyify minifying the code and adding a source map. I can't get this working, I just can't work out the correct command. I've tried the following:

browserify server.js -t uglifyify -t [ babelify --presets [es2015] ] -o ./public/bundle.js

browserify server.js -o ./public/bundle.js -t [ uglifyify, babelify --presets [es2015] ]

browserify server.js uglifyify -o ./public/bundle.js -t [ babelify --presets [es2015] ]

and even without babel:

browserify server.js -o ./public/bundle.js -t uglifyify
browserify server.js -t uglifyify -o ./public/bundle.js

Answer 1

It's not enough to have uglifyify installed locally - you also need to install uglify-es globaly, since it's used by the uglifyify. You install it like so:

npm i -g uglify-es

Then you use it like so:

browserify server.js -o ./public/bundle.js -t uglifyify

Using it with babelify

If you also need babelify here's how to do it:

browserify server.js -o ./public/bundle.js -t uglifyify -t babelify

Using uglify-es directly

You can also skip using uglifyify altogether by using uglify-es directly like so:

browserify server.js | uglifyjs -c > ./public/bundle.js

The sole purpose of uglifyify is so that uglify-es can be used as a browserify transform.