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

Tutorial: Implementing Infinite Scroll with AngularJS and ngInfiniteScroll Over the past few years the infinite scroll has became very popular across the web, developers are increasingly choosing to use infinite scroll over the conventional paginator. The advantage is that it doesn't require the user to manually go to the next page when he reaches the end of the page, it a...
AngularJS Tutorial: ui-router example Since ui-router is one of the most useful features that angular can provide I decided to write this tutorial just to show how to use it, I'm going to create a very simple application that illustrates how to create templates using ui-router states. After donwloading angular.min.js and angular-ui-r...
How to Load a JSON file in Javascript In this post I'm going to give you a very simple example of how to read a JSON file and display the data on the page. I'll be using jQuery in this example, so if you don't have it on your project don't forget to add the script. So let's get started, first we need a JSON, you probably already have...
Node.js Tutorial: Reading and Writing files Reading and writing files is a very trivial task, no matter what programming language you use you probably have already came across a situation where you had to do it, and it's not different for node.js developers, luckily node.js makes this task very easy for us, with the file system(fs) module we ...

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>