1. Instalar a biblioteca Babel pelo terminal do Visual Studio Code com o comando yarn add @babel/core @babel/cli @babel/preset-env -D ou pode ser com o npm: npm add @babel/core @babel/cli @babel/preset-env -D
  2. Criar o arquivo com o nome babel.config.js no qual traz as configurações para exportar

Untitled

  1. Após isso o arquivo package.json foi alterado automaticamente, incluindo as linhas selecionadas:

Untitled

  1. Dentro da pasta src criar o arquivo com o nome index.js para demostração de como utilizar o Babel:

Untitled

  1. No qual faz a transpilação com o comando: yarn babel src/index.js -o dist/bundle.js sendo a conversão, para que os navegadores antigos também possam interpretar; criando automaticamente a pasta dist com o arquivo bundle.js

Untitled

  1. Adicionar no terminal do Visual Studio Code o comando yarn add @babel/preset-react -D sendo necessária para reconhecer a escrita de tag html dentro do javascript, pois o Babel por padrão não reconhece
  2. Alterar o arquivo index.js para: ****

Untitled

  1. Executar o comando para compilação yarn babel src/index.js -o dist/bundle.js
  2. Após isso o arquivo bundle.js foi alterado ****automaticamente:

Untitled

  1. Renomear o arquivo index.js para index.jsx caso não queira renomear, na hora de compilar é necessário colocar index.jsx e não index.js conforme o comando abaixo
  2. Agora o comando usado para a compilação é yarn babel src/index.jsx -o dist/bundle.js no qual faz a conversão
  3. No Visual Studio Code fica assim a estrutura do projeto:

Untitled