Check out our Babel 7 and Webpack 4 video course:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=2C5DD5C44FA59413D0CD
Take your JavaScript skill to the next level:
https://www.udemy.com/course/javascript-boost/?referralCode=06AF8499F008CC241201
Babel é uma cadeia de ferramentas que é usada principalmente para converter o código ECMAScript 2015+ em uma versão retrocompatível do JavaScript em navegadores ou ambientes atuais e antigos. ECMAScript 2015+ é igual a ES6+.
Pode pensar em Babel como um tradutor. O ES6+ JS oferece-nos muitas novas funcionalidades e sintaxes. Eles podem melhorar tremendamente a nossa eficiência de desenvolvimento. Mas neste momento, a maioria destas novas funcionalidades são irreconhecíveis nos browsers. Para encontrar um equilíbrio entre compatibilidade e conveniência e eficiência de desenvolvimento, Babel foi desenvolvido.
Nós programadores escrevemos códigos no ES6+ e depois pedimos a Babel para traduzi-los em navegadores de códigos que podem entender.
Babel em si só pode lidar com a tradução de novas sintaxes. ES6+ também adicionou muitas novas APIs como Promise, Map, Object.assign(), etc. Nova API significa novos objetos, propriedades, e métodos. API é apenas um nome extravagante. Não se deixe intimidar por ele. Para lidar com elas, temos que adicionar essas APIs ao ES5. Este trabalho é feito por um assistente da Babel. Mostraremos quem é esse assistente mais tarde.
Então lembre-se desta conclusão: Babel traduz novas sintaxes e seu assistente lida com as novas APIs.
Primeiro vá ao site oficial da Babel e clique no botão Docs.
>
>
Babel trata da tradução da sintaxe. O Polyfill trata das características em falta. Então, responda à pergunta que deixamos antes: o assistente da Babel é polyfill.
Parte da tradução do ES6+, Babel também pode lidar com JSX e TypeScript. Então aqui vem outro conceito: pré-definido. Preset é a tradução que a Babel usa. Ele controla como Babel faz a tradução.
Então agora, você aprendeu dois conceitos importantes de Babel: preset e polyfill.
Next, vamos instalar Babel.
Babel Instalação e Configuração:
Este é o comando de instalação sugerido pelo manual oficial do Babel. Se você der uma olhada de perto, você verá que existem realmente quatro pacotes sendo instalados, três como dependência de desenvolvimento e um como dependência de produção.
>
- npm install – save-dev @babel/core
- npm install @babel/cli
- npm install @babel/preset-env
- npm install – save @babel/polyfill
Babel/core, tal como o seu nome sugeriu, é o núcleo de todo o programa Babel.
Babel/cli é a interface de linha de comando. Usamo-la para comunicar com o babel.
O próprio Babel não sabe traduzir os códigos ES6. Requer plugins para dizer-lhe como. Existem muitos plugins. Instalá-los e configurá-los um a um é um trabalho intensivo de trabalho. Portanto, a melhor solução é usar o babel preset. Preset é uma coleção de plugins. O preset que usamos é preset-env.
Babel/preset-env é o padrão que Babel 7 usa para traduzir ES6+ em ES5. No Babel 7, o preset-env substituiu o preset-2015/6/7, etc.
Babel/polyfill é para adicionar características do ES6+ ao ES5. Então por que precisamos fazer isso?
Nova sintaxe não é a única diferença entre ES6 e ES5. O ES6 já recebeu muitas novas APIs. API é apenas um nome extravagante para objetos embutidos. Esses novos objetos embutidos são muito úteis, mas o problema é que eles não existem no ambiente ES5.
A única solução é adicionar esses objetos embutidos no ambiente ES5. É para isso que serve o polyfill.
Vamos ligar o nosso próprio terminal e configurar um projecto.
Primeiro, ligamos o terminal e criamos um directório raiz do projecto. Em seguida, colocamos o CD nele e npm init.
Nextra, copiamos os quatro comandos de instalação do manual oficial da Babel e os colamos no terminal.
Quando a instalação for feita, você deve ver estes quatro pacotes sendo instalados:
Vamos abrir o nosso projecto em VSC e verificar o pacote.json.
Cli, core, e preset-env são dependências de desenvolvimento. polyfill é uma dependência de produção.
Pode pensar em polyfill como um código fonte. Ele armazena fontes de todas as novas características do es6.
ES5 + polyfill = ES6.
Antes de podermos usar Babel, precisamos configurá-lo. A melhor maneira de fazê-lo é criar um arquivo para armazenar informações de configuração do Babel.
No Babel 6, nós armazenamos informações de configuração em .babelrc ou package.json.
Babel 7 nos oferece uma nova solução: babel.config.js.
O manual do Babel nos oferece um modelo para criar o babel.config.js. Só precisamos de o copiar para a pasta raiz do nosso projecto.
Primeiro, nós módulo exportamos um objecto.
Então definimos uma propriedade predefinida nele. O valor dos presets é um array.
Dentro do array, nós colocamos outro array.
O primeiro elemento do array infantil é o predefinido que queremos usar. Aqui, nós definimos para @babel/env ou @babel/preset-env.
O segundo elemento é um objeto de configuração. Dentro dele, há duas propriedades: targets e useBuiltIns. Targets é para configurar navegadores e usarBuiltIns para polyfills.
Agora, instalamos e configuramos Babel.
Next, vamos testá-lo.
No diretório raiz do projeto, nós criamos um novo arquivo: es6.js.
Então ligamos o terminal e inserimos um comando babel: npx babel es6.js. Isto é o que vamos obter:
ES6 let foi convertido em ES5 var.
NPX babel é o mesmo que node_modules/.bin/babel
Agora, temos “Babeled” com sucesso nosso primeiro arquivo ES6.
Pode ser que você queira emitir o arquivo traduzido como um arquivo independente. Neste caso, você precisa -o ou – output-dir.
-o e – output-file só pode traduzir um arquivo de cada vez. No seu desenvolvimento real, você pode querer armazenar arquivos ES6 em um diretório e traduzir cada arquivo nesse diretório.
Por exemplo, no diretório raiz do projeto, nós criamos dois diretórios filhos: ES6 e ES5. Nós escrevemos nossos arquivos ES6 no diretório ES6. Depois os “Babel” em dir ES5. Os arquivos HTML ligam os arquivos JS da dir es5.
Neste caso, o comando que precisamos é npx babel ES6 -d ES5 ou npx babel ES6 – out-dir ES5.
Agora, todos os ficheiros no dir ES6 serão “babeled” para o dir ES5.
Próximo, vamos mostrar o que o polyfill pode fazer por nós.
Este é o arquivo que queremos babel:
Usa muitos APIs do ES6 que não existem no ES5. A única maneira de habilitá-los a trabalhar em um ambiente ES5 é adicionar códigos fonte desses novos APIs ao ambiente ES5. É para isso que serve o polyfill e é também por isso que o polyfill é instalado como uma dependência de produção. Nós precisamos dele em produção.
Aqui está uma analogia menos precisa para ajudá-lo a entender porque precisamos do polyfill.
Deixe que nós tenhamos um programa jQuery. Não podemos executar o nosso programa jQuery directamente. Precisamos primeiro de um link no código fonte do jQuery. Polyfill é o código fonte jQuery que ligamos em.
Este é o ficheiro “babeled” ES5 que temos:
Ver todos os ficheiros necessários? Eles são carregados por polyfill. Mas o arquivo “babeled” não pode ser usado por arquivos HTML diretamente. Nós precisamos juntá-los usando o webpack. Mas todos os “códigos fonte API” necessários foram carregados.
Esta configuração é controlada pelo useBuiltIns proeprty em babel.config.js. Esta propriedade tem três valores: uso, falso e entrada.
O uso é o melhor e mais comumente usado. É também o que recomendamos.
Parte do uso, useBuiltIns tem dois outros valores: falso e entrada.
False irá desligar o polyfill. Isto significa que você tem que ligar as APIs necessárias manualmente. Você definitivamente não quer fazer isso.
Se você usar a entrada, você precisa “requerer @babel/polyfillEntry no início do seu arquivo. Em seguida, babel vai primeiro verificar a propriedade dos alvos para descobrir quais são os navegadores alvo. Ele irá carregar todas as APIs que não são suportadas pelo navegador de destino. Obviamente, vamos obter muitas APIs desnecessárias dessa maneira.
Então, em resumo, defina useBuiltIns para usar e Babel cuidará do resto para você.
Check out our FULL Babel 7 and Webpack 4 Course at Udemy:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=MDM_BABEL_P
Check out our FULL web development course at Udemy:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=2C5DD5C44FA59413D0CD