Comece com Babel 7

Javascript é único devido à amplitude do ecossistema. Enquanto novos padrões adicionam açúcar sintático, os suportados nos navegadores levam tempo. Babel trabalha em torno deste problema através da transpilação automática.

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

O lançamento inicial de Babel levou o mundo pela tempestade. Logo depois que apareceu pela primeira vez, várias estruturas como reagir, vue e brasa a abraçaram. Os desenvolvedores costumam usar o produto sem saber que funciona em segundo plano - mais de um projeto de NPM popular tem uma dependência de Babel.

• Como fazer um aplicativo

Essas dependências transformaram o processo de liberação do antecessor em um caso fratado de conflitos. A versão 7, ainda gerenciada por uma pequena equipe do mantenedor, tentou assim ser tão compatível quanto possível. 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, salvando documentos em armazenamento na núvem ajudará você a ficar coeso).

Se você não trabalhou com Babel antes, seja este o seu guia. Ser capaz de usar recursos javascript avançados sem preocupações de compatibilidade deixa a vida muito mais fácil.

Você gostaria de algumas ferramentas para simplificar seu processo? Nosso guia para o melhor Construtor de sites vai ajudar. Quer suporte a longo prazo? Obtenha a direita hospedagem na web. serviço.

01. Verificação de Versão

Babel geralmente vive no ambiente de tempo de execução do nó. Vamos começar, verificando as versões usadas. A saída fornece o estado de versão encontrado na estação de trabalho Ubuntu 14.04 usada para criar o seguinte artigo. Isso não é pedantry - a figura que acompanha esta etapa mostra que a equipe do Babel deixou cair o suporte para algumas versões nó.js.

 Tamhan @ Tamhan-ThinkPad: ~ $ nó --versão
v8.14.0.
Tamhan @ Tamhan-ThinkPad: ~ $ Npm --version
6.4.1 

02. Mudança de nomes de pacotes

Uma mudança de quebra na versão 7 envolveu a movimentação dos pacotes do Babel em seu próprio namespace. Pacotes mais antigos não foram removidos dos vários repositórios. Isso é importante, pois o uso de nomes de pacotes legados leva à situação mostrada na figura que acompanha esta etapa.

 Tamhan @ Tamhan-ThinkPad: ~ / workspaceb7 $ npm
instalar --save-dev @ babel / core @ babel / cli @
Babel / Preset-Env @ Babel / Nó
. . .
+ @ Babel / Core @ 7.2.0
+ @ babel / nó @ 7.2.0
+ @ babel / cli @ 7.2.0
+ @ Babel / Preset-Env @ 7.2.0 

03. Adicione uma ação de construção

