ES2015 – Babel 6 com Browserify e Babelify - Tableless - Website com artigos e textos sobre Padrões Web, Design, Back-end e Front-end tudo em um só lugar.
por Renato Augusto Gama dos Santos 23/11/2015 ~ 2 min. / 404 palavras
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.
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.
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.
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:
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.