Frontend lindo usando Babel para rodar ES6

Publicação: 27/02/2015 | Tags: JavaScript, Node.js

Se você esta curtindo a grande evolução da nova especificação do JavaScript, o EcmaScript 6 (ou ES6) e gostaria muito de usá-lo no front-end de seus projetos, de forma cross-browser e compatível inclusive com browser antigos e principalmente utilizando fallbacks on-demand que evitam overhead de código JavaScript no client-side, então apresento a vocês o transpiler que esta se tornando muito popular chamado Babel (também conhecido pelo antigo nome 6to5).

Com ele você poderá usar os novos recursos do ES6, alguns experimentos do ES7 e também o JSX do React. Como resultado final ele compila uma versão JavaScript cross-browser para você, seu mecanismo de compilação (o transpiler) converte de forma eficiente um código ES6 para ES5 como resultado final. Esse processo de compilação você faz através de seu CLI, mas também é possível usá-lo diretamente como um plugin pro Grunt, Gulp, Sprockets, Meteor, Webpack, Makefile e mais outros.

Que tal testarmos na prática para ver como funciona? Instale-o via comando:

 npm install -g babel

Em seguida crie o seguinte código:

 class Cliente {
   constructor(nome, email) {
     this.nome = nome;
     this.email = email;
   }
   hello() {
     return `Olá ${this.nome} tudo bem?`
   }
   send() {
     return `Enviando email para ${this.email}...`
   }
 }

Acabamos de criar uma classe usando o padrão ES6 com o nome de arquivo cliente.es6, o código ficou muito lindo, não é? Para compilar esta classe usando o Babel, basta rodar esse simples comando:

 babel cliente.es6 --out-file cliente.js

Como resultado final você terá como output esse código grande, que esta em versão ES5 compatível com os principais browsers:

 "use strict";
 var _prototypeProperties = function (child, staticProps, instanceProps) { if (staticProps) Object.defineProperties(child, staticProps); if (instanceProps) Object.defineProperties(child.prototype, instanceProps); };
 var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };
 var Cliente = (function () {
   function Cliente(nome, email) {
     _classCallCheck(this, Cliente);
     this.nome = nome;
     this.email = email;
   }
   _prototypeProperties(Cliente, null, {
     hello: {
       value: function hello() {
         return "Olá " + this.nome + " tudo bem?";
       },
       writable: true,
       configurable: true
     },
     send: {
       value: function send() {
         return "Enviando email para " + this.email + "...";
       },
       writable: true,
       configurable: true
     }
   });
   return Cliente;
 })();

Sim, o código está um pouco grande e complexo, porém ele ainda está bem melhor do que usando script de fallback que carrega desnecessariamente inúmeros recursos do ES6 no client-side.

Um detalhe legal é que se você estiver usando vários códigos modularizados, o babel também permite concatenar e compilar uma pasta inteira, gerando um único código, supondo que você tem uma pasta src que contém vários códigos .es6 você precisa apenas rodar esse comando:

 babel src --out-file main.js

E outro recurso legal do Babel é que você pode deixar rodando em background um comando file watcher que recompila toda vez que um determinado arquivo sofre alteração, veja o comando:

 babel src --watch --out-file main.js

Esse post foi apenas uma demonstração mínima do poderoso Babel, se quiser aprender mais sobre ele recomendo a leitura dos seguintes links:

Frontend lindo usando Babel para rodar ES6

Compartilhe este post