ECMAScript 6 is the last version of the ECMAScript standard, this standard serves as the basis for the implementation of JavaScript. ES6 adds some interesting features to JavaScript, such as: Class Definition, Default Arguments in Functions, Constants, etc. (You can find some of these features on this link).

Although it was finalized in 2015, some browsers still show incompatibility with the new standard, and it is precisely on how to lessen these problems that I intend to speak in this post.

Currently, there is a type of compiler called transpiler, which basically takes a source code from one programming language and translates to another. Following this concept came some libs that translate the JavaScript code in ES6 standard for ES5, lowering incompatibility issues, and allowing you to use the key features of the new standard. The libs I tested were google Traceur Compiler and Babel.

Traceur Compiler

You can use the Traceur Compiler in 2 ways:

• Including the direct lib on the page and the code will be automatically transpiled to ES5 when loading the page. To use this way, just include the files like this:

<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
<script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>

The traceur.js file is the compiler (transpiler), BrowserSystem.js, and bootstrap.js are responsible for applying the compiler to the page’s JavaScript.

• Compiling the code in ES6 using Node:
  • After cloning the repository run the command to compile your JS file:

  ./traceur --out out/meu_arquivo.js --script meu_arquivo.js

The out folder is where the transpiled file from ES6 to ES5 will be.

A code like:

const a = "1";

function foo(bar=true){
	console.log(bar);
}

It would be compiled as follows:

$traceurRuntime.ModuleStore.getAnonymousModule(function() {
  "use strict";
  var a = "1";
  function foo() {
    var bar = arguments[0] !== (void 0) ? arguments[0] : true;
    console.log(bar);
  }
  return {};
});

You can also test code compilation in real time on this link.

Babel JS

Babel is also very easy to use and has several famous companies that use it, some of them are: Facebook, Netflix, Yahoo, Paypal, Spotify and several others.

To install Babel, you will need to have Node.js and npm installed. The installation of Babel can be done with this command:

npm install -g babel

Now you can run Babel like this:

babel script.js --out-file script-compiled.js

Where script.js is the file with the ES6 standard and script-compiled.js will be the transpiled file for ES5.

One advantage of Babel is the readability of the generated code. For example:

• Original script

class Poligono {
  constructor(altura, largura) {
    this.altura = altura;
    this.largura = largura;
  }
}

• Compiled script

"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Poligono = function Poligono(altura, largura) {
  _classCallCheck(this, Poligono);

  this.altura = altura;
  this.largura = largura;
};

Try it yourself through the online transpiler on this link

Conclusion

It is not necessary to wait for all browsers to be compatible with the ES6 to start developing in this standard, the transpilators are there to help us.

If you know of another tool or lib of type, share in the comments below.