Como utilizar o ES6 no Node Js, de forma simples, com o Sucrase.

por Carlos Levir | 26 de julho de 2019 | Javascript | 9 Comentários

Desde que foi lançado, o ES6 trouxe uma série de vantagens no desenvolvimento Javascript.

Hoje, vamos aprender como utilizar, de forma simples, todas as funcionalidades oferecidas pelo ES6, no Node Js.

Instalação do Sucrase

O sucrase é um transpiler de código, assim como o babel, mas que traz a vantagem de ter um setup extremamente simples e fácil de usar.

Você pode instalar o sucrase através do seguinte comando:

yarn add sucrase -D

Agora, precisamos criar um script que start o nosso servidor através do sucrase.

Para isso, adicione ao seu package.json o seguinte código:

"scripts": {
  "dev": "sucrase-node src/server.js"
}

Lembre-se que src/index.js deve ser o caminho do arquivo de entrada da sua aplicação.

Ao rodar o comando yarn dev, já é possível utilizar toda a sintaxe do ES6 com o Node JS.

Nodemon

O nodemon é uma dependência muito utilizada em ambientes de desenvolvimento com Node JS.

Para utilizar o sucrase junto ao nodemon, crie um arquivo, na raiz do seu projeto, chamado nodemon.json

Esse arquivo precisa conter o seguinte código:

{
  "execMap": {
    "js": "sucrase-node"
  }
}

Esse arquivo informará ao nodemon que, na hora da execução, ele deve utilizar o sucrase em vez de node.

Nesse momento, você pode já pode utilizar o nodemon normalmente.

Debugger

Podemos também utilizar o sucrase em conjunto do debugger do Visual Studio Code.

Para isso, deixe o lauch.json do seu projeto da seguinte maneira:

"configurations": [
  {
    "type": "node",
    "request": "attach",
    "name": "Launch Program",
    "protocol": "inspector"
  }
]

É necessário também criar um script que deve ser executado antes de iniciar o debugger.

Para isso, adicione o seguinte código, logo abaixo do script dev que criamos anteriormente.

"debug": "node --inspect-brk -r sucrase/register src/server.js"

Você deve rodar yarn debug, e, em seguida iniciar o debug do Visual Studio Code.

Testes

Os scripts de testes podem ser integrados ao sucrase de forma bem simples.

Jest

Para utilizar o jest com o sucrase, é necessário instalar o plugin @sucrase/jest-plugin.

Você pode instala-lo através do comando abaixo:

yarn add @sucrase/jest-plugin -D

No seu package.json, adicione também a seguinte configuração:

"jest": {
  "transform": {
    ".(js|jsx|ts|tsx)": "@sucrase/jest-plugin"
  },
  ...
}

Com isso feito, você pode rodar seu script de testes com o Jest normalmente.

Mocha

Para utilizar o sucrase com o mocha é ainda mais simples, basta passar a flag –require sucrase/register junto ao seu script de testes.

Ficaria mais ou menos assim:

mocha --require sucrase/register ./test/**/*.js

Concluindo

Como podemos ver, o sucrase é uma ferramenta extramamente fácil de configurar e pode ser integrada com as principais ferramentas que você utiliza no seu desenvolvimento com Node JS.

Forte Abraço,

Carlos Levir

9 Comentários

Breno Novelli no 23 de dezembro de 2019 a partir do 12:07

Valeu, Carlos. Ajuda rápida para resolver o debug.
Responder
- Carlos Levir no 26 de dezembro de 2019 a partir do 13:34
  
  Opa Breno, valeu pelo comentário 😀
  
  Forte Abraço 🙂
  Responder
marcos olavo no 27 de dezembro de 2019 a partir do 21:43

Carlos,

Existe uma possibilidade de debugar uma aplicação usando sucrase sem ter que adicionar o debug no package.json ?

A minha ideia seria rodar meu script pelo yarn, exemplo, chamo ele de “dev”

yarn dev

E através dele configurar um launch.json para configurar o debug.

Você pode me ajudar com isso ?
Responder
- Carlos Levir no 27 de dezembro de 2019 a partir do 22:02
  
  Opa Marcos, essa é a forma mais simples que eu conheço. Se quiser me explicar melhor seu problema, talvez a gente possa chegar em uma solução juntos.
  Caso queira, me manda uma mensagem lá no discord que fica melhor da gente conversar. Esse é o discord da rocket: https://discordapp.com/invite/gCRAFhc
  
  Grande Abraço 🙂
  Responder
  - marcos olavo no 27 de dezembro de 2019 a partir do 22:25
    
    É que na verdade, eu não consegui fluir.
    
    Exemplo, eu tenho uma rota bem simples, /v1/clientes por exemplo, que retorna uma lista de clientes.
    
    No meu package.json eu tenho um script dev.
    
    package.json
    
    “dev”: “nodemon src/server.ts”
    
    nodemon.json
    
    {
    “watch”: [“src”],
    “ext”: “ts”,
    “execMap”: {
    “ts”: “sucrase-node src/server.ts”
    }
    }
    
    Meu problema é que ao executar o comando yarn debug mesmo com o script “debug” configurado no package.json, ele me gerou o seguinte endereço
    
    ws://127.0.0.1:9229/ea3b1836-738b-418e-8bef-f106326fd6bb
    
    E pelo postman/insominia eu não consigo debugar pelo endereço que me foi gerado.
    
    Pode me ajudar a identificar qual o problema dos meus passos ?
    Responder
Raniélison Soares no 2 de fevereiro de 2020 a partir do 12:51

Valeu cara, ajudou bastante.
Responder
- Carlos Levir no 4 de fevereiro de 2020 a partir do 13:10
  
  Sucesso Raniélison, fico feliz em ajudar 🙂
  
  Grande Abraço 😀
  Responder
Maicom no 28 de julho de 2020 a partir do 20:42

Conteúdo muito bom!
Uma dúvida: como fazer para executar em ambiente de produção, visto que sucrase e nodemon nos auxiliam em dev?
Responder
- Carlos Levir no 7 de agosto de 2020 a partir do 12:21
  
  Fala Maicom, exatamente como você falou, o sucrase só em usado em desenvolvimento. Em produção você vai precisar criar um script de build, da seguinte forma:
  
  Com JS:
  sucrase ./src -d /build –transforms javascript,imports
  
  Com TS:
  sucrase ./src -d /build –transforms typescript,imports
  
  Depois disso o seu código novo estará na pasta build 🙂
  Responder