O que é Babel?

Babel é um conjunto de ferramentas usado principalmente para converter o código ECMAScript 2015+ em uma versão compatível com versões anteriores de JavaScript em navegadores ou ambientes atuais e mais antigos. Aqui estão as principais coisas que o Babel pode fazer por você:

• Sintaxe de transformação
• Recursos Polyfill que estão faltando em seu ambiente de destino (por meio de um polyfill de terceiros, como core-js )
• Transformações de código-fonte (codemods)

Cenário Prático

É muito foda quando a gente pega um projeto legado, como é o meu caso no momento, com uso de frameworks e biblioteca depreciadas, atualmente estou trabalhando num projeto com o AngularJs 1.8. E situações como essa é muito comum no dia a dia de uma pessoa desenvolvedora. Assim temos muitas amarrações de código javascript focado em atender particularidades de alguns navegadores e suas diferentes versões.

Logo, muitas práticas modernas de escrita de código javascript que usamos no momento atual podem não funcionar e quebrar funcionalidades em alguns navegadores. E é neste momento que é muito bom conhecer e saber usar o Babel para diminuir parte das nossas preocupações nestes atendimentos com escrita de código.

Usando Babel eu escrevo todo meu código com recursos e padrões de código moderno do Javascript como:

• Spread Operator
• Arrow Function
• E outras cositas mais...

E no final o Babel converte estes código para um padrão mais primitivo e que poderá ser interpretado pelo navegadores mais antigos.

Referência

Para iniciar um projeto simples com Webpack e Babel recomendo a leitura deste artigo Starting a web project with Webpack and Babel.

Para iniciar um novo projeto Javascript com tudo aquilo que você precisa recomendo o recurso CreateApp - Frontend build config generator

Créditos

Photo by Erik Odiin on Unsplash