Tableless

Busca Menu

ES2015 – Babel 6 com Browserify e Babelify

Seja o primeiro a comentar por

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:

npm install --save-dev browserify babelify babel-preset-es2015

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:

"build-browserify": "browserify ./src/meuarquivo.js -t [ babelify --presets [ es2015 ] ] -o ./dist/meunovoarquivo.js"

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:

npm install --save-dev grunt-browserify

Após a instalação, vá em seu arquivo Gruntfile.js e adicione no config:

browserify: {
    dist: {
        options: {
            "transform": [ ["babelify", { "presets": ["es2015"] }] ]
        },
        files: {
            './dist/meunovoarquivo.js': ['./src/meuarquivo.js']
        }
    }
}

Depois, carregue o módulo e registre uma task:

grunt.loadNpmTasks('grunt-browserify');
grunt.registerTask('default', ['browserify']);

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.

Publicado no dia