fbpx

Polyfills con Babel e Webpack – le basi

Un altro anno è appena cominciato, la tecnologia avanza, così come la specifica ECMAscript che ci permette di utilizzare costrutti sempre più avanzati per scrivere il nostro codice. Spesso però le nostre applicazioni hanno come requisito il supporto di browser anche molto vecchi.

Strumenti come create-react-appangular-cli gestiscono questi aspetti per noi, ma a volte potremmo voler avere il pieno controllo sul nostro workflow ed anche sui browser supportati.

In Madisoft per un recente progetto greenfield abbiamo utilizzato quest’ultimo approccio e in questa serie di post vorrei illustrare il nostro set-up che si avvale di Webpack e Babel partendo dalle basi, passando alle configurazioni più avanzate ed infine agli imprevisti incontrati.

Cominciamo con un po’ di teoria:

Come supportare vecchi browser?

Come possiamo supportare vecchi browser pur scrivendo codice ESNext? La soluzione più naturale è quella di fornire codice che i browser possano comprendere. Possiamo raggiungere questo scopo attraverso due processi affini:

Compilare

Compilare (spesso anche riferito in Inglese come Transpile) è il processo di trasformare una sintassi in un’altra equivalente:

Polyfills

La compilazione si limita a trasformare la sintassi in una equivalente, ma che accade se dovesse mancare interamente una feature? Ad esempio la funzione Object.values è presente nei browser Firefox dalla versione 47. Come fare se dovessimo supportare versioni inferiori?

In questi casi dobbiamo ricorrere ai polyfills che sono vere e proprie implementazioni di una feature mancante. Potremmo scriverle noi stessi, ma generalmente conviene integrare librerie ben testate.

Webpack e Babel

Nel nostro workflow utilizziamo Webpack e Babel. Webpack (in parole molto semplici) si preoccupa di generare un bundle unico partendo dai nostri file sorgenti. Babel invece è uno dei tanti strumenti che ci permette di gestire la compilazione ed i polyfill necessari per la nostra applicazione. 

Il progetto

Per assimilare i concetti dietro questi strumenti partiremo da un progetto minimale che andremo ad incrementare gradualmente:

Per prima cosa proviamo a vedere cosa succede lanciando il comando npm start che farà generare il bundle:

Pur avendo fatto compilare il codice da Babel via babel-loader l’output rimane invariato. Come mai?

La risposta risiede nel funzionamento di Babel. Questo strumento infatti si basa su un sistema di plug-ins. Ogni plugin ha lo scopo di effettuare una trasformazione e senza nessun plug-in Babel non fa assolutamente niente.

@babel/preset-env

Per evitare di dover installare ogni plug-in a mano Babel ci semplifica la vita mettendo a disposizione dei Presets ossia un insieme dei plug-in più comuni. Ai fini del nostro progetto utilizzeremo @babel/preset-env:

npm install --save-dev @babel/preset-env

Per poter utilizzare il preset dobbiamo aggiungere un file di configurazione per Babel nella root del progetto (che verrà automaticamente utilizzato da babel-loader).

Lanciando di nuovo npm start osserviamo che questa volta l’output è quello che ci aspettiamo:

Core-js

Ora il codice viene compilato correttamente, ma per quanto riguarda i polyfill?? Proviamo a modificare il codice sorgente come segue:

Provando a caricare il bundle in un browser che non supporta la funzione Array.includes avremo un errore in console:

Uncaught TypeError: ['a', 'b', 'c', 'd'].includes('d') is not a function 

Questo perché il browser non supporta la funzione Array.includes. Come detto in precedenza conviene avvalersi di una libreria e Babel consiglia di utilizzare Core-js. Una volta installata basterà importarla all’inizio del progetto:
npm install --save-dev core-js

Perfetto! Ora anche i vecchi browser non avranno più problemi.

Dunque è così semplice? In realtà abbiamo trascurato qualche cosa, infatti andando a vedere le dimensioni del bundle notiamo che è aumentato sensibilmente anche se abbiamo solo tre righe di codice!

 La configurazione che abbiamo utilizzato è senza dubbio la più semplice, ma anche la meno ottimizzata. Infatti importiamo tutta la libreria core-js quindi anche un sacco di funzioni che effettivamente non utilizziamo.

Nel prossimo post vedremo come far fronte a questo inconveniente grazie alle configurazioni che Babel ci mette a disposizione.

Default image
Andrea Ercoli
Articles: 8

Leave a Reply

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.