O passo acima assume que você trabalha dentro de um projeto NPM. Nesse caso, correr Babel através da ação de construção é fácil. Abrir Package.json. e modificá-lo como demonstrado no código abaixo:

 {
. . .
"Main": "index.js",
"Scripts": {
"Teste": Erro "echo \": sem teste
especificado \ "& amp; e amp; saída 1",
"Construir": "Babel index.js -d lib"

}, 

04. Código Transpile à mão

Colocar Babel para o trabalho envolve disparar a ação de construção. Isso é melhor realizado através do comando de execução NPM. O -d. valor informa que Babel que os resultados devem ser colocados no lib. Pasta - A figura que acompanha esta etapa mostra que a pasta é criada na mosca.

 Tamhan @ Tamhan-ThinkPad: ~ / workspaceb7 $ npm
correr construir.
& gt; [email protected] Build / Home / Tamhan /
WorkspaceB7.
& gt; Babel index.js -d lib
Compilado com sucesso 1 arquivo com Babel. 

05. Uma questão de configuração

Invocando Babel sem outras opções de configuração não permite a transpilação. O código só pode ser transpilado se a estrutura receber mais informações sobre o ambiente de destino. Isso pode ser feito através de um parâmetro de linha de comando ou criando um arquivo chamado .babelrc. na raiz do projeto.

06. Configure a BABELRC

Babel se configura através de um conjunto de plugins, cada um dos quais aplica transpilação transforma na base de código. Nós usamos o preset-env Pacote - vem com um conjunto pré-configurado de transformações destinado a cobrir a maioria das bases.

 {
"Predefinições": ["@ babel / preset-fever"]
} 

07. Tempo para um test drive

Adicione um pouco de novo JavaScript ao index.js para testar o programa contra algum código ao vivo. O código que acompanha esta etapa não funcionaria em navegadores legados - quando feitos, a função implícita é substituída por um normal declaração, como mostrado na figura.

function tamstest () {
[1, 2, 3] .map ((n) = & gt; n + 1);
} 

08. Ajuste a segmentação

preset-env Aplica a maioria das transpilações por padrão: O objetivo do produto é criar um JavaScript universalmente compatível sem considerar a largura de banda e os custos de desempenho. Você pode alterar sua configuração passando em um alvos Objeto - O exemplo abaixo destina versões específicas do Chrome e IE.

 {
"Predefinições": [
[
"@ Babel / Preset-Env",
{
"Alvos": {
"Chrome": "58",
"IE": "11"
}
}
]
]
} 

09. Direcção avançada

A segmentação do navegador da Babel não é limitada ao Chrome e ao Internet Explorer. Graças à cooperação com Browserslist. , os desenvolvedores podem misturar e combinar de mais de uma dúzia de alvos, conforme mostrado abaixo.

Nomes são insensíveis em maiúsculas e minúsculas:

• Android para o Android Webview.
• Baidu. para o browser Baidu.
• Amora ou bb. para o browser Blackberry.
• cromada para o Google Chrome.
• ChromeAndroid. ou and_chr. para o cromo para o Android.
• Beira para o Microsoft Edge.
• Elétron para estrutura de elétrons. Será convertido em versão do Chrome.
• Explorador ou ie. para o Internet Explorer.
• Explorermobile. ou ie_mob. para o Internet Explorer Mobile.
• Raposa de fogo ou ff. para o Mozilla Firefox.
• Firefoxandroid. ou and_ff. para o Firefox para o Android.
• iOS. ou ios_saf. para o Safari do iOS.
• Nó para node.js.opera para ópera.
• Operamini ou op_mini. para ópera mini.
• Operamobile. ou op_mob. para ópera móvel.
• Qqandroid. ou and_qq. Para o navegador QQ para o Android.
• Safári para safári desktop.
• Samsung para a Internet Samsung.
• Ucandroid. ou and_uc. para o navegador UC para o Android.

10. Direcção avançada, parte dois

BrowserList também pode tirar consultas avançadas. Sua homepage Lista as opções de configuração, quase todas as quais também podem ser usadas dentro de Babel modificando babelrc. . As consultas podem ser avaliadas localmente se a sua estação de trabalho tiver NPX instalado.

 {
"Alvos": "& gt; 0,25%, não morto"
} 

11. transpilação automática

Ter que invocar Babel à mão fica tedioso rapidamente. O utilitário Nodemon monitora os recursos do sistema de arquivos e dispara comandos como alterações detectadas. Em teoria, adicionar suporte dodeon é tratado através de uma pequena mudança para Package.json. .

 {
"Nome": "workspaceb7",
. . .
"Main": "index.js",
"Scripts":
{
"Iniciar": "NODEMON - EXEC BABEL-NODE
index.js ", 

12. Verifique a presença

Algumas estações de trabalho têm NODEMON. instalado globalmente. Se este não for o caso, invocar o programa produzirá uma mensagem de erro semelhante à mostrada abaixo. Felizmente, implantando NODEMON. é facilmente realizado através do NPM Install. comando.

 Tamhan @ Tamhan-ThinkPad: ~ / workspaceb7 $ npm
instalar --save-dev dodeon 

13. Verifique a funcionalidade.

Disparar iniciar o npm. em uma janela de terminal e prossiga para alterar o conteúdo de index.js. com um editor como Gedit ou Código do Visual Studio . Depois de salvar, NODEMON. irá produzir informações de status.

 [NODEMON] Reiniciar devido a mudanças ...
[NODEMON] começando `Babel-Node index.js`
[NODEMON] EXIT CLEAN - Aguardando as alterações
antes de reiniciar 

14. Corrigir transpilação

Enquanto NODEMON. A detecção deve funcionar perfeitamente neste momento, o conteúdo do index.js. arquivo que são encontrados em lib. Não atualize. Isso é causado por uma gentileza de Babel-nó. - Não confirma os arquivos transpilados ao disco. Em vez disso, dispara uma versão modificada do Nó CLI, que funciona com os arquivos transpilados.

15. Código Transpile programaticamente

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

 var babel = requer ("@ babel / núcleo");
Importar {Transform} de "@ babel / núcleo";
Importação * Como Babel de "@ Babel / Core";
babel.transform ("código ();", opções,
função (err, resultado) {
resultado.code;
resultado.map;
resultado;
}); 

16. Arquivos inteiros transpile

O código fonte geralmente não é armazenado em variáveis ​​de string. A API da Babel é responsável por isso através de um conjunto de funções relacionadas ao arquivo, que fornecem a cadeia 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", opções,
função (err, resultado) {
resultado; // = & gt; {Código, Mapa, AST}
}
); 

17. Sincronizar e Async

Babel 7 introduziu versões síncronas e assíncronas da maioria das chamadas da API. Certifique-se de escolher o caminho certo para as suas necessidades - durante a transpilização de pequenos exemplos pode ser feito em piso, a configuração de Babel solta em ficheiros mais complexos pode facilmente levar a atrasos em execução em dezenas de segundos.

18. Aprenda sobre plugins individuais

Se você já se encontrar perguntando sobre o que acontece no fundo, basta visitar esta página . Ele fornece uma lista de todos os plugins atualmente contidos na distribuição do Babel, e também contém algumas dicas para todos os buscando criar um plugin próprio.

19. Strip out specificscript specifics

Babel não é limitado a transpilizar elementos de javascript de nova idade. O produto contém um mecanismo de tipografia com restrição de recursos. Ele tirou informações de digitação e substitui elementos avançados. Infelizmente, Babel não executa o tipo de verificação - isso elimina um dos benefícios mais significativos da linguagem datilografada.

 {
"Predefinições": ["@ babel / preset-typatycript"]
} 

20. Execute Babel Online

Embora as operações de transpilação geralmente funcionem sem problemas, os problemas às vezes ocorrem. Nesse caso, o Babel Ret. é útil. Ele executa Babel no navegador da sua estação de trabalho e mostra entrada e saída ao lado um do outro.

21. Aprenda sobre pontos de dor

Nossa introdução explicou que Babel vê o uso generalizado em vários projetos. A equipe do mantenedor da Babel simplifica atualizações de versão com um Log de alterações detalhadas . Se você usar Babel programaticamente, não se esqueça de consultar o Guia de atualização da API. .

Este artigo foi originalmente publicado em questão 283 da revista Creative Web Design Web designer . Comprar edição 283 aqui ou Inscreva-se no web designer aqui .

Artigos relacionados:

• Como codificar Javascript mais leve e mais leve
• 5 APIs Javascript incríveis
• 27 modelos de site de classe superior