Configuração do Babel §

---

Instalação §

$ npm install --save-dev @babel/cli @babel/preset-env @babel/core

Transpilação do código §

$ npx babel [arquivo] -o [arquivo de saída] --presets=[presets]

• [arquivo]: é o nome do arquivo que será transpilado pelo Babel

• [arquivo de saída]: é o nome do arquivo que irá conter o código transpilado. Por convenção esse arquivo é denominado de bundle.js, pois ele pode ser a junção (bundle) de vários arquivos JavaScript

• [presets]: o preset é um argumento necessário para que o Babel possa realizar o processo de transpilação do código fonte

$ npx babel main.js -o bundle.js --presets=@babel/env

Processo de transpilação e carregamento do arquivo gerado pelo Babel de forma automática §

1. Adicionar o comando de transpilação na chave scripts do package.json:

// ...
"scripts": {
  "babel": "babel [arquivo] -o [arquivo saída] --presets=@babel/env -w",
},
// ...

Nota

Flag -w: é responsável por monitor (watch) qualquer alteração no [arquivo] (especificado no comando) após ter sido salvo, e então iniciar o processo de transpilação desse arquivo.

2. Executar o script com npm run babel

Referências §

---

• Curso de JavaScript e TypeScript do básico ao avançado