a Beginner’s Guide to Babel

This article introduces Babel, a JavaScript compiler that allows developers to use next-generation JavaScript today.

pode ser frustrante escrever JavaScript ao construir aplicações web. Temos que pensar sobre os recursos disponíveis nos navegadores que estamos visando e o que acontece quando um recurso não é implementado. Algumas pessoas recomendariam simplesmente não usá-lo, o que é uma experiência dolorosa na maioria das vezes se estamos construindo algo complicado.Felizmente, algumas ferramentas permitem-nos parar de nos preocupar com o que é suportado e apenas escrever o melhor código que podemos. Chamam-se “transpilers”. Um transpiler é uma ferramenta que toma o código fonte como entrada e produz um novo código fonte como saída, com uma sintaxe diferente, mas semanticamente o mais próximo possível — ou idealmente equivalente — do original.

Babel é basicamente o transpilador padrão para traduzir JavaScript moderno (ES2015+) em implementações compatíveis que funcionam em navegadores antigos. É a solução perfeita se você só quer se concentrar em escrever JavaScript.

e embora o principal objetivo da Babel seja traduzir os mais recentes padrões do ECMAScript( ES) para navegadores antigos — ou às vezes atuais—, ele pode fazer mais. Há um ecossistema de pré-ajustes e plugins que tornam possível a adição de recursos não-padrão também. Cada plugin faz uma nova funcionalidade / transformação disponível para o seu código, e predefinições são apenas uma coleção de plugins.

começar

existem diferentes formas de configurar a Babel dependendo do seu projecto e das ferramentas que utiliza. Neste artigo, vamos explicar como configurar a Babel usando o CLI, embora se você estiver usando um sistema de construção ou framework, você pode verificar instruções específicas no site oficial. Na maioria das vezes o CLI é a maneira mais rápida e fácil de começar, então se você é um usuário pela primeira vez, Sinta-se livre para continuar.

o primeiro passo para configurar Babel em um projeto é instalar o pacote usando npm e adicioná-lo como uma dependência dev. Assumindo que tens um nó de trabalho.js ambiente já em vigor, é apenas uma questão de executar o seguinte em seu terminal:

mkdir babel-testcd babel-testnpm init -ynpm install --save-dev babel-cli

Isto irá criar uma mudança de diretório (babel-test) para o diretório, inicializar um projeto npm (criando assim um arquivo package.json) e, em seguida, instalar o babel-cli como uma dependência de dev.

se precisar de alguma ajuda com o acima, por favor consulte os nossos tutoriais sobre a instalação do nó e trabalhar com o npm.A seguir, podemos abrir package.json e adicionar um comando build aos nossos scripts npm:

"scripts": { "build": "babel src -d dist"}

isto irá tirar os ficheiros de código do directório src e enviar o resultado num directório dist. Então podemos executá-lo como:

npm run build

mas espera! Antes de executar Babel temos que instalar e configurar os plugins que irão transformar o nosso código. A maneira mais fácil e rápida de fazer isso é adicionar a predefinição Env, que seleciona os plugins apropriados, dependendo dos navegadores de destino que você indicar. Ele pode ser instalado usando:

npm install babel-preset-env --save-dev

em Seguida, crie um .babelrc arquivo na raiz do seu projeto e adicionar a predefinição:

{ "presets": }

O .babelrc arquivo é o lugar onde você coloca todas as suas configurações de Babel. Você estará usando isso principalmente para configurar pré-ajustes e plugins, mas muitas mais opções estão disponíveis. Você pode verificar a lista completa na página da API Babel.

por favor, note que, dependendo do seu sistema operacional, os arquivos que começam com um ponto serão escondidos por padrão. Se isso é problemático para você (ou se você preferir apenas poucos arquivos), você pode colocar o seu Babel configurações no package.json arquivo, em um babel chave, como:

{ "name": "babel-test", "version": "1.0.0", "babel": { // config }}

Finalmente, vamos criar os diretórios e arquivos de Babel está esperando para encontrar:

mkdir src dist

E dar-lhe algo para transformar:

let a = 1;let b = 2; = ;console.log(a);console.log(b);

Este exemplo usa desestruturação atribuição para trocar os valores de duas variáveis.

Execução de Babel

Agora que você tem um pronto-para-usar Babel de instalação, você pode executar o build comando para executar o processo de compilação:

npm run build

Isso levará o código de src/main.js, transformá-lo para ES5 código de saída e a transformada de código para dist/main.js.

eis o que produziu:

"use strict";var a = 1;var b = 2;var _ref = ;a = _ref;b = _ref;console.log(a);console.log(b);

como você pode ver, let foi substituído por var e Babel introduziu uma variável temporária (denotada pelo sublinhado) para facilitar a troca.E pronto. O código que você escrever no diretório src será traduzido para versões anteriores do idioma. Por padrão, se você não adicionar quaisquer opções à predefinição, ele irá carregar todas as transformações. Você também pode indicar os navegadores-alvo como segue:

{ "presets": } }] ]}

