Utilizando ES6 no Node.js com Babel.js

Igor Fontana
Blog TecSinapse
Published in
5 min readOct 13, 2016

--

ES6 e Node.js

Com a entrada do ES6, muitos querem programar em ES6. Obviamente, as vantagens fazem com que nós queiramos isto. Temos um problema para aplicar isto em Node.js. Atualmente o Node.js não suporta todas as especificações pois as implementações no seu motor ainda estão em andamento, algumas prontas, outras em testes e outras ainda em progresso.

É preciso buscar uma alternativa, uma que ofereça programar ES6 no Node.js e ainda por cima não bloquear nosso desenvolvimento em nenhum aspecto, o que mais queremos é produtividade e não o efeito ao contrário.

Antes de continuar, se você está lendo este texto sem saber o que é Node.js, recomendo ler sobre ele. Este link Guia Para Absolutos Iniciantes em Node.js pode ser útil.

Existe muita coisa boa funcionando no Node.js, por exemplo o código abaixo que está presente na própria documentação.

Observe no código acima o uso do const para a importação de uma biblioteca.

Neste outro, o uso de Arrow Functions como uma sintaxe mais elaborada.

Este código funciona atualmente com a última versão, a 6.7.0. Para mais detalhes do que funciona ou não você pode acessar node.green e visualizar o que é suportado ou não.

Outra alternativa é utilizar o comando:

node --v8-options | grep “in progress”

Isso mostrará o que ainda está sendo desenvolvido.

Babel.js e Node.js

E como utilizar de forma fácil o que não está totalmente suportado para Node.js? Babel.js é a resposta, ele é um compilador de JavaScript. Ele consegue transformar um código escrito com as especificações do ES6 em algo que o Node.js possa entender completamente. E como utilizá-lo de forma fácil e produtiva? Veja ao longo deste texto como tudo funciona.

Iniciando um projeto NPM

Npm, ou Node Package Manager, seu uso simples é direcionado para configurar os pacotes usados em seu projeto e também para inicializa-lo.

Use o comando npm init --yes em uma pasta vazia para iniciar um projeto, informe o nome do autor do projeto e um arquivo package.json será criado, ele conterá informações do seu projeto bem como suas dependências e scripts.

Caso queira deixar seu package.json mais completo, dê uma olhada na documentação aqui.

Arquivos do projeto

Na mesma pasta em que você inicializou o projeto NPM, crie um arquivo index.js.

Ele contém código ES6, inclusive com Modules que atualmente não é suportado pelo Node.js.

Crie também um arquivo config.js.

Também contém código não suportado pelo Node.js atualmente.

É importante lembrar de configurar sua IDE que estamos programando em ES6 para que não fique aparecendo mensagens de erros. Para o Intellij IDEA é necessário ir no menu “File > Settings > Languages & Frameworks > Javascript”. Mude para “ECMAScript 6” onde estiver escrito “JavaScript language version”.

Incluindo o Babel.js e executando o projeto

Inclua algumas bibliotecas referentes ao Babel.js para o escopo de desenvolvimento.

npm install --save-dev babel-cli babel-preset-env

Este código instala o babel-cli e o preset que identifica qual tipo de ambiente está sendo utilizado para a compilação do Babel.

O --save-dev faz com que os pacotes sejam instalados apenas num ambiente de desenvolvimento. Quando o projeto rodar em produção estes pacotes não serão baixados.

Para que o babel funcione é preciso de um arquivo com o nome .babelrc, crie-o na pasta raiz do projeto e coloque em seu conteúdo o seguinte código:

Com isto em mãos configure o package.json para conter o seguinte script.

Adicione as linhas acima no seu código para que fique algo parecido com isto:

Dessa forma já se pode rodar a aplicação usando:

npm run babel

Esse script será utilizado para rodar a aplicação Node a partir de um código compilado pelo Babel.js. O código compilado fica em memória, onde será utilizado pelo Node.js.

Debug da aplicação

Mude o nome do script para fazer mais sentido ao que ele realiza e acrescente o --debug para abrir a porta de debug, que por padrão é a 5858, e então aplicar um debugger nesta porta. No caso do Intellij IDEA, vá no menu “Run > Edit Configurations” e adicione uma configuração de debug.

Criação de um debugger no Intellij IDEA

Após rodar o Babel.js pelo comando do npm precisamos realizar o attach do debugger

Realizando o attach

Adicionando Nodemon

Agora você pode utilizar utilizar o Nodemon juntamente com o Babel.js para que nossa aplicação seja atualizada assim que façamos mudanças em nosso código.

npm install --save-dev nodemon

Após o Nodemon instalado, vamos modificar o script novamente para que o Node.js seja executado pelo Babel e que por sua vez seja constantemente atualizado pelo Nodemon.

Executando o script acima com o npm run babel-debug podemos programar normalmente em ES6 que estaremos com uma configuração pronta pra isso.

A desvantagem que o nodemon traz é que será preciso realizar o attach do debugger toda vez que o nodemon atualizar a aplicação.

Outra opção de debug

Há outra opção também para debugging da aplicação, caso não tenha Intellij IDEA ou outra IDE. Primeiro certifique que a versão do Node.js seja a 6.3.1, que é a versão compatível com este método.

Utilize uma aplicação chamada nvm (Node Version Manager). https://github.com/creationix/nvm. Existe também a versão para Windows: https://github.com/coreybutler/nvm-windows. Essa aplicação facilita a troca da versão do Node.js sempre que preciso.

Após se certificar que está sendo usada a versão correta, instale o babel-node-debug.

npm install --save-dev babel-node-debug

Com o debugger instalado, modifique o script para

Com a mudança do script, execute-o. Isso fará com que um navegador seja aberto automaticamente e você comece a realizar o debugging diretamente por ele.

Conclusão e indo mais longe

Acabamos de ver como pode ser interessante utilizar o Babel.js para o Node.js, com isso podemos já começar a programar muito mais que o suportado hoje. Ele é interessante também para onde quer que o ES6 não é suportado. Que tal atualizar o seu projeto para ES6? Vá mais longe e procure como utilizar o babel-polyfill onde você consegue usar mais ainda do ES6.

Se você ainda está perdido com tudo isso do ES6, recomendo um livro gratuito sobre o assunto, o livro se chama “You Don’t Know JS: ES6 and Beyond”.

Para aprender ainda mais e como controlar melhor o Nodemon, acesse o site http://nodemon.io/ ou github https://github.com/remy/nodemon.

--

--

Cyclist. Listener of EDM. CS:GO Player. Professional Web Scroller. Colour-blind. Champion of iRacing Brazil. Oh, and I also do like programming.