Desenvolvimento Front-end O que é Babel?

Veja neste artigo o que é Babel.

Ana Paula de Andrade 26 de fevereiro de 2020

Transpilador JavaScript de código aberto e gratuito, o Babel foi lançado sobre a licença MIT e possui como uma das principais características converter código JavaScript atual em uma versão que o navegador possa executar.

Multiplataforma, é amplamente utilizado por desenvolvedores que necessitarem converter recursos da linguagem JavaScript para uma versão que o navegador compreenda.

JavaScript Básico
Curso de JavaScript Básico
CONHEÇA O CURSO

Desde que surgiu, em 2015, tornou-se uma ferramenta indispensável para o desenvolvimento front-end.

Como ele funciona?

Basicamente, em palavras mais simples, o transpilador funciona da seguinte forma:

Fluxo Transpilador Babel JavaScript

Como podemos verificar na imagem acima, ao se deparar com um código ES2015, que trata-se da versão mais atual do JavaScript, o transpilador o converte, gerando assim um novo código, porém, desta vez, em ES5, versão mais antiga do javaScript que se tornará compreensível para o navegador.

Na imagem abaixo, dispomos de um outro exemplo, onde o primeiro código não seria compatível em navegadores ou ambientes de produção. Desta forma, o código de saída tornaria compreensível após ter sido realizada sua conversão utilizando o transpilador Babel.

código gerado pelo Transpilador Babel

Concluindo

Com as recentes atualizações do JavaScript, é cada vez mais comum que o desenvolvedor deseje as utilizar. Porém, nem sempre o navegador irá conseguir executar o código JavaScript mais recente. Para isso, o Babel é de suma importância para desenvolvedores front-end, com ele conseguimos utilizar os recursos mais atuais do JavaScript em navegadores que só conseguem executar códigos mais antigos utilizando o processo de transpilação.

Desenvolvedor Front-end
Formação: Desenvolvedor Front-end
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé. Nesta formação vamos iniciar aprendendo lógica. Em seguida veremos todos os aspectos do HTML, CSS e JavaScript. Por fim, aprenderemos Sass, Google Analytics, empacotar nossas aplicações com Webpack, criação de aplicações Desktop com Electron, UX/UI e uma introdução aos frameworks mais utilizados no mercado: Angular, React, Vue e Ember.
CONHEÇA A FORMAÇÃO
Deixe seu comentário

Conheça o autor desse artigo

  • Foto Autor Ana Paula de Andrade
    Ana Paula de Andrade

    Graduanda em Sistemas de Informação pelo Instituto Federal da Bahia. É responsável pelo atendimento ao cliente, gerenciamento de redes sociais e revisão de cursos, além da redação de artigos para o blog da TreinaWeb.

    Posts desse Autor

Artigos relacionados