Articles /

Comece com Babel 7

JavaScript é único, devido à amplitude do ecossistema. Enquanto novos padrões adicionam açúcar sintáctico, obtê-los suportados em navegadores leva tempo. A Babel trabalha em torno deste problema através da transposição automática.

A ideia por detrás do produto é simples: A Babel aceita o código ES6 ou ES7 e substitui novos elementos sintáticos por código de emulação. Sua saída confirma a sintaxe clássica do JavaScript e roda em navegadores mais antigos como Internet Explorer.

O lançamento inicial do Babel tomou o mundo de assalto. Logo após o seu aparecimento, vários frameworks como React, Vue e Ember abraçaram-no. Os desenvolvedores frequentemente usam o produto sem saber que ele funciona em segundo plano – mais de um projeto npm popular tem uma dependência do Babel.

  • Como fazer um aplicativo

Essas dependências transformaram o processo de lançamento do predecessor em um conflito. A versão 7, ainda gerenciada por uma pequena equipe de mantenedores, tentou assim ser o mais compatível possível. As mudanças de quebra são poucas e distantes, enquanto a qualidade da geração de código permanece alta (se você estiver trabalhando com uma equipe, salvar documentos no armazenamento em nuvem o ajudará a permanecer coeso).

Se você não trabalhou com Babel antes, que este seja o seu guia. Ser capaz de usar recursos avançados de JavaScript sem preocupações de compatibilidade facilita muito a vida.

Quer algumas ferramentas para agilizar seu processo? O nosso guia para o melhor construtor de sites ajudará. Quer suporte a longo prazo? Obtenha o serviço de alojamento web certo.

Version check

Babel geralmente vive no ambiente de tempo de execução do Node. Vamos começar verificando as versões utilizadas. A saída fornece o estado da versão encontrada na estação de trabalho Ubuntu 14.04 usada para criar o seguinte artigo. Isto não é pedantismo – a figura que acompanha este passo mostra que a equipe do Babel abandonou o suporte para algumas versões do Node.js.

tamhan@tamhan-thinkpad:~$ node --versionv8.14.0tamhan@tamhan-thinkpad:~$ npm --version6.4.1

Mudança de nomes de pacotes

Uma mudança de quebra na versão 7 envolveu mover os pacotes Babel para seu próprio namespace. Os pacotes mais antigos não foram removidos dos vários repositórios. Isto é importante, pois o uso de nomes de pacotes legados leva à situação mostrada na figura que acompanha este passo.

tamhan@tamhan-thinkpad:~/workspaceB7$ npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node. . .+ @babel/[email protected]+ @babel/[email protected]+ @babel/[email protected]+ @babel/[email protected]

Adicionar uma ação de compilação

O passo acima assume que você trabalha dentro de um projeto npm. Nesse caso, executar Babel através da ação de construção é fácil. Abra o package.json e modifique-o como demonstrado no código abaixo:

{. . ."main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "babel index.js -d lib"},

Transpile code by hand

Pôr o Babel a trabalhar envolve disparar a ação de compilação. Isto é melhor conseguido através do comando npm run. O valor -d informa a Babel que os resultados devem ser colocados na pasta lib – a figura que acompanha este passo mostra que a pasta é criada na hora.

tamhan@tamhan-thinkpad:~/workspaceB7$ npm run build> [email protected] build /home/tamhan/workspaceB7> babel index.js -d libSuccessfully compiled 1 file with Babel.

Uma questão de configuração

A invocação da Babel sem outras opções de configuração não permite a transposição. O código só pode ser transposto se o framework receber mais informações sobre o ambiente alvo. Isto pode ser feito através de um parâmetro de linha de comando, ou criando um arquivo chamado .babelrc na raiz do projeto.

Configurar o babelrc

Babel configura-se através de um conjunto de plugins, cada um dos quais aplica a transpilation transforma-se para a base de código. Nós usamos o pacote preset-env – ele vem com um conjunto pré-configurado de transformações destinadas a cobrir a maioria das bases.

{"presets": }

Tempo para um test drive

Adicionar um pouco de JavaScript de nova era ao index.js para testar o programa contra algum código ao vivo. O código que acompanha este passo não funcionaria em navegadores antigos – quando feito, a função implícita é substituída por uma declaração normal, como mostrado na figura.

function tamstest(){.map((n) => n + 1);}

Adjust targeting

preset-env aplica a maioria das transposições por padrão: o objetivo do produto é criar um JavaScript universalmente compatível sem considerar os custos de largura de banda e performance. Você pode alterar sua configuração passando em um objeto de destino – o exemplo abaixo visa versões específicas do Chrome e IE.

{"presets": ]}

Advanced targeting

Babel’s browser targeting não está limitado ao Chrome e ao Internet Explorer. Graças à cooperação com a browserslist, os desenvolvedores podem misturar e combinar mais de uma dúzia de alvos, como mostrado abaixo.

