Blog

Linguaggio JavaScript

Compilare JavaScript ES6 in JavaScript ES5: transpiler Babbel

Guide

Compilare JavaScript ES6 in JavaScript ES5: transpiler Babbel

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!

Immagine non utilizzabile esternamente.