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, e.g. uglify.

Answer 2

For es6 use uglify-es, it supports ES6.

npm install uglify-es -g