Nomes são insensíveis a maiúsculas/minúsculas:

  • Android para Android WebView.
  • Baidu para Baidu Browser.
  • BlackBerry ou bb para navegador Blackberry.
  • Chrome para Google Chrome.
  • ChromeAndroid ou and_chr para Chrome para Android.
  • Edge para Microsoft Edge.
  • Estrutura Electron para Electron. Será convertido para a versão Chrome.
  • Explorer ou ie para Internet Explorer.
  • ExplorerMobile ou ie_mob para Internet Explorer Mobile.
  • Firefox ou ff para Mozilla Firefox.
  • FirefoxAndroid ou and_ff para Firefox para Android.
  • iOS ou ios_saf para iOS Safari.
  • Node para Node.js.Opera para Opera.
  • OperaMini ou op_mini para Opera Mini.
  • OperaMobile ou op_mob para Opera Mobile.
  • QQAndroid ou e_qq para QQ Browser para Android.
  • Safari para desktop Safari.
  • Samsung para Samsung Internet.
  • UCAndroid ou and_uc para UC Browser para Android.

Advanced targeting, part two

Browserlist também pode fazer consultas avançadas. Sua página inicial lista as opções de configuração, quase todas as quais também podem ser usadas dentro do Babel modificando o babelrc. As consultas podem ser avaliadas localmente se a sua estação de trabalho tiver o npx instalado.

{"targets": "> 0.25%, not dead"}

Transpilação automática

Ativar para invocar Babel à mão fica entediante rapidamente. O utilitário nodemon monitora os recursos do sistema de arquivos e dispara comandos à medida que as mudanças são detectadas. Em teoria, adicionar o suporte a nodemon é feito através de uma pequena alteração em package.json.

{"name": "workspaceb7",. . ."main": "index.js","scripts": {"start": "nodemon --exec babel-node index.js",

Check for presence

Algumas estações de trabalho têm nodemon instalado globalmente. Se este não for o caso, a invocação do programa irá gerar uma mensagem de erro semelhante à mostrada abaixo. Felizmente, a instalação de nodemon é facilmente realizada através do comando npm install.

tamhan@tamhan-thinkpad:~/workspaceB7$ npm install --save-dev nodemon

Check functionality

Fire off npm start in a terminal window e proceda para alterar o conteúdo do index.js com um editor como gedit ou Visual Studio Code. Depois de salvar, nodemon irá sair informações de status.

 restarting due to changes... starting `babel-node index.js` clean exit - waiting for changes before restart

Transpilação de pixel

Embora a detecção de nodemon deva funcionar perfeitamente neste ponto, o conteúdo do arquivo index.js que é encontrado na lib não é atualizado. Isto é causado por um nicety de babel-node – ele não submete os arquivos transportados para o disco. Ao invés disso, ele dispara uma versão modificada do Node CLI, que funciona com os arquivos transpiled.

Transpile code programmaticamente

Babel não está limitado a trabalhar na linha de comando. Se os pacotes correctos estiverem instalados, o código também pode ser transposto a partir de outro programa. O snippet que acompanha este passo aplica um conjunto de transformações básicas a uma string de entrada. Tenha em mente que as configurações, geralmente, são obtidas de um arquivo babelrc.

var babel = require("@babel/core");import { transform } from "@babel/core";import * as babel from "@babel/core";babel.transform("code();", options, function(err, result) {result.code;result.map;result.ast;});

Transpile arquivos inteiros

Código fonte normalmente não é armazenado em variáveis de string. A Babel API contabiliza isso através de um conjunto de funções relacionadas a arquivos, as quais renunciam à string de entrada para uma variável com um nome de arquivo. Os resultados, no entanto, são retornados como uma variável JavaScript normal.

babel.transformFile("filename.js", options, function (err, result) {result; // => { code, map, ast }});

Sync e async

Babel 7 introduziu versões síncronas e assíncronas da maioria das chamadas da API. Certifique-se de escolher a correta para as suas necessidades – enquanto a transposição de pequenos exemplos pode ser feita na hora, configurar Babel solto em arquivos mais complexos pode facilmente levar a atrasos em dezenas de segundos.

Aprenda sobre plugins individuais

Se você já se perguntou sobre o que acontece em segundo plano, simplesmente visite esta página. Ela fornece uma lista de todos os plugins atualmente contidos na distribuição Babel, e também contém algumas dicas para todos aqueles que procuram criar um plugin próprio.

Disponibilizar os elementos TypeScript específicos

Babel não se limita a transpor elementos JavaScript da nova era. O produto contém um motor TypeScript com limitações de funcionalidade. Ele remove a informação da digitação e substitui elementos avançados. Infelizmente, a Babel não realiza verificações de tipo – isto elimina um dos benefícios mais significativos da linguagem TypeScript.

{"presets": }

Executar Babel online

Embora as operações de transposição funcionem normalmente sem problemas, por vezes ocorrem problemas. Nesse caso, a REPL Babel é útil. Ele roda Babel no navegador da sua estação de trabalho e mostra as entradas e saídas um ao lado do outro.

Saiba sobre os pontos de dor

Nossa introdução explicou que Babel vê o uso difundido em vários projetos. A equipe de mantenedores da Babel simplifica as atualizações de versão com um registro de mudanças detalhado. Se você usa Babel programmaticamente, não se esqueça de consultar o guia de atualização da API.

Este artigo foi originalmente publicado na edição 283 da revista criativa de web design Web Designer. Compre a edição 283 aqui ou assine a Web Designer aqui.

  • Como codificar mais rápido, mais leve JavaScript
  • 5 awesome Javascript APIs
  • 27 top-class website templates

Leave a Reply