Blog

Transpilatore Babel: guida al suo utilizzo-#2

Tempo di lettura: 3 minuti

Il transpilatore Babel ci consente di transpilare , ossia convertire, l’ultima release di ESx in una compatibile con tutti i browser attuali.

Come visto nel precedente tutorial la release ES6 ha aggiunto ottime funzionalità a JavaScript. Purtroppo queste ad oggi non sono ancora del tutto  compatibili con browser, più datati, quali possono essere,ad esempio, internet explorer 9 .

Utilizzo del transpilatore Babel

Innanzitutto colleghiamoci al sito di Babel e fate click nel menu su try it out, vi si apre una pagina come in figura sotto:

dove a sinistra scriverete il codice in ES6 ed a destra questo verrà transpilato automaticamente in una versione compatibile. Se fate click nella freccia che vi trovate lateralmente questa espande un menu a tendina dove poter effettuare delle personalizzazioni:

quindi sul menu setting ‘flaggate‘ le voci Evaluate e Line Wrap ,mentre su Presets scegliete il linguaggio da transpilare (nel nostro caso sceglieremo ES2015 che equivale a ES6).

Ora ,che siete pronti, provate a scrivere del codice in ES6 partendo dalle variabili (cosa che vedremo in uno dei  prossimi tutorial):

let b = 2;
const a = 1;

come avrete notato a destra , ossia nella zona del codice transpilato, ora vi è:

"use strict";

var b = 2;
var a = 1;

sia const che let sono state tradotte in var anche se fra le due vi è un sostanziale differenza in quanto la prima non può essere riassegnata mentre la seconda si.

Nel prossimo tutorial vedremo un modo di transpilare il codice in linea e ,quindi offline, mediante il Webpack , ovvero,un Bundle  di moduli statici per le moderne applicazioni JavaScript.

Per il momento è tutto, prima di darvi appuntamento con la prossima guida  vi ricordo che se volete approfondire i concetti di Angular 7 potete farlo seguendo il mio videocorso “Angular dalla A alla Web App” .

Lascia la tua opinione