How to use ES6 (Very Simple Example)

Compiling Javascript ES6 Code with Babel
Compiling Javascript ES6 Code with Babel

This will be a very simple tutorial on how to use, the new and far more sophisticated version of Javascript, the ES6 (or ES2015 if you prefer). Much people say ES6 is the future of Javascript, but as everybody knows, our browsers cannot run code in this format yet. Web developers are already writing Javascript in ES6 format and using transpilers to transform it into ES5 code so the browsers can read it. For those who doesn’t know, a transpiler is kind of a compiler that converts a code written in one programming language to another similar programming language, in our case from ES6 to ES5.

The reason why I decided to make it simple is because I’ve already seen lots of authors writing more complex and long tutorials involving Grunt, Browserify, JSX, and so on. You would probably spend a reasonable amount of time going through these tutorials. As opposed to them, my goal here is to get you writing ES6 code as quickly as possible, without consuming much of your time.

So let’s get started, the first thing we need is a transpiler, for this tutorial I’m going to be using Babel, to install it just run the following command:

1
npm install babel-cli -g

Now, since Babel doesn’t come with any transformations enabled, we need to explicitly tell what kind of transformation to perform, to do that we also have to install ES2015 preset:

1
npm install babel-preset-es2015 -g

Perfect! Now we’re going to need to write some ES6 code to test if Babel is working, copy the following code into a js file:

test.js

1
2
3
4
5
6
7
8
9
10
11
12
13
class MyFirstES6Class {
  constructor(message) {
    this._message = message;
  }
 
  get message() {
    return this.message;
  }
 
}
 
var myClass = new MyFirstES6Class('Hello World!!');
console.log(myClass.message);

Ok, now via terminal just navigate to your folder and run the following command to generate the compiled js:

1
babel --presets es2015 test.js --out-file compiled.js

That’s it!! If you did it right you should now have the compiled.js file containing the transformed code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { 
throw new TypeError("Cannot call a class as a function"); } }
 
var MyFirstES6Class = (function () {
  function MyFirstES6Class(message) {
    _classCallCheck(this, MyFirstES6Class);
 
    this._message = message;
  }
 
  _createClass(MyFirstES6Class, [{
    key: 'message',
    get: function get() {
      return this.message;
    }
  }]);
 
  return MyFirstES6Class;
})();
 
var myClass = new MyFirstES6Class('Hello World!!');
console.log(myClass.message);

Recommended for you

One comment on “How to use ES6 (Very Simple Example)

  1. anil

    Hi Leo,

    I tried the steps u said ….till creation of test.js file….successfully.
    when i tried the command babel –presets es2015 test.js –out-file compiled.js, it is throwing an Error: Couldn’t find preset “es2015″ relative to directory “.”

    Can you throw some light on this ?

Leave a Reply

Your email address will not be published. Required fields are marked *

Obs: Use the tag <pre lang="LANGUAGE"> to include code blocks to your comment.
Example: <pre lang="javascript"> console.log('Test'); </pre>