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!
