Oggi parliamo di transpilazione, vediamo insieme cosa vuol dire “transpilare il codice”. Prendiamo un tipico caso, quello di ES6. ES6 non funziona ancora su tutti i browser, rimandiamo a questa tabella che ci aiuta a capire nel dettaglio la situazione. La tabella ci mostra infatti in modo preciso quali sono le nuove funzionalità introdotte da ES6 e in quali browser vi è compatibilità. In pratica, osservando la tabella è facilmente intuibile che per poter funzionare al meglio ES6 ha bisogno di essere transpilato in ES5.
La transpilazione: definizione
Transpilare vuole dire essenzialmente trasformare il codice, nel caso di specie da ES5 a ES6. La transpilazione in JavaScript può avvenire addirittura con altri linguaggi: CoffeScript e TypeScript, tanto per citarne alcuni.
Per quanto riguarda i tools utili alla transpilazione, ecco che ci viene in soccorso Babel.js, un ottimo strumento. Rammentiamo altri tools validi come Traceur e Closure anche se probabilmente ad oggi lo strumento che meglio supporta il processo di transpilazione a nostro modesto parere è Babel.js.
Babel.js
Babel.js è il tool più popolare e quello che meglio interpreta il processo di transpilazione. Babel.js è stato realizzato da Sebastian McKenzie, un programmatore australiano che portò in auge il proprio tool grazie all’utilizzo frequente con React.js.
Transpilazione in browser e fuori dal browser
Due sono i tipi di transpilazione che si possono effettuare con Babel.js:
Transpilazione in browser
Transpilare in browser con Babel.js è sconsigliato, il processo di transpilazione viene effettuato a run time e va a rallentare il caricamento delle pagine peggiorando il funzionamento delle performance della nostra applicazione.
Transpilazione fuori dal browser
Per la transpilazione fuori dal browser possiamo utilizzare Babel e Babel node.
Per effettuare questo genere di transpilazione viene installato il modulo node Babel e si utilizza Babel node, avendo a disposizione il comando shell che useremo proprio in questo modo:
Installando Babel.cli, Babel loader transpilerà il codice ES6 in ES5.
Per ultimo però dobbiamo ricordarci, nel root della nostra applicazione, proprio dove risiede il nostro file di configurazione di Webpack, di inserire il comando di run del tool, così come qui sotto:
Attenzione, se il file transpilato comprende solo ed esclusivamente del file di front end basta semplicemente includere lo script bundle.js nel file html.
Dai un’occhiata al nostro Corso JavaScript e al Corso Vue.js LaraMind, unico quest’ultimo in Italia nel suo genere, in aula e da remoto!
