O ECMAScript 6 é a ultima versão do padrão ECMAScript, este padrão serve de base para a implementação do JavaScript. O ES6 adiciona algumas features interessantes ao JavaScript, como: Definição de Classe, Argumentos padrões em funções, Constantes, etc. (Você pode encontrar algumas dessas features nesse link).

Apesar de ter sido finalizado em 2015, alguns browsers ainda apresentam incompatibilidade com o novo padrão, e é justamente sobre como diminuir estes problemas que pretendo falar nesse post.

Atualmente, existe um tipo de compilador chamado transpilador(transpiler), que basicamente pega um código-fonte de em uma linguagem de programação e traduz para outra. Seguindo este conceito surgiram algumas libs que traduzem o código JavaScript no padrão ES6 para o ES5, diminuindo problemas de incompatibilidade e permitindo que você possa utilizar os principais recursos do novo padrão. As libs que testei foram a Traceur Compiler, da google, e a Babel.

Traceur Compiler

Você pode utilizar o Traceur Compiler de 2 formas:

• Incluindo a lib direto na página e o código será automaticamente transpilado para o ES5 ao carregar a página. Para utilizar dessa forma basta incluir os arquivos assim:

<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>

O arquivo traceur.js é o compilador (transpilador), o BrowserSystem.js e bootstrap.js são responsáveis por aplicar o compilador ao JavaScript da página.

• Compilando o código em ES6 utilizando o Node:
  • Após clonar o repositório execute o comando para compilar o seu arquivo JS:

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

A pasta out é onde ficará o arquivo transpilado de ES6 para ES5.

Um código como:

const a = "1";

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

Ficaria assim compilado:

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

Você também pode testar em tempo real a compilação do código neste link.

Babel JS

O Babel também é muito fácil de usar e possui várias empresas famosas que o utilizam, alguma destas são: Facebook, Netflix, Yahoo, Paypal, Spotify e várias outras.

Para instalar o Babel, você irá precisar ter o Node.js e npm instalado. A instalação do Babel pode ser feita com essa comando:

npm install -g babel

Agora você pode executar o Babel assim:

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

Sendo que o script.js é o arquivo com o padrão ES6 e o script-compiled.js será o arquivo transpilado para o ES5.

Uma vantagem do Babel é a legibilidade do código gerado. Por exemplo:

• Script original

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

• Script compilado

"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;
};

Tente você mesmo através do transpilador online neste link

Conclusão

Não é necessário esperar que todos os browsers sejam compatíveis com o ES6 para começar a desenvolver neste padrão, os transpiladores estão aí para nos ajudar.

Se você conhece outra ferramenta ou lib do tipo, compartilhe nos comentários abaixo.