Guarda il nostro video corso Babel 7 e Webpack 4:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=2C5DD5C44FA59413D0CD
Porta la tua abilità JavaScript al livello successivo:
https://www.udemy.com/course/javascript-boost/?referralCode=06AF8499F008CC241201
Babel è una catena di strumenti che viene utilizzata principalmente per convertire il codice ECMAScript 2015+ in una versione retrocompatibile di JavaScript nei browser o ambienti attuali e precedenti. ECMAScript 2015+ equivale a ES6+.
Puoi pensare a Babel come un traduttore. ES6+ JS ci offre molte nuove caratteristiche e sintassi. Possono migliorare enormemente la nostra efficienza di sviluppo. Ma in questo momento, la maggior parte di queste nuove caratteristiche sono irriconoscibili nei browser. Per trovare un equilibrio tra compatibilità e convenienza ed efficienza dello sviluppo, è stato sviluppato Babel.
Noi programmatori scriviamo codici in ES6+ e poi chiediamo a Babel di tradurli in codici che i browser possano capire.
Babel stesso può solo gestire la traduzione delle nuove sintassi. ES6+ ha anche aggiunto molte nuove API come Promise, Map, Object.assign(), ecc. Nuove API significa nuovi oggetti, proprietà e metodi. API è solo un nome di fantasia. Non fatevi intimidire da esso. Per gestirle, dobbiamo aggiungere queste API in ES5. Questo lavoro è fatto da un assistente di Babel. Vi mostreremo più tardi chi è questo assistente.
Ricordate quindi questa conclusione: Babel traduce le nuove sintassi e il suo assistente gestisce le nuove API.
Prima vai sul sito ufficiale di Babel e clicca sul pulsante Docs.
Babel gestisce la traduzione della sintassi. Polyfill gestisce le caratteristiche mancanti. Quindi la risposta alla domanda che abbiamo lasciato prima: l’assistente di Babel è polyfill.
Oltre a tradurre ES6+, Babel può anche gestire JSX e TypeScript. Quindi ecco un altro concetto: preset. Il preset è la traduzione che Babel usa. Controlla il modo in cui Babel esegue la traduzione.
Allora, hai imparato due importanti concetti di Babel: preset e polyfill.
Prossimo, installiamo Babel.
Installazione e configurazione di Babel:
Questo è il comando di installazione suggerito dal manuale ufficiale di Babel. Se guardate bene, scoprirete che in realtà ci sono quattro pacchetti installati, tre come dipendenza di sviluppo e uno come dipendenza di produzione.
- npm install – save-dev @babel/core
- npm install @babel/cli
- npm install @babel/preset-env
- npm install – save @babel/polyfill
Babel/core, proprio come suggerisce il suo nome, è il nucleo dell’intero programma Babel.
Babel/cli è l’interfaccia a riga di comando. La usiamo per comunicare con Babel.
Babel stesso non sa come tradurre i codici ES6. Ha bisogno di plugin che gli dicano come fare. Ci sono molti plugin. Installarli e impostarli uno per uno è un lavoro che richiede molto lavoro. Pertanto, la soluzione migliore è quella di utilizzare babel preset. Il preset è una collezione di plugin. Il preset che usiamo è preset-env.
Babel/preset-env è lo standard che Babel 7 usa per tradurre ES6+ in ES5. In Babel 7, preset-env ha sostituito preset-2015/6/7, ecc.
Babel/polyfill è per aggiungere le caratteristiche ES6+ in ES5. Quindi perché abbiamo bisogno di farlo?
La nuova sintassi non è l’unica differenza tra ES6 e ES5. ES6 ha già ricevuto molte nuove API. API è solo un nome di fantasia per gli oggetti incorporati. Questi nuovi oggetti built-in sono molto utili, ma il problema è che non esistono nell’ambiente ES5.
L’unica soluzione è aggiungere questi oggetti built-in nell’ambiente ES5. A questo serve il polyfill.
Accendiamo il nostro terminale e impostiamo un progetto.
Prima di tutto, accendiamo il terminale e creiamo una directory principale del progetto. Poi ci mettiamo un CD e facciamo npm init.
Poi, copiamo i quattro comandi di installazione dal manuale ufficiale di Babel e li incolliamo nel terminale.
Quando l’installazione è terminata, dovresti vedere questi quattro pacchetti installati:
Apriamo il nostro progetto in VSC e controlliamo il pacchetto.json.
Cli, core, e preset-env sono dipendenze di sviluppo. polyfill è una dipendenza di produzione.
Puoi pensare a polyfill come a un codice sorgente. Memorizza i sorgenti di tutte le nuove caratteristiche di es6.
ES5 + polyfill = ES6.
Prima di poter usare Babel, dobbiamo configurarlo. Il modo migliore per farlo è creare un file per memorizzare le informazioni di configurazione di Babel.
In Babel 6, memorizziamo le informazioni di configurazione in .babelrc o package.json.
Babel 7 ci offre una nuova soluzione: babel.config.js.
Il manuale di Babel ci offre un modello per creare babel.config.js. Dobbiamo solo copiarlo nella cartella principale del nostro progetto.
Prima di tutto, noi modulo esporta un oggetto.
Poi definiamo una proprietà preset in esso. Il valore di preset è un array.
Dentro l’array, mettiamo un altro array.
Il primo elemento dell’array figlio è il preset che vogliamo usare. Qui, lo impostiamo su @babel/env o @babel/preset-env.
Il secondo elemento è un oggetto config. Al suo interno, ci sono due proprietà: targets e useBuiltIns. Targets serve per configurare i browser e useBuiltIns per i polyfill.
Ora, abbiamo installato e configurato Babel.
Prossimo, testiamolo.
Nella directory principale del progetto, creiamo un nuovo file: es6.js.
Accendiamo quindi il terminale e inseriamo un comando babel: npx babel es6.js. Questo è ciò che otterremo:
ES6 let è stato convertito in ES5 var.
NPX babel è lo stesso di node_modules/.bin/babel
Ora, abbiamo “Babelato” con successo il nostro primo file ES6. In questo caso, hai bisogno di -o o – output-dir.
-o e – output-file possono tradurre solo un file alla volta. Nel tuo sviluppo reale, potresti voler memorizzare i file ES6 in una directory e tradurre ogni file in quella directory.
Per esempio, nella directory principale del progetto, creiamo due directory figlie: ES6 e ES5. Scriviamo i nostri file ES6 in dir ES6. Poi li “Babel” in dir ES5. I file HTML collegano i file JS da dir es5.
In questo caso, il comando che ci serve è npx babel ES6 -d ES5 o npx babel ES6 – out-dir ES5.
Ora, tutti i file in dir ES6 saranno “babelati” in dir ES5.
Prossimo, mostriamo cosa può fare per noi il polyfill.
Questo è il file che vogliamo babellare:
Usa molte API ES6 che non esistono in ES5. L’unico modo per farle funzionare in un ambiente ES5 è aggiungere i codici sorgente di queste nuove API nell’ambiente ES5. Questo è ciò a cui serve il polyfill e questo è anche il motivo per cui il polyfill è installato come dipendenza di produzione. Ne abbiamo bisogno in produzione.
Ecco un’analogia meno accurata per aiutarvi a capire perché abbiamo bisogno di polyfill.
Abbiamo un programma jQuery. Non possiamo eseguire il nostro programma jQuery direttamente. Dobbiamo prima collegare il codice sorgente jQuery. Polyfill è il codice sorgente jQuery che colleghiamo.
Questo è il file ES5 “babeled” che abbiamo:
Vedi tutti quei file necessari? Sono caricati da polyfill. Ma il file “babeled” non può essere usato direttamente dai file HTML. Abbiamo bisogno di raggrupparli usando webpack. Ma tutti i necessari “codici sorgente API” sono stati caricati.
Questa impostazione è controllata dalla proeprità useBuiltIns in babel.config.js. Questa proprietà ha tre valori: usage, false e entry.
Usage è il valore migliore e più usato. È anche quello che raccomandiamo.
Oltre a usage, useBuiltIns ha altri due valori: false e entry.
False spegnerà il polyfill. Questo significa che devi collegare le API necessarie manualmente. Sicuramente non vuoi farlo.
Se usi entry, devi “richiedere” @babel/polyfillEntry all’inizio del tuo file. Poi babel controllerà prima la proprietà targets per capire quali sono i browser di destinazione. Caricherà tutte le API che non sono supportate dal browser di destinazione. Ovviamente, in questo modo otterremo un sacco di API non necessarie.
Quindi, in sintesi, impostate useBuiltIns su usage e Babel si prenderà cura del resto per voi.
Guarda il nostro corso COMPLETO su Babel 7 e Webpack 4 su Udemy:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=MDM_BABEL_P
Guarda il nostro corso COMPLETO sullo sviluppo web su Udemy:
https://www.udemy.com/course/web-development-html5-css3-php-oop-and-mysql-database/?referralCode=2C5DD5C44FA59413D0CD