How to scroll, compile ES6 and minimize NodeJS application

Question

I am trying to deal with the browser and ES6 at the same time. I have the following main 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:

• Label this in the bundle.js file bundle.js that I can include it as a script on my website.
• Compile JS with babel to make ES6 readable by all browsers.
• Minify bundle.js to improve browser loading time.

I have a browser installed globally and I launch it with this command: browserify main.js > bundle.js

It works great. But should I run babel first? How can I complete my 3-step process and in what order (of course, mining should happen last)? Should I do all this with grunts?

Answer 1

You no longer need to use the task runner. However, use a seamless plugin like babelify from the command line, as described in 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 conversions as needed from here or somewhere else, for example. uglify .

Answer 2

For es6 use uglify-es , it supports ES6.

npm install uglify-es -g

Answer 3

Uglify ES has not been updated for a year and is not supported and probably will not work. I suggest using Terser with a plugin like uglifyify, to install uglifyfy do the following

 npm i uglifyfy 

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 uglify main.js > bundle.js