Aprenda a usar ES6 no Node.js - simples e sem enrolação

rodrigozan

rodrigozan

Posted on October 14, 2021

Aprenda a usar ES6 no Node.js - simples e sem enrolação

Usar recursos do ES6 no Node.js** é um pré-requisito para muitas vagas de desenvolvimento front-end. Nesse rápido tutorial, eu te mostrarei como usar EcmaScript 6 no Node.js de forma rápida e simples com Babel.

Bora codar.

Estrutura do projeto - ES6 no Node.js

Crie uma pasta com o nome node_es6 para este projeto. Sempre aconselho você ter uma estrutura de desenvolvimento na sua máquina, mas podemos falar sobre isso em outro post.

Se quiser criar a pasta pelo terminal, digite:

mkdir node_es6
Enter fullscreen mode Exit fullscreen mode

Vamos criar nosso package.json. Você pode usar o parâmetro -y para evitar responder às perguntas. O arquivo será gerado automaticamente.

A única dependência que não será de desenvolvimento, será o Express. Então vamos adicioná-lo.

Obs.: você pode usar o parâmetro -S no lugar de --save, se quiser.

npm install -S express
Enter fullscreen mode Exit fullscreen mode

Agora criaremos um arquivo index.js. Você pode criar direto em seu editor de texto, ou via terminal. O que preferir. O importante é que este arquivo esteja na raiz do projeto.

- node_es6
-- node_modules
-- index.js
-- package.json
-- package-lock.json
Enter fullscreen mode Exit fullscreen mode

Criando o arquivo index.js

Usando ES5 (JavaScript "normal"), criar um servidor com Node.js e Express seria algo assim:

var express = require('express');

var app = express();

app.listen(3000, function () {
     console.log('Server rodando na porta 3000');
});
Enter fullscreen mode Exit fullscreen mode

Aplicando ES6 no Node.js

Usando o ES6 (EcmaScript 6), podemos: deixar os requires de lado e usar import; trocar var por const; usar arrow function.

Bora lá usar ES6 no Node.js? Vamos aplicar as duas últimas mudanças em nosso código:

const express = require('express');

const app = express();

app.listen(3000, () => console.log('Server rodando na porta 3000'))
Enter fullscreen mode Exit fullscreen mode

Então quer dizer que nativamente o Node.js já suporta o ES6?

Algumas coisas, como const (variáveis imutáveis), let (variáveis com escopo de bloco) e arrow functions (funções com sintaxes mais curtas), sim. Já outras, como os imports... não.

Então, se você mudar de require para import do ES6, e rodar no terminal o comando node index:

Usando import e rodando no terminal

Nosso arquivo index.js prontinho em ES6 no Node.js:

import express from 'express'

const app = express()

app.listen(3000, () => console.log('Server rodando na porta 3000'))
Enter fullscreen mode Exit fullscreen mode

Agora basta digitar no terminal (levando em consideração que você acessou pelo terminal/cmd/power shell a pasta do projeto node_es6 - C:\meus_projetos\node_es6):

node index
Enter fullscreen mode Exit fullscreen mode

O seguinte erro aparecerá:

import express from 'express';
^^^^^^
Enter fullscreen mode Exit fullscreen mode

Conheça o Babel

Para contornar essa situação, usaremos o Babel, um compilador JavaScript (você pode saber mais sobre ele clicando no link). O Babel irá compilar o código ES6 que escreveremos e devolverá para o Node o ES5 que ele conhece.

Instalando as dependências

Primeiro vamos instalar as dependências de desenvolvimento:

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
Enter fullscreen mode Exit fullscreen mode

Criando o arquivo .babelrc

Agora criaremos na raiz do projeto um arquivo chamado .babelrc.

- node_es6
-- node_modules
-- .babelrc
-- index.js
-- package.json
-- package-lock.json
Enter fullscreen mode Exit fullscreen mode

Este arquivo conterá todas as inúmeras configurações necessárias para o compilamento:

{
    "presets": ["@babel/preset-env"]
}
Enter fullscreen mode Exit fullscreen mode

Sim, é sério. É só isso. Este arquivo está dizendo para o Node.js usar os presets (as predefinições) do Babel.

Fim.

ES6 no Node.js - eis a mágica acontecendo

Agora é só rodar o comando --exec babel-node index.js no terminal e receber a mensagem:

Server rodando na porta 3000
Enter fullscreen mode Exit fullscreen mode

Mais um gostinho do ES6 no Node.js

E só para deixar mais bonito nosso código, vamos usar String Interpolation do ES6 (que não precisa do Babel), e é uma forma linda de concatenar (juntar, unir, amigar, dividir o ap) strings e variáveis.

Vamos envolver a string em crases. E usar ${variável} para introduzir a variável PORT, que receberá como valor o número da porta em que nossa aplicação está rodando.

Concatenando string e variável no ES5

No ES5, concatenar a variável PORT com a frase do console.log seria assim:

import express from 'express'

const app = express()

const PORT = 3000

app.listen(3000, () => console.log('Server rodando na porta ' + PORT))
Enter fullscreen mode Exit fullscreen mode

Usando String Interpolation, esse recurso lindo do ES6 no Node.js:

import express from 'express'

const app = express()

const PORT = 3000

app.listen(3000, () => console.log(`Server rodando na porta ${PORT }`))
Enter fullscreen mode Exit fullscreen mode

Bem, é isso. Espero que tenha gostado do artigo. Dúvidas, críticas (construtivas, né gente) e sugestões, bora lá usar os comments.

💖 💪 🙅 🚩
rodrigozan
rodrigozan

Posted on October 14, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related