DEV Community 👩‍💻👨‍💻

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

Posted on • Originally published at Medium

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 node index 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.

Top comments (0)

16 Libraries You Should Know as a React Developer

Being a modern React developer is not about knowing just React itself. To stay competitive, it is highly recommended to explore the whole ecosystem. This article contains some of the most useful React component libraries to speed up your developer workflow.