Vai al contenuto principale

Guida all'Utilizzo

Traduzione Beta Non Ufficiale

Questa pagina è stata tradotta da PageTurner AI (beta). Non ufficialmente approvata dal progetto. Hai trovato un errore? Segnala problema →

La toolchain di Babel include diversi strumenti che semplificano l'utilizzo di Babel, sia che tu sia un "utente finale" o stia sviluppando un'integrazione di Babel stesso. Questa sarà una rapida introduzione a tali strumenti, mentre per maggiori dettagli puoi consultare la sezione "Utilizzo" della documentazione.

Se stai utilizzando un framework, la configurazione di Babel potrebbe differire o essere già gestita automaticamente. Consulta invece la nostra guida interattiva di configurazione.

Panoramica​

Questa guida ti mostrerà come compilare il codice della tua applicazione JavaScript che utilizza sintassi ES2015+ in codice compatibile con i browser attuali. Ciò comporterà sia la trasformazione della nuova sintassi che il polyfill delle funzionalità mancanti.

Il processo completo di configurazione prevede:

  1. Eseguire questi comandi per installare i pacchetti:

    npm install --save-dev @babel/core @babel/cli @babel/preset-env

  2. Creare un file di configurazione chiamato babel.config.json (richiede v7.8.0 o superiore) nella root del progetto con questo contenuto:

    babel.config.json
    {
      "presets": [
        [
          "@babel/preset-env",
          {
            "targets": {
              "edge": "17",
              "firefox": "60",
              "chrome": "67",
              "safari": "11.1"
            },
            "useBuiltIns": "usage",
            "corejs": "3.6.5"
          }
        ]
      ]
    }

    L'elenco di browser sopra riportato è solo un esempio arbitrario. Dovrai adattarlo ai browser che desideri supportare. Consulta qui per ulteriori opzioni di @babel/preset-env.

Oppure babel.config.js se stai utilizzando una versione precedente di Babel

babel.config.js
const presets = [
  [
    "@babel/preset-env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
      useBuiltIns: "usage",
      corejs: "3.6.4",
    },
  ],
];

module.exports = { presets };

  1. Eseguire questo comando per compilare tutto il codice dalla directory src alla directory lib:

    Shell
    ./node_modules/.bin/babel src --out-dir lib

    Puoi utilizzare il runner di pacchetti npm incluso in npm@5.2.0 per abbreviare il comando sostituendo ./node_modules/.bin/babel con npx babel

Prosegui per una spiegazione dettagliata del funzionamento e un'introduzione a ciascuno degli strumenti utilizzati.

Utilizzo di base con CLI​

Tutti i moduli di Babel sono pubblicati come pacchetti npm separati nell'ambito @babel (dalla versione 7). Questo design modulare consente diversi strumenti ognuno progettato per uno specifico caso d'uso. Qui esamineremo @babel/core e @babel/cli.

Libreria Core​

La funzionalità principale di Babel risiede nel modulo @babel/core. Dopo l'installazione:

npm install --save-dev @babel/core

puoi importarlo direttamente nel tuo programma JavaScript con require e utilizzarlo così:

JavaScript
const babel = require("@babel/core");

babel.transformSync("code", optionsObject);

Come utente finale, probabilmente preferirai installare altri strumenti che fungono da interfaccia per @babel/core e si integrano meglio nel tuo flusso di sviluppo. Tuttavia, potrebbe comunque esserti utile consultare la documentazione per conoscere le opzioni disponibili, molte delle quali possono essere configurate anche tramite altri strumenti.

Strumento CLI​

@babel/cli è uno strumento che ti consente di utilizzare Babel dal terminale. Ecco il comando di installazione e un esempio di utilizzo base:

npm install --save-dev @babel/core @babel/cli

./node_modules/.bin/babel src --out-dir lib

Questo analizzerà tutti i file JavaScript nella directory src, applicherà le trasformazioni specificate e produrrà ogni file nella directory lib. Poiché non abbiamo ancora indicato alcuna trasformazione, il codice in output sarà identico all'input (la formattazione esatta non viene preservata). Possiamo specificare le trasformazioni desiderate passandole come opzioni.

Abbiamo utilizzato l'opzione --out-dir sopra. Puoi visualizzare il resto delle opzioni accettate dallo strumento CLI eseguendolo con --help. Ma le più importanti per noi in questo momento sono --plugins e --presets.

Plugin e Preset​

Le trasformazioni avvengono tramite plugin, piccoli programmi JavaScript che istruiscono Babel su come effettuare trasformazioni al codice. Puoi persino scrivere i tuoi plugin per applicare qualsiasi trasformazione desiderata. Per trasformare la sintassi ES2015+ in ES5 possiamo utilizzare plugin ufficiali come @babel/plugin-transform-arrow-functions:

npm install --save-dev @babel/plugin-transform-arrow-functions

./node_modules/.bin/babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions

Ora tutte le funzioni freccia nel nostro codice verranno trasformate in espressioni di funzione compatibili con ES5:

JavaScript
const fn = () => 1;

// converted to

var fn = function fn() {
  return 1;
};

È un buon inizio! Ma abbiamo anche altre funzionalità ES2015+ nel codice che vogliamo trasformare. Invece di aggiungere tutti i plugin uno per uno, possiamo usare un "preset", ovvero un insieme predefinito di plugin.

Proprio come per i plugin, puoi creare anche i tuoi preset per condividere qualsiasi combinazione di plugin necessaria. Per il nostro caso d'uso, esiste un preset eccellente chiamato env.

npm install --save-dev @babel/preset-env

./node_modules/.bin/babel src --out-dir lib --presets=@babel/env

Senza alcuna configurazione, questo preset includerà tutti i plugin per supportare JavaScript moderno (ES2015, ES2016, ecc.). Ma i preset possono accettare opzioni. Invece di passare sia le opzioni CLI che quelle del preset dal terminale, esaminiamo un altro modo: i file di configurazione.

Configurazione​

Esistono diversi modi per utilizzare file di configurazione in base alle tue esigenze. Leggi la nostra guida approfondita su come configurare Babel per maggiori informazioni.

Per ora, creiamo un file chiamato babel.config.json (richiede v7.8.0 o superiore) con il seguente contenuto:

babel.config.json
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        }
      }
    ]
  ]
}

Ora il preset env caricherà solo i plugin di trasformazione per le funzionalità non disponibili nei browser di destinazione. Siamo a posto per la sintassi. Ora passiamo ai polyfill.

Polyfill​

🚨 As a partire da Babel 7.4.0, questo pacchetto è deprecato in favore dell'inclusione diretta di core-js/stable (per fornire polyfill delle funzionalità ECMAScript):

JavaScript
import "core-js/stable";

Se stai compilando generatori o funzioni asincrone in ES5 e usi una versione di @babel/core o @babel/plugin-transform-regenerator precedente alla 7.18.0, devi anche caricare il pacchetto regenerator runtime. Viene caricato automaticamente quando si usa l'opzione useBuiltIns: "usage" di @babel/preset-env o @babel/plugin-transform-runtime.

Il modulo @babel/polyfill include core-js e un regenerator runtime personalizzato per emulare un ambiente ES2015+ completo.

Ciò significa che puoi usare nuovi built-in come Promise o WeakMap, metodi statici come Array.from o Object.assign, metodi di istanza come Array.prototype.includes e funzioni generatore (se usate con il plugin regenerator). Il polyfill aggiunge allo scope globale e ai prototipi nativi come String.

Per gli autori di librerie/strumenti questo potrebbe essere eccessivo. Se non ti servono metodi di istanza come Array.prototype.includes, puoi evitare di inquinare lo scope globale usando il plugin transform runtime invece di @babel/polyfill.

Per andare oltre, se sai esattamente di quali polyfill hai bisogno, puoi importarli direttamente da core-js.

Dato che stiamo costruendo un'applicazione, possiamo semplicemente installare @babel/polyfill:

npm install --save @babel/polyfill

Notare l'opzione --save invece di --save-dev poiché si tratta di un polyfill che deve essere eseguito prima del codice sorgente.

Fortunatamente per noi, stiamo utilizzando il preset env che include l'opzione "useBuiltIns" che, impostata su "usage", applica praticamente l'ultima ottimizzazione menzionata includendo solo i polyfill necessari. Con questa nuova opzione la configurazione cambia così:

babel.config.json
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage"
      }
    ]
  ]
}

Babel analizzerà ora tutto il codice alla ricerca delle funzionalità mancanti nei tuoi ambienti target e includerà solo i polyfill richiesti. Ad esempio questo codice:

JavaScript
Promise.resolve().finally();

verrebbe trasformato così (perché Edge 17 non supporta Promise.prototype.finally):

JavaScript
require("core-js/modules/es.promise.finally");

Promise.resolve().finally();

Se non avessimo utilizzato il preset env con l'opzione "useBuiltIns" impostata su "usage" (il valore predefinito è "false"), avremmo dovuto richiedere il polyfill completo una sola volta nel nostro entry point prima di qualsiasi altro codice.

Ad esempio:

babel.config.json
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "entry"
      }
    ]
  ]
}

Then import core-js (to polyfill ECMAScript features) first, in our entry file to emulate a full ES2015+ environment since @babel/polyfill has been deprecated:

JavaScript
 import "core-js/stable";

Abbiamo utilizzato @babel/cli per eseguire Babel dal terminale, @babel/polyfill per fornire tutte le nuove funzionalità JavaScript, e il preset env per includere solo le trasformazioni e i polyfill necessari per le funzionalità che utilizziamo e che mancano nei browser target.

Per maggiori informazioni sulla configurazione di Babel con il tuo sistema di build, IDE e altro, consulta la nostra guida interattiva al setup.