Vai al contenuto principale

Preset

Traduzione Beta Non Ufficiale

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

I preset di Babel possono fungere da insieme condivisibile di plugin Babel e/o options di configurazione.

Preset ufficiali​

Abbiamo preparato alcuni preset per ambienti comuni:

Altre integrazioni​

Se non stai utilizzando Babel direttamente, il framework in uso potrebbe fornire una configurazione da utilizzare o estendere. Molti altri preset mantenuti dalla community sono disponibili su npm!

Next.js | Nuxt.js | Parcel | Jest | Gatsby

Utilizzo di un preset​

All'interno di una configurazione Babel, se il preset è disponibile su npm, puoi passare il suo nome e Babel verificherà che sia già installato in node_modules. Questo viene aggiunto all'opzione di configurazione preset, che accetta un array.

babel.config.json
{
  "presets": ["babel-preset-myPreset", "@babel/preset-env"]
}

In alternativa, puoi specificare un percorso relativo o assoluto per i tuoi preset.

babel.config.json
{
  "presets": ["./myProject/myPreset"]
}

Consulta la sezione sulla normalizzazione dei nomi per maggiori dettagli sulla configurazione del percorso di un plugin o preset.

Stage-X (Preset sperimentali)​

Deprecato

A partire da Babel 7, abbiamo deciso di deprecare i preset Stage-X e interromperne la pubblicazione. Poiché queste proposte sono intrinsecamente soggette a modifiche, è preferibile chiedere agli utenti di specificare singole proposte come plugin piuttosto che un preset generico che richiederebbe comunque verifiche. Consulta il nostro blog per maggiori dettagli.

Qualsiasi trasformazione nei preset stage-x rappresenta modifiche al linguaggio non ancora approvate per una release JavaScript (come ES6/ES2015).

Il TC39 classifica le proposte nelle seguenti fasi:

  • Stage 0 - Strawman: solo un'idea, potenziale plugin Babel.

  • Stage 1 - Proposal: merita lavoro di sviluppo.

  • Stage 2 - Draft: specifica iniziale.

  • Stage 3 - Candidate: specifica completa e implementazioni iniziali nei browser.

  • Stage 4 - Finished: verrà incluso nella prossima release annuale.

Per maggiori informazioni, consulta le proposte TC39 attuali e il relativo documento di processo.

Il processo di stage di TC39 è inoltre spiegato in dettaglio in alcuni articoli di Yehuda Katz (@wycatz) su thefeedbackloop.xyz: Stage 0 e 1, Stage 2, Stage 3

Creare un Preset​

Per creare un tuo preset (sia per uso locale che per npm), devi esportare un oggetto di configurazione.

Potrebbe semplicemente restituire un array di plugin..

JavaScript
module.exports = function() {
  return {
    plugins: ["pluginA", "pluginB", "pluginC"],
  };
};

I preset possono contenere altri preset e plugin con opzioni.

JavaScript
module.exports = () => ({
  presets: [require("@babel/preset-env")],
  plugins: [
    [require("@babel/plugin-transform-class-properties"), { loose: true }],
    require("@babel/plugin-transform-object-rest-spread"),
  ],
});

Per maggiori informazioni, consulta la sezione sui preset nel manuale di Babel.

Ordine dei Preset​

L'ordine dei preset è invertito (dall'ultimo al primo).

babel.config.json
{
  "presets": ["a", "b", "c"]
}

Verranno eseguiti nel seguente ordine: c, b, poi a.

Questa scelta è stata principalmente per garantire la compatibilità con le versioni precedenti, poiché la maggior parte degli utenti elencava "es2015" prima di "stage-0".

Opzioni dei Preset​

Sia i plugin che i preset possono ricevere opzioni specifiche racchiudendo nome e oggetto opzioni in un array all'interno della configurazione.

Per non specificare opzioni, queste forme sono equivalenti:

babel.config.json
{
  "presets": [
    "presetA", // bare string
    ["presetA"], // wrapped in array
    ["presetA", {}] // 2nd argument is an empty options object
  ]
}

Per specificare un'opzione, passa un oggetto con le chiavi corrispondenti ai nomi delle opzioni.

babel.config.json
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "loose": true,
        "modules": false
      }
    ]
  ]
}