O Que é Babel?

Babel é um compilador JavaScript

Babel é uma ferramenta usada principalmente para converter ECMAScript 2015+ código em uma versão reversa Compatível de JavaScript em navegadores ou ambientes atuais e antigos. Aqui estão as principais coisas Babel pode fazer por você:

• Transformar sintaxe
• suporte retroativo recursos que estão faltando no seu ambiente de destino (através do @babel/suporte retroativo)
• código-Fonte transformações (codemods)
• E muito mais! (confira estes vídeos para inspiração)

// Babel Input: ES2015 arrow function.map((n) => n + 1);// Babel Output: ES5 equivalent.map(function(n) { return n + 1;});

Para um incrível tutorial sobre compiladores, confira o super-pequeno-compilador, que também explica como Babel em si funciona em um nível elevado.

ES2015 and beyond

Babel has support for the latest version of JavaScript through syntax transformers.

estes ‘plugins’ permitem-lhe usar uma nova sintaxe, neste momento, sem esperar pelo suporte do navegador. Confira nosso guia de uso para começar.

JSX and React

Babel can convert JSX syntax! Veja a nossa predefinição para começar. Use-o em conjunto com o pacote babel-sublime para trazer realce de sintaxe para um nível completamente novo.

Você pode instalar esta predefinição com

npm install --save-dev @babel/preset-react

e adicionar @babel/preset-react para sua Babel de configuração.

export default React.createClass({ getInitialState() { return { num: this.getRandomNumber() }; }, getRandomNumber() { return Math.ceil(Math.random() * 6); }, render() { return <div> Your dice roll: {this.state.num} </div>; }});

Saiba mais sobre o JSX

as Anotações de Tipo (Fluxo e Transcrito)

Babel pode tira para fora o tipo de anotações! Confira o nosso Ajuste de fluxo ou o ajuste de Digitação para começar. Tenha em mente que Babel não faz verificação de tipo; você ainda terá que instalar e usar fluxo ou TypeScript para verificar os tipos.

Você pode instalar o fluxo de preset com

npm install --save-dev @babel/preset-flow

// @flowfunction square(n: number): number { return n * n;}

ou o typescript preset com

npm install --save-dev @babel/preset-typescript

function Greeter(greeting: string) { this.greeting = greeting;}

Saiba mais sobre o Fluxo e o TypeScript

Pluggable

Babel é construído a partir de plugins. Componha o seu próprio gasoduto de transformação usando plugins existentes ou escreva o seu próprio. Usar facilmente um conjunto de plugins usando ou criando uma predefinição. Saiba mais →

crie um plugin com astexplorer.net ou usar o ‘plugin’ gerador-babel para gerar um modelo de ‘plugin’.

// A plugin is just a functionexport default function ({types: t}) { return { visitor: { Identifier(path) { let name = path.node.name; // reverse the name: JavaScript -> tpircSavaJ path.node.name = name.split('').reverse().join(''); } } };}

Debuggable

Suporte do mapa de origem para que possa depurar o seu código compilado com facilidade.

Spec Compliant

Babel tenta manter-se fiel ao padrão ECMAScript, tanto quanto razoavelmente possível. Ele também pode ter opções específicas para ser mais compatível com spec como um tradeoff para o desempenho.

compacto

Babel tenta usar a menor quantidade de código possível, sem dependência de um tempo de execução volumoso.

isto pode ser difícil de fazer em casos, e existem opções “frouxas” para as transformações específicas que podem negociar a compliância de spec para legibilidade, Tamanho de arquivo e velocidade.