Isto irá carregar as transformações necessárias para suportar as duas últimas versões de cada navegador e Safari maior ou igual à versão 7. Você pode encontrar as opções disponíveis para os navegadores-alvo no repositório de navegadores.

Ecossistema De Babel: Uma visão geral rápida

como você notou na seção anterior, Babel não fará nada sozinho quando você instalá-lo. Temos que instalar um conjunto de plugins para obter o comportamento desejado, ou podemos usar predefinições, que são conjuntos predefinidos de plugins.

geralmente, cada recurso que você deseja incluir será na forma de um plugin. Alguns exemplos para o ES2015 incluem:

• constantes
• arrow functions
• block-scoped functions
• classes
• spread
• template literals

See the Plugins page in the Babel Docs for a complete list.

mas às vezes você não quer incluir todos os plugins um a um. Assim, há pré-built predefinições que irão facilitar o processo de instalação de cada plugin.

as três predefinições oficiais actualmente disponíveis são::

• Env
• React
• Flow

Env is the most frequently used and the one we’ve used here. Ele carrega automaticamente todas as transformações necessárias para tornar o seu código compatível, dependendo dos navegadores visados.

the React preset transforms code typically found in React projects, mainly adding compatibility with Flow annotations and JSX.

e, finalmente, a predefinição de fluxo é usada para limpar o código a partir de anotações de tipo de fluxo (embora não verifique se os tipos são válidos ou não.)

Babel Polyfill

existem características JavaScript que não podem ser transformadas sintaticamente, normalmente porque não há nenhuma funcionalidade equivalente implementada-por exemplo, promessas e funções geradoras.

esses tipos de recursos têm que ser implementados no navegador por uma biblioteca para ser usada em seu código, e esse é o trabalho de um polifill.

o Polifill Babel é composto por core-js e o tempo de execução do regenerador. Juntos, eles cobrem todas as características em ES2015+.Como mencionado, Babel também pode ser usado para transformar recursos que ainda não foram implementados na linguagem. Um bom exemplo disso é a proposta de campos de classe (atualmente na Fase 3 do TC39: candidato). Isto é particularmente popular entre Reagir devs, pois remove a necessidade de ligar explicitamente métodos para um determinado componente, e também significa que um componente state pode ser declarado como um campo de classe (possivelmente eliminando a necessidade de um construtor).

para aqueles de vocês que querem usar campos de classe hoje, você precisa adicionar o Babel-plugin-transform-class-properties como uma dependência dev:

npm install --save-dev babel-plugin-transform-class-properties

também actualizaria o seu ficheiro .babelrc da seguinte forma::

{ "presets": , "plugins": }

agora podes escrever:

class App extends Component { state = { count: 0 }; incCount = () => { this.setState(ps => ({ count: ps.count + 1 })); }; render() { return ( <div> <p>{ this.state.count }</p> <button onClick={this.incCount}>add one</button> </div> ); }}

e não fica por aí. Você também pode usar Babel para adicionar novos recursos próprios para a linguagem, como o nosso tutorial entendimento ASTs, construindo o seu próprio Plugin Babel demonstra.

Alternatives

Writing modern web applications sometimes requires more than the features available in JavaScript. Outras linguagens também podem ser traduzidas para JavaScript compatível, mas também implementar outras funcionalidades úteis.

a opção mais popular é o TypeScript, que é um JavaScript regular que implementa recursos modernos ES, mas também acrescenta outros, especialmente no que diz respeito à segurança do tipo.

no outro extremo, existem línguas inteiramente diferentes em diferentes categorias, desde as funcionais como o PureScript até o objeto orientado como o dardo.

para uma visão mais profunda das linguagens alternativas, dê uma olhada em 10 linguagens que compilam para JavaScript.

conclusão

Babel é uma ótima opção para escrever aplicações modernas enquanto ainda serve JavaScript que pode ser entendido por todos os desenvolvedores e a ampla gama de navegadores que o código precisa executar.

Babel não é apenas útil para transformar ES2015+ em versões anteriores da língua — tanto no navegador como em plataformas como Node.js-mas também para adicionar novos recursos que não fazem parte do padrão. Para ver o que quero dizer, basta dar uma olhada no diretório npm para encontrar todos os plugins ou pré-ajustes disponíveis do Babel.

como JavaScript está evoluindo a um ritmo tão rápido, é óbvio que os fabricantes de navegador vão precisar de um tempo para implementar os recursos mais recentes. Dar à Babel um lugar no seu kit de ferramentas significa que você pode escrever JavaScript de ponta hoje, seguro no conhecimento de que você não está abandonando nenhum de seus usuários. O que há para não amar?