Vivemos um momento de transição no mundo Javascript com a aprovação do ES2015 ou ES6, porém, este novo padrão ainda não é suportado totalmente por todos os navegadores, para administrar este problema foi criado o Babel, um compiler Javascript, que além de suas muitas funções, nesta versão 6, pode transformar ES2015 em ES5.
Instalando
Para este tutorial, iremos utilizar o Babelify, um módulo npm feito para funcionar juntamente com o Browserify, outro módulo que empacota todos os seus requires para serem usados no browser.
Para instalar ambos, é necessário ter instalado em seu computador o Node.js, que juntamente instala o npm (Node Package Manager) ou Gerenciador de Pacotes Node.
Navegue via terminal até a raiz do seu projeto e digite o comando abaixo:
O comando irá instalar o Browserify, Babelify e o plugin es2015 do Babel, responsável por cuidar da conversão de ES2015 para ES5, além de salvá-los na lista de devDependencies do seu package.json. Nesta versão do Babel (6) nenhum plugin é instalado por padrão, por isso precisamos instalar ele à parte, você pode encontrar a lista completa de plugins aqui.
Configurando
Script
Para configurarmos via script, abra o seu arquivo package.json, crie a sessão scripts e nela vamos adicionar o código que irá transformar seu código ES2015 para ES5:
Explicando um pouco mais sobre o código acima:
./src/meuarquivo.js – Este é o local do seu arquivo JS escrito nos padrões ES2015.
-t [ babelify –presets [ es2015 ] ] – A option -t se refere à transform, que utiliza de módulos de transformação terceiros, neste caso o Babelify. Passamos o módulo que iremos utilizar e passamos uma option para o módulo (–presets), nesta option listamos os plugins que iremos utilizar do Babel, que será o es2015.
-o ./dist/meunovoarquivo.js – A option -o se refere à output, aqui passamos o destino do nosso arquivo, que será gerado após a transformação.
Grunt
Podemos utilizar também o Grunt, um Task Runner de Javascript, para realizarmos a transformação do arquivo. Para isso é necessário instalarmos mais um módulo npm, o grunt-browserify (contando que você já tenha instalado em seu projeto os módulos grunt e grunt-cli).
Novamente na raiz do seu projeto via terminal, digite o comando abaixo:
Após a instalação, vá em seu arquivo Gruntfile.js e adicione no config:
Depois, carregue o módulo e registre uma task:
Conclusão
Ainda estamos iniciando essa nova fase de ES2015, porém já podemos perceber que o futuro espera muitas novidades e um crescimento maravilhoso do Javascript.