How to browserify, compile ES6 and minify NodeJS application

Question

I am trying to get to grips with browserify and ES6 simultaneously. I have the following basic Node files:

main.js

var foo = require('./foo.js');
var x = foo.math(200);
console.log(x);

foo.js

exports.math = (n)=>{ 
  return n * 111;
};

Now I want to do the following:

• Browserify this into a file bundle.js so I can include it as a script in my website
• Compile the JS using babel to make the ES6 readable by all browsers
• Minify bundle.js to improve load times in the browser

I have browserify installed globally and I run that with this command: browserify main.js > bundle.js

Works great. But should I be running babel first? How do I complete my 3 step process and in what order (of course minification will have to happen last)? Should I be doing this all with grunt?

Answer 1

It shouldn't be necessary anymore to use a task runner. However, use a neat plugin like babelify from command line as described in its README.md here .

npm install --save-dev browserify babelify babel-preset-es2015

browserify script.js -o bundle.js \
    -t [ babelify --presets es2015 ] 

And add other transforms as needed from here or any where else, eg uglify .

Answer 2

For es6 use uglify-es , it supports ES6.

npm install uglify-es -g

Answer 3

Uglify ES has not been updated in a year and is not maintained and will probably not work. I suggest using Terser with a plugin like uglifyify run the following to install uglifyify

npm i uglifyify

as of 2018 babelify needs @babel/core (babel 7) and a preset like @babel/preset-env

Install them like this:

npm i babelify @babel/core @babel/preset-env

Finally

browserify \
-t [ babelify --presets [[ @babel/preset-env]]  \
-g uglifyify main.js > bundle.js