introdução:

Hoje passei o dia inteiro apenas lendo a documentação do babel.js, e aprendi bastante coisa. Coisas como baixar todos os pacotes necessários como @babel/core, @babel/cli e @babel/present/@babel/present-typescript.

Foi até simples implementa-lo, apenas baixei, criei um arquivo babel.config.json e adicionei está exata configuração:

{
    "presets": [
      [
        "@babel/preset-typescript",
        {
          "targets": {
            "esmodules": true,
            "edge": "17",
            "firefox": "60",
            "chrome": "67",
            "safari": "11.1"
          },
          "useBuiltIns": "usage",
          "corejs": "3.6.5"
        }
      ]
    ],
    "comments": false
  

Até aqui, tudo certo, eu executo um npm run build e tudo é compilado certinho. A minha dúvida está além das configurações básicas, que são encontradas: config options. As primeiras opções, eu entendi que são utilizadas por outras ferramentas que embrulham o babel, como o webpack. Então essas funções devem ser incluídas nas respectivas ferramentas.

Agora as outras, eu não compreendi onde exatamente adiciona-las... as últimas opções está explicito que podem ser utilizadas no babel.config.json, mas as outras, não consegui identificar onde e quando utilizar.

Outras configurações que eu não faço ideia em qual escopo aplicar, se devo ou não criar um novo objeto para ou se essas opções pertecem a outras opção são: typescript optioons.

Outros questionamentos:

É interessante sempre utilizar babel junto com webpack? Vi diversas recomendações sobre isso.

Poderia ser babel e esbuild? funciona bem os dois juntos?

Conclusão:

Para os leitores que leram até o fim, agradeço o tempo. Para os que contribuiram, agradeço em dobro, pois é de grande ajuda!