ES2015 – Babel 6 com Browserify e Babelify

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

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.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *