La creazione di siti web che funzionino bene su tutti i principali browser è un principio fondamentale di un ecosistema web aperto. Tuttavia, ciò comporta un lavoro aggiuntivo per garantire che tutto il codice che scrivi sia supportato in ogni browser che prevedi di scegliere come target. Se vuoi utilizzare nuove funzionalità del linguaggio JavaScript, devi transcompilare queste funzionalità in formati compatibili con le versioni precedenti per i browser che non le supportano.
Babel è lo strumento più utilizzato per compilare il codice
che contiene una sintassi più recente in un codice che diversi browser e ambienti
(come Node) possono comprendere. Questa guida presuppone che tu stia utilizzando Babel, quindi devi seguire le istruzioni di configurazione per includerlo nella tua applicazione, se non l'hai già fatto. Seleziona webpack
in Build Systems se utilizzi webpack come bundler di moduli nella tua app.
Per utilizzare Babel per transcompilare solo ciò che è necessario per i tuoi utenti, devi:
- Identifica i browser da scegliere come target.
- Utilizza
@babel/preset-envcon target del browser appropriati. - Utilizza
<script type="module">per interrompere l'invio di codice sottoposto a transpiling ai browser che non ne hanno bisogno.
Identifica i browser da scegliere come target
Prima di iniziare a modificare la modalità di transpilazione del codice nell'applicazione, devi identificare i browser che accedono alla tua applicazione. Analizza i browser utilizzati dai tuoi utenti e quelli che prevedi di scegliere come target per prendere una decisione informata.
Utilizza @babel/preset-env
La transpilazione del codice di solito genera un file di dimensioni maggiori rispetto alle forme originali. Se riduci al minimo la quantità di compilazione, puoi ridurre le dimensioni dei bundle per migliorare il rendimento di una pagina web.
Anziché includere plug-in specifici per compilare selettivamente determinate funzionalità del linguaggio che utilizzi, Babel fornisce una serie di preset che raggruppano i plug-in insieme. Utilizza @babel/preset-env per includere solo le trasformazioni e i polyfill necessari per i browser che prevedi di targetizzare.
Includi @babel/preset-env nell'array presets nel file di configurazione di Babel, .babelrc:
{
"presets": [
[
"@babel/preset-env",
{
"targets": ">0.25%"
}
]
]
}
Utilizza il campo targets per specificare le versioni del browser da includere
aggiungendo una query appropriata al campo browsers. @babel/preset-env
si integra con browserslist, una configurazione open source condivisa tra diversi
strumenti per il targeting dei browser. Un elenco completo delle query compatibili è disponibile nella
documentazione di Browserslist.
Un'altra opzione è utilizzare un file .browserslistrc per elencare gli ambienti
che vuoi scegliere come target.
Il valore ">0.25%" indica a Babel di includere solo le trasformazioni
necessarie per supportare i browser che rappresentano più dello 0,25% dell'utilizzo
globale. In questo modo, il bundle non contiene codice transpilato non necessario per i browser utilizzati da una percentuale molto ridotta di utenti.
Nella maggior parte dei casi, questo è un approccio migliore rispetto all'utilizzo della seguente configurazione:
"targets": "last 2 versions"
Il valore "last 2 versions" esegue la transpilazione del codice per le
ultime due versioni di ogni browser,
il che significa che viene fornito il supporto per i browser non più supportati come Internet Explorer.
In questo modo, le dimensioni del bundle possono aumentare inutilmente se non prevedi che questi
browser vengano utilizzati per accedere alla tua applicazione.
In definitiva, devi selezionare la combinazione appropriata di query per scegliere come target solo i browser adatti alle tue esigenze.
Abilita correzioni di bug moderne
@babel/preset-env raggruppa più funzionalità della sintassi JavaScript in raccolte,
le attiva e le disattiva in base ai browser di destinazione specificati. Sebbene questo
funzioni bene, un'intera raccolta di funzionalità di sintassi viene trasformata quando un
browser di destinazione contiene un bug con una sola funzionalità.
Spesso, questo comporta una trasformazione del codice superiore al necessario.
Originariamente sviluppata come preset separato, l'opzione correzioni di bug in @babel/preset-env risolve questo problema convertendo la sintassi moderna che non funziona in alcuni browser nella sintassi equivalente più vicina che funziona in questi browser. Il risultato è un codice moderno quasi identico
con alcune piccole modifiche alla sintassi che garantiscono la compatibilità in tutti i browser di destinazione. Per utilizzare questa
ottimizzazione, assicurati di aver installato @babel/preset-env 7.10 o versioni successive, quindi imposta la
proprietà bugfixes su true:
{
"presets": [
[
"@babel/preset-env",
{
"bugfixes": true
}
]
]
}
In Babel 8, l'opzione bugfixes verrà attivata per impostazione predefinita.
Utilizza <script type="module">
I moduli JavaScript, o moduli ES, sono una funzionalità relativamente nuova supportata da
tutti i principali browser. Puoi utilizzare i moduli
per creare script che possono importare ed esportare da altri moduli, ma puoi
utilizzarli anche con @babel/preset-env per scegliere come target solo i browser che li supportano.
Anziché eseguire query per versioni specifiche del browser o quote di mercato, valuta la possibilità di specificare "esmodules" : true nel campo targets del file .babelrc.
{
"presets":[
[
"@babel/preset-env",
{
"targets":{
"esmodules": true
}
}
]
]
}
Molte funzionalità ECMAScript più recenti compilate con Babel sono già supportate in ambienti che supportano i moduli JavaScript. In questo modo, semplifichi la procedura per assicurarti che venga utilizzato solo il codice sottoposto a transpiling per i browser che ne hanno effettivamente bisogno.
I browser che supportano i moduli ignorano gli script con un attributo nomodule.
Al contrario, i browser che non supportano i moduli ignorano gli elementi script con type="module". Ciò significa che puoi includere un modulo e un fallback compilato.
Idealmente, i due script di versione di un'applicazione vengono inclusi nel seguente modo:
<script type="module" src="main.mjs"></script>
<script nomodule src="compiled.js" defer></script>
I browser che supportano i moduli recuperano ed eseguono main.mjs e ignorano
compiled.js. I browser senza supporto dei moduli fanno il contrario.
Se utilizzi webpack, puoi impostare target diversi nelle configurazioni per due versioni separate della tua applicazione:
- Una versione solo per i browser che supportano i moduli.
- Una versione che include uno script compilato che funziona in qualsiasi browser legacy. Questo ha una dimensione del file maggiore, poiché la transpilazione deve supportare una gamma più ampia di browser.
Grazie a Connor Clark e Jason Miller per le loro recensioni.