O Babel se tornou uma ferramenta essencial para o desenvolvimento front-end desde o seu surgimento, em 2015. A tecnologia, chamada de transpiler (traspilador, tradutor), tem a missão de tornar o código JavaScript mais atual em um código correspondente em uma versão mais antiga (que as engines, navegadores e afins já deem suporte).

Seu grande boom se deu no próprio ano de nascimento, afinal, foi nesta mesma época que saiu o ES2015 (também chamado de ES6) – especificação da linguagem JavaScript que define as regras de sintaxe, estrutura e mais tudo o que você pode imaginar em relação a linguagem.

Desde então, mais de 4.000 commits foram feitos e 50 pré-releases foram anunciados, o que resultou no assunto deste artigo, a versão 7.0.0 do Babel. Aqui daremos uma olhada geral nas novidades e como elas nos afetam no dia a dia do desenvolvimento front-end.

babel-upgrade

A partir de agora o Babel possui uma nova ferramenta de upgrade chamada de babel-upgrade. Ele ficará responsável por fazer qualquer atualização necessária dentro dos arquivos package.json e .babelrc. Para utilizá-la, basta instalar usando o npm/yarn:

npm i babel-upgrade -g

JavaScript Configuration Files

Esta nova atualização trouxe uma novidade importante: o arquivo de configurações babel.config.js. É muito importante citar que ele não substitui o bom e velho .babelrc, ele apenas é uma adição que poderá resolver muitos usos de caso. Sua grande diferença está na maneira como as coisas são declaradas seguindo um bom formato JSON, ao contrário do grande caos que era antes.

Veja só este exemplo utilizando a estrutura inicial:

module.exports = function () {   
  const presets = [ ... ];   
  const plugins = [ ... ];    

  return {     
    presets,     
    plugins   
  }; 
}

Este arquivo novo já parece mais um JSON:

{   
  "presets": [...],   
  "plugins": [...] 
}

Ao adicionar um arquivo babel.config.js, o Babel resolverá facilmente a configuração em vez de procurar em cada arquivo até encontrar o código de configuração. Isso também nos permite executar facilmente substituições (overrides).

Overrides

Esta é uma novidade interessante. As substituições vão permitir que façamos configurações diferentes por blocos de código. O que isso significa? Significa que se você precisa de configuraçoes diferentes de compilação para arquivos de teste, arquivos do servidor e do cliente; não precisamos criar mais arquivos .babelrc separados para cada um. Ao invés disso, podemos fazer algo semelhante a isto:

module.exports = {   
  presets: [     
    // configuração padrão
  ],   
  overrides: [
    {     
      test: ["./node_modules"],     
      presets: [       
        // estamos inserindo uma configuração específica para o node_modules
      ],   
    }, 
    {     
      test: ["./tests"],     
      presets: [       
        // e aqui uma específica para os testes
      ],   
    }
  ] 
};

Note que bacana: aqui criamos uma configuração padrão no atributo presets, e no atributo overrides definimos duas configurações diferentes: uma para o diretório ./node_modules e outra para o ./tests. Em outras palavras, a não ser que sejam estes dois diretórios específicos, a regra padrão será a válida.

Output Options

Agora podemos envolver os plugins em um array e passar um objeto de opções para ele conforme mostrado abaixo:

{   
  "plugins": [     
    ["transform-async-to-module-method", {       
      "module": "bluebird",       
      "method": "coroutine"     
    }]   
  ] 
}

Outras melhorias

Estas são as novidades mais relevantes, no entanto, acho válido citar algumas outras melhorias interessantes:

• Velocidade: de acordo com os desenvolvedores, o Babel agora permite fazer builds muito mais rápidos que na sua versão anterior.
• Suporte ao TypeScript: o Babel agora é capaz de parsear a sintaxe do TypeScript usando um novo pacote chamado @babel/preset-typescript.
• Caller Metadata: Agora o core do Babel (@babel/core) possui uma nova opção chamada caller, que nos permite passar qualquer metadata para nossos presets e plugins.
• JSX Fragments: O React 16 tem uma funcionalidade chamada JSX Fragments. O Babel agora também dá suporte a ele.

Referências

• https://babeljs.io/
• https://blog.bitsrc.io/so-whats-new-in-babel-7-ea97cb984ef0