BabelJS - Visão geral

BabelJSé um transpiler JavaScript que transpila novos recursos para o padrão antigo. Com isso, os recursos podem ser executados em navegadores antigos e novos, sem complicações. Um desenvolvedor australiano, Sebastian McKenzie, iniciou o BabelJS.

Por que BabelJS?

JavaScript é a linguagem que o navegador entende. Usamos navegadores diferentes para executar nossos aplicativos - Chrome, Firefox, Internet Explorer, Microsoft Edge, Opera, navegador UC etc. ECMA Script é a especificação da linguagem JavaScript; o ECMA Script 2015 ES6 é a versão estável que funciona bem em todos os navegadores novos e antigos.

Depois do ES5, temos o ES6, o ES7 e o ES8. ES6 lançado com muitos recursos novos que não são totalmente suportados por todos os navegadores. O mesmo se aplica ao ES7, ES8 e ESNext (próxima versão do ECMA Script). Agora não se sabe quando será possível que todos os navegadores sejam compatíveis com todas as versões ES lançadas.

Caso planejemos usar os recursos ES6 ou ES7 ou ES8 para escrever nosso código, ele tenderá a quebrar em alguns navegadores antigos devido à falta de suporte às novas alterações. Portanto, se quisermos usar novos recursos do ECMA Script em nosso código e quisermos executá-lo em todos os navegadores possíveis disponíveis, precisamos de uma ferramenta que compilará nosso código final em ES5.

Babelfaz o mesmo e é chamado de transpiler que transpila o código na versão ECMA Script que desejamos. Possui recursos como presets e plugins, que configuram a versão ECMA necessária para transpilar nosso código. Com o Babel, os desenvolvedores podem escrever seu código usando os novos recursos em JavaScript. Os usuários podem obter os códigos transpilados usando o Babel; os códigos podem ser usados posteriormente em qualquer navegador sem problemas.

The following table lists down the features available in ES6, ES7 and ES8 −

Características	Versão do ECMA Script
Let + Const	ES6
Funções de seta	ES6
Aulas	ES6
Promessas	ES6
Geradores	ES6
Iteradores	ES6
Módulos	ES6
Destruição	ES6
Literais de modelo	ES6
Objeto aprimorado	ES6
Propriedades padrão, descanso e propagação	ES6
Async - Await	ES7
Operador de exponenciação	ES7
Array.prototype.includes ()	ES7
Preenchimento de cordas	ES8

O BabelJS gerencia as duas partes a seguir -

transpiling
polyfilling

O que é Babel-Transpiler?

O Babel-transpiler converte a sintaxe do JavaScript moderno em um formato que pode ser facilmente compreendido por navegadores mais antigos. Por exemplo, função de seta, const, classes let serão convertidas em função, var, etc. Aqui a sintaxe, ou seja, a função de seta é convertida para uma função normal mantendo a mesma funcionalidade em ambos os casos.

O que é Babel-polyfill?

Existem novos recursos adicionados em JavaScript, como promessas, mapas e inclusões. Os recursos podem ser usados no array; o mesmo, quando usado e transpilado usando o babel não será convertido. Caso o novo recurso seja um método ou objeto, precisamos usar o Babel-polyfill junto com a transpilação para que funcione em navegadores mais antigos.

Aqui está a lista de recursos ECMA Script disponíveis em JavaScript, que podem ser transpilados e polyfilled -

Classes
Decorators
Const
Modules
Destructing
Parâmetros padrão
Nomes de propriedades computadas
Descanso / propagação do objeto
Funções assíncronas
Funções de seta
Parâmetros de descanso
Spread
Literais de modelo

ECMA Script features that can be polyfilled −

Promises
Map
Set
Symbol
Weakmap
Weakset
includess
Array.from, Array.of, Array # find, Array.buffer, Array # findIndex
Object.assign,Object.entries,Object.values

Características do BabelJS

Nesta seção, aprenderemos sobre os diferentes recursos do BabelJS. A seguir estão os recursos básicos mais importantes do BabelJS -

Plugins Babel

Plugins e Presets são detalhes de configuração para o Babel transpilar o código. O Babel suporta vários plug-ins, que podem ser usados individualmente, se conhecermos o ambiente em que o código será executado.

Babel-Presets

As predefinições do Babel são um conjunto de plug-ins, ou seja, detalhes de configuração do babel-transpiler que instruem o Babel a transpilar em um modo específico. Precisamos usar presets, que tem o ambiente no qual queremos que o código seja convertido. Por exemplo, a predefinição es2015 converterá o código para es5 .

Babel-Polyfills

Existem alguns recursos, como métodos e objetos, que não podem ser transpilados. Em tais casos, podemos fazer uso de babel-polyfill para facilitar o uso de recursos em qualquer navegador. Vamos considerar o exemplo de promessas; para que o recurso funcione em navegadores mais antigos, precisamos usar polyfills.

Babel-Polyfills

O Babel-cli vem com vários comandos onde o código pode ser facilmente compilado na linha de comando. Ele também possui recursos como plug-ins e predefinições para serem usados junto com o comando, facilitando a transpilação do código de uma vez.

Vantagens de usar BabelJS

Nesta seção, aprenderemos sobre as diferentes vantagens associadas ao uso do BabelJS -

O BabelJS fornece compatibilidade com versões anteriores para todos os recursos recém-adicionados ao JavaScript e pode ser usado em qualquer navegador.
O BabelJS tem a capacidade de transpilar para a próxima versão do JavaScript - ES6, ES7, ESNext, etc.
O BabelJS pode ser usado junto com gulp, webpack, flow, react, typescript, etc. tornando-o muito poderoso e pode ser usado com grandes projetos, facilitando a vida do desenvolvedor.
O BabelJS também trabalha com a sintaxe react JSX e pode ser compilado no formato JSX.
BabelJS tem suporte para plugins, polyfills, babel-cli que facilitam o trabalho com grandes projetos.

Desvantagens de usar BabelJS

Nesta seção, aprenderemos sobre as diferentes desvantagens do uso do BabelJS -

O código BabelJS altera a sintaxe durante a transpilação, o que torna o código difícil de entender quando lançado em produção.
O código transpilado é maior em tamanho quando comparado ao código original.
Nem todos os ES6 / 7/8 ou os novos recursos que estão por vir podem ser transpilados e temos que usar polyfill para que funcione em navegadores mais antigos.

Aqui está o site oficial do babeljs https://babeljs.io/.