A simple example of using ES6 today

I congratulate everyone on the May holidays. Today I want to share the experience of using ECMAScript 6 (ES6). The motivation for writing the article was the absence of a complete step-by-step guide on the use of ES6, or rather the system of modules using the Babel transpiler. Who cares - welcome!

There are many examples of using Babel , however, when it comes to using ES6 modules, you have to google it further. In the end, I didn’t google the finished manual, even in English, so I wrote my manual. I will be extremely brief and informative.

What you need to install on your favorite linux-distribution:

sudo aptitude install nodejs #   npm sudo npm install -g babel #   ES6  ES5 sudo npm install -g browserify #    sudo npm install -g watchify #    Browserify cd path_to_sources npm install --save-dev babelify #   Babel  Browserify 

Let's write the ES6 code for the test ( full project here ):

 // src/lib.js class ES6Today { use() { console.log("Hello from a JS class!"); } } export { ES6Today }; // src/main.js import { ES6Today } from "./lib"; var es6 = new ES6Today(); es6.use(); // output: Hello from a JS class! 

The above source code does not claim to be the most useful example of using ES6, since the main goal of the guide is to show one of the ES6 compilation technologies in ES5.

Moving directly to compilation:

 watchify src/main.js -t babelify -o build/main.js 

Let us analyze the principle of the last team. The Watchify daemon starts the Browserify collector and monitors changes in the source code of the main.js file and the modules used by the main.js file. When saving changes to the source code, Watchify-daemon again starts the Browserify collector and so on until the Watchify daemon is stopped.
')
The -t flag with the value babelify says that we use the code generated by Babel with the transpiler with the default format of the modules (CommonJS) for the Browserify collector. The -o flag indicates the output single file that we connect to the HTML page.

As a result, we have a convenient way to use ES6 today.

PS And what method do you use (more interested in the front-end)?