Usando todos os recursos do ES6 no NodeJs com Babel

Hudson Brendon
Oct 2 · 3 min read

Boa parte dos recursos do ES6 ainda não é suportado de forma nativa pelo NodeJS, algo que podemos contornar com a utilização de transpilers como o babel, irei exemplificar aqui a utilização e configuração do mesmo em um projeto NodeJS utilizando ExpressJS.

Configurando o projeto

Começaremos criando um projeto bem básico para melhor exemplificar as configurações e funcionamento do node com ES6 via babel, para isso execute:

$ yarn init -y

O comando acima irá criar um arquivo chamado package.json com alguns informações básicas como nome do projeto, versão, etc.

Utilizaremos o ExpressJS como framework no projeto, para isso precisamos instalar o mesmo com o comando abaixo:

$ yarn add express

Para facilitar nosso trabalho, iremos instalar o nodemon, que atualiza nosso projeto sempre que algum arquivo é alterado. Para isso execute:

$ yarn add nodemon -D

No mesmo diretório onde o package.json foi criado, crie um arquivo chamado server.js com o conteúdo abaixo:

O arquivo acima cria uma constante app que recebe uma instância do express, executando o mesmo na porta 3000 do nosso localhost. Para testarmos, execute o comando abaixo e veja o erro que acontece:

$ node server.js

O node levanta uma excessão do tipo SyntaxError na primeira linha onde importamos o express, isso acontece por que as palavras chaves **import** e **from** não são reconhecidas nativamente no node. É para isso que utilizaremos o babel, que irá disponibilizar esses novos recursos do ES6 em nossa aplicação.

Instalando o babel

O babel faz o papel de transpiler, ou seja, ele converte o nosso código ES6 em um código que o node consiga entender. Para instalar, começaremos executando o comando abaixo:

$ yarn add babel-cli -D

Esse primeiro comando instala o cli do babel, é através dele que utilizaremos o babel via linha de comando.

O próximo comando, instalará um preset, o babel utiliza os presets como base para transpilar o nosso código em uma versão especificar do javascript, para uma que o node consiga entender, para isso execute:

$ yarn add babel-preset-es2015 -D

Configurando o .babelrc

Com tudo instalado, é hora de configurar o .babelrc, é esse arquivo que o babel usa como referência na hora de saber a versão do javascript que ele deve transpilar e qual preset utilizar. Para isso, no mesmo diretório onde você criou o server.js, crie um arquivo chamado .babelrc com o conteúdo abaixo:

Configurando o package.json

Para facilitar nosso trabalho, iremos automatizar um comando através de scripts, no arquivo package.json, adicione o campo "scripts" seguido do objeto como mostrado abaixo:

Finalizado essa etapa, precisamos executar o nosso projeto para verificar se tudo está nos conformes, para isso execute:

$ yarn start

Acesse o seu localhost:3000 e verifique se lhe é retornado um {ok: true}.

Recursos extras

Com a utilização do ES6 ganhamos acesso à recursos como classes, destructuring, import, export, rest e spread properties por exemplo. Para saber a lista completa de recursos, acesse o link.

Conclusão

Como visto aqui, o ES6 trouxe inúmeros recursos para a linguagem, tornando-a mais produtiva e poderosa. O desenvolvedor node utilizando o ES6 via babel no backend ganha produtividade no desenvolvimento de suas aplicações, alem de se inteirar com os recursos mais recentes da linguagem, utilizando os mesmos antes que eles sejam adotadas nativamente na plataforma.

❤ Gostou? Vamos espalhá-lo — curte e compartilha aí o/

Code Rocket Blog

Hudson Brendon

Written by

Developer and content creator

Code Rocket Blog

Code Rocket

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade