Plugin

Traduzione Beta Non Ufficiale

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

Le trasformazioni del codice di Babel sono abilitate applicando plugin (o preset) al tuo file di configurazione.

Utilizzo di un Plugin

Se il plugin è su npm, puoi inserire il nome del plugin e Babel verificherà che sia installato in node_modules. Questo viene aggiunto all'opzione di configurazione plugins, che accetta un array.

babel.config.json

{
  "plugins": ["babel-plugin-myPlugin", "@babel/plugin-transform-runtime"]
}

Puoi anche specificare un percorso relativo/assoluto per il tuo plugin.

babel.config.json

{
  "plugins": ["./node_modules/asdf/plugin"]
}

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

Plugin di Trasformazione

Questi plugin applicano trasformazioni al tuo codice.

informazioni

I plugin di trasformazione abilitano automaticamente il corrispondente plugin di sintassi, evitando di doverli specificare entrambi.

Plugin di Sintassi

La maggior parte della sintassi è trasformabile da Babel. In casi più rari (se la trasformazione non è ancora implementata o non esiste un metodo predefinito), puoi usare plugin come @babel/plugin-syntax-bigint per consentire a Babel solo di analizzare specifici tipi di sintassi. Oppure quando vuoi preservare il codice sorgente perché intendi usare Babel solo per analisi del codice o codemod.

consiglio

Non è necessario specificare il plugin di sintassi se è già in uso il corrispondente plugin di trasformazione, poiché lo abilita automaticamente.

In alternativa, puoi fornire qualsiasi opzione plugins del parser di Babel:

Il tuo .babelrc:

JSON

{
  "parserOpts": {
    "plugins": ["jsx", "flow"]
  }
}

Ordinamento dei Plugin

L'ordine è importante per ogni visitor nel plugin.

Ciò significa che se due trasformazioni accedono entrambe al nodo "Program", le trasformazioni verranno eseguite nell'ordine dei plugin o dei preset.

• I plugin vengono eseguiti prima dei preset.

• I plugin vengono elaborati in ordine dal primo all'ultimo.

• I preset vengono elaborati in ordine inverso (dall'ultimo al primo).

Ad esempio:

babel.config.json

{
  "plugins": ["transform-decorators-legacy", "transform-class-properties"]
}

Eseguirà prima transform-decorators-legacy e poi transform-class-properties.

È importante ricordare che con i preset, l'ordine è invertito. La configurazione seguente:

babel.config.json

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Verrà eseguita nell'ordine: prima @babel/preset-react e poi @babel/preset-env.

Opzioni dei Plugin

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

{
  "plugins": ["pluginA", ["pluginA"], ["pluginA", {}]]
}

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

babel.config.json

{
  "plugins": [
    [
      "transform-async-to-module-method",
      {
        "module": "bluebird",
        "method": "coroutine"
      }
    ]
  ]
}

L'impostazione delle opzioni per i preset funziona esattamente allo stesso modo:

babel.config.json

{
  "presets": [
    [
      "env",
      {
        "loose": true,
        "modules": false
      }
    ]
  ]
}

Sviluppo di Plugin

Consulta l'eccellente babel-handbook per imparare a creare i tuoi plugin.

Il semplice plugin che inverte i nomi (dalla homepage):

JavaScript

export default function() {
  return {
    visitor: {
      Identifier(path) {
        const name = path.node.name;
        // reverse the name: JavaScript -> tpircSavaJ
        path.node.name = name
          .split("")
          .reverse()
          .join("");
      },
    },
  };
}