Spesso capita che il browser utilizzato dall’utente non sia compatibile con la versione di JavaScript in uso dal software sviluppato, come per esempio JavaScript ES6 o anche ES7.

In questo articolo vediamo come fare per aggirare questa limitazione in modo semplice per aumentare al massimo la compatibilità del nostro software.

Online è pieno di guide sull’utilizzo di Babbel, il problema è che sono davvero poco chiare! Quasi sempre vengono dati per scontato tantissimi aspetti e vengono illustrate tantissime configurazioni, senza mai arrivare davvero al dunque.

Questa guida è dedicata a chi vuole semplicemente arrivare ad avere un comando dal terminale per compilare un file da ES6 a ES5.

Il problema

Un utente potrebbe visitare il nostro sito da un vecchio computer o da uno smartphone di qualche anno fa e notare dei problemi causati da un mancato supporto alle ultime versioni di JavaScript.

La soluzione

Ecco di seguito la guida pratica con i vari passaggi da eseguire per compilare un file da JavaScript ES6 (o successivi) a ES5:

• Aprire il vostro terminale e recarvi all’interno della cartella del progetto
• All’interno della cartella eseguire il seguente comando per inizializzare l’ambiente NodeJS:

  npm init --yes

• A questo punto possiamo installare all’interno del progetto i seguenti pacchetti:

  npm i --save-dev babel-cli babel-preset-env

• Creare un file di configurazione per Babel (verrà utilizzato quando verrà eseguito il comando per la compilazione):

  touch .babelrc

• Scrivere il seguente testo all’interno del file appena creato:

  { "presets": ["env"] }

• Abbiamo finito! Adesso possiamo compilare i nostri files con un semplice comando. Supponendo di avere una cartella src con tutti i nostri files JavaScript, ci basta lanciare il seguente comando per compilare tutti i files e posizionarli all’interno di della cartella src_es5 (il comando è ricorsivo, quindi verranno letti e compilati i files nelle sottocartelle di src):

  ./node_modules/.bin/babel src -d src_es5

Vi saluto, alla prossima!