Uglify bundled JS from Browserify

6
votes

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
2
javascriptnode.jsecmascript-6browserifyuglifyjs
Just a wild guess but maybe it is how you installed uglifify. For example, for whatever reason, I couldn't install it globally like I did browserify and watchify and make it work (thus, no -g with npm). If it helps, this is working for me in a script: NODE_ENV=production browserify -t [ babelify --presets [ es2015 react ] ] -g uglifyify scripts/index.jsx -o bundle.js I still need something else like uglifyjs for better compression though. Haven't worked that in yet. - juanitogan

2 Answers

3
votes

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.

0
votes

Perhaps you need to use the Pipe "|" in order to make multiple procedures Try this:

browserify server.js -t babelify | uglifyjs > public/bundle.js

I hope it helps, otherwise i'll be happy to keep helping you with this issue ;)

Best Regards.