Creare siti web che funzionano bene con tutti i principali browser è un principio fondamentale di un ecosistema web aperto. Tuttavia, questo significa un lavoro aggiuntivo per garantire che tutto il codice che scrivi sia supportato in ogni browser che intendi scegliere come target. Se vuoi usare nuove funzionalità del linguaggio JavaScript, devi eseguirne il trasferimento in formati compatibili con le versioni precedenti per i browser che non le supportano ancora.
Babel è lo strumento più usato per compilare codice contenente una sintassi più recente, comprensibile a vari browser e ambienti (come Node). Questa guida presuppone che tu utilizzi Babel, quindi devi seguire le istruzioni di configurazione per includerla nella tua applicazione, se non l'hai ancora 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 che vuoi scegliere come target.
- Usa
@babel/preset-envcon target del browser appropriati. - Utilizza
<script type="module">per interrompere l'invio del codice transpilato ai browser che non ne hanno bisogno.
Identifica i browser da scegliere come target
Prima di iniziare a modificare la modalità di transpile del codice nell'applicazione, devi identificare quali browser accedono all'applicazione. Analizza i browser attualmente utilizzati dagli utenti e quelli che intendi scegliere come target per prendere una decisione consapevole.
Utilizza @babel/preset-env
In genere, il codice di transpilazione genera un file di dimensioni maggiori rispetto ai moduli originali. Riducendo al minimo la quantità di compilazione, puoi ridurre le dimensioni dei bundle per migliorare le prestazioni di una pagina web.
Anziché includere plug-in specifici per compilare selettivamente determinate funzionalità della lingua in uso, Babel offre una serie di preimpostazioni che raggruppano i plug-in. Utilizza @babel/preset-env per includere solo le trasformazioni e i polyfill necessari per i browser che prevedi di impostare come target.
Includi @babel/preset-env all'interno dell'array presets nel file di configurazione di Babel, .babelrc:
{
"presets": [
[
"@babel/preset-env",
{
"targets": ">0.25%"
}
]
]
}
Utilizza il campo targets per specificare quali versioni del browser vuoi includere aggiungendo una query appropriata al campo browsers. @babel/preset-env
si integra con browserlist, 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 costituiscono più dello 0,25% dell'utilizzo globale. Ciò garantisce che il tuo bundle non contenga codice con 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 il trapilazione del codice per le ultime due versioni di ogni browser, il che significa che viene fornito il supporto per i browser non più disponibili, come Internet Explorer.
Ciò potrebbe aumentare inutilmente le dimensioni del bundle se non prevedi che questi browser vengano utilizzati per accedere alla tua applicazione.
In ultima analisi, devi selezionare la combinazione di query appropriata per scegliere come target solo i browser adatti alle tue esigenze.
Attiva le correzioni di bug moderne
@babel/preset-env raggruppa più funzionalità di sintassi JavaScript in raccolte e le attiva/disattiva in base ai browser di destinazione specificati. Sebbene funzioni bene, un'intera raccolta di funzionalità di sintassi viene trasformata quando un browser mirato contiene un bug con una sola funzionalità.
Questo spesso porta a una maggiore trasformazione del codice del necessario.
Originariamente sviluppata come preimpostazione separata, l'opzione bugfixes in @babel/preset-env risolve questo problema convertendo la sintassi moderna non funzionante in alcuni browser con la sintassi equivalente più simile che non funziona in quei browser. Il risultato è un codice moderno quasi identico
con alcune piccole modifiche di sintassi che garantiscono la compatibilità in tutti i browser di destinazione. Per utilizzare questa ottimizzazione, assicurati di avere 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.
Formato <script type="module">
I moduli JavaScript, o moduli ES, sono una funzionalità relativamente nuova supportata in tutti i principali browser. Puoi utilizzare i moduli per creare script che permettono di 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 specifiche versioni del browser o quote di mercato, valuta la possibilità di specificare "esmodules" : true all'interno del campo targets del file .babelrc.
{
"presets":[
[
"@babel/preset-env",
{
"targets":{
"esmodules": true
}
}
]
]
}
Molte funzionalità ECMAScript più recenti compilate con Babel sono già supportate negli ambienti che supportano i moduli JavaScript. In questo modo, semplifichi il processo per assicurarti che venga utilizzato solo il codice di cui è stato eseguito il transpile 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 di script con type="module". Ciò significa che puoi includere un modulo e un elemento di riserva compilato.
Idealmente, i due script di versione di un'applicazione sono 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 che non supportano i moduli funzionano al contrario.
Se utilizzi il webpack, puoi impostare destinazioni diverse nelle configurazioni per due versioni separate della tua applicazione:
- Una versione disponibile solo per i browser che supportano i moduli.
- Una versione che include uno script compilato che funziona in qualsiasi browser legacy. Questo file ha dimensioni maggiori, poiché la traspirazione deve supportare una gamma più ampia di browser.
Grazie a Connor Clark e Jason Miller per le loro recensioni.