Configurare Babel

Traduzione Beta Non Ufficiale

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

Babel può essere configurato! Molti altri strumenti hanno configurazioni simili: ESLint (.eslintrc), Prettier (.prettierrc).

Tutte le opzioni dell'API Babel sono consentite. Tuttavia, se un'opzione richiede JavaScript, potresti preferire un file di configurazione JavaScript.

Qual è il tuo caso d'uso?

• Stai utilizzando un monorepo?

• Vuoi compilare node_modules?

babel.config.json fa al caso tuo!

• Hai una configurazione che si applica solo a una parte specifica del progetto?

.babelrc.json fa al caso tuo!

• Guy Fieri è il tuo eroe?

Ti consigliamo di usare il formato babel.config.json.

babel.config.json

Crea un file chiamato babel.config.json con il seguente contenuto nella root del tuo progetto (dove si trova il package.json).

babel.config.json

{
  "presets": [...],
  "plugins": [...]
}

Consulta la documentazione di babel.config.json per ulteriori opzioni di configurazione.

.babelrc.json

Crea un file chiamato .babelrc.json con il seguente contenuto nel tuo progetto.

.babelrc.json

{
  "presets": [...],
  "plugins": [...]
}

Consulta la documentazione di .babelrc per ulteriori opzioni di configurazione.

package.json

In alternativa, puoi specificare la configurazione .babelrc.json direttamente nel package.json usando la chiave babel in questo modo:

package.json

{
  "name": "my-package",
  "version": "1.0.0",
  "babel": {
    "presets": [ ... ],
    "plugins": [ ... ],
  }
}

File di configurazione JavaScript

Puoi anche creare file babel.config.js (come facciamo noi) e .babelrc.js utilizzando JavaScript:

babel.config.js

module.exports = function (api) {
  api.cache(true);

  const presets = [ ... ];
  const plugins = [ ... ];

  return {
    presets,
    plugins
  };
}

Hai accesso a tutte le API di Node.js, ad esempio per creare configurazioni dinamiche basate sull'ambiente di processo:

babel.config.js

module.exports = function (api) {
  api.cache(true);

  const presets = [ ... ];
  const plugins = [ ... ];

  if (process.env["ENV"] === "prod") {
    plugins.push(...);
  }

  return {
    presets,
    plugins
  };
}

Puoi approfondire i file di configurazione JavaScript nella documentazione dedicata

Utilizzo della CLI (@babel/cli)

Shell

babel --plugins @babel/plugin-transform-arrow-functions script.js

Consulta la documentazione di babel-cli per ulteriori opzioni di configurazione.

Utilizzo dell'API (@babel/core)

JavaScript

require("@babel/core").transformSync("code", {
  plugins: ["@babel/plugin-transform-arrow-functions"],
});

Consulta la documentazione di babel-core per ulteriori opzioni di configurazione.

Visualizzare le configurazioni effettive

Puoi chiedere a Babel di visualizzare le configurazioni effettive per un percorso di input specifico

Shell

# *nix or WSL
BABEL_SHOW_CONFIG_FOR=./src/myComponent.jsx npm start

powershell

$env:BABEL_SHOW_CONFIG_FOR = ".\src\myComponent.jsx"; npm start

BABEL_SHOW_CONFIG_FOR accetta percorsi di file sia assoluti che relativi. Se è un percorso relativo, verrà risolto a partire da cwd.

Dopo che Babel ha elaborato il file di input specificato da BABEL_SHOW_CONFIG_FOR, mostrerà le configurazioni effettive nella console. Ecco un esempio di output:

Babel configs on "/path/to/cwd/src/index.js" (ascending priority):
config /path/to/cwd/babel.config.json
{
  "sourceType": "script",
  "plugins": [
    "@foo/babel-plugin-1"
  ],
  "extends": "./my-extended.js"
}

config /path/to/cwd/babel.config.json .env["test"]
{
  "plugins": [
    [
      "@foo/babel-plugin-3",
      {
        "noDocumentAll": true
      },
    ]
  ]
}

config /path/to/cwd/babel.config.json .overrides[0]
{
  "test": "src/index.js",
  "sourceMaps": true
}

config /path/to/cwd/.babelrc
{}

programmatic options from @babel/cli
{
  "sourceFileName": "./src/index.js",
  "presets": [
    "@babel/preset-env"
  ],
  "configFile": "./my-config.js",
  "caller": {
    "name": "@babel/cli"
  },
  "filename": "./src/index.js"
}

Babel mostrerà le sorgenti di configurazione effettive ordinate per priorità crescente. Nell'esempio sopra, la priorità è:

babel.config.json < .babelrc < programmatic options from @babel/cli

In altre parole, babel.config.json viene sovrascritto da .babelrc, e .babelrc viene sovrascritto dalle opzioni programmatiche.

Per ogni sorgente di configurazione, Babel stampa gli elementi di configurazione applicabili (ad esempio overrides e env) in ordine di priorità crescente. Tipicamente ogni sorgente di configurazione contiene almeno un elemento - il contenuto radice delle configurazioni. Se hai configurato overrides o env, Babel non li mostrerà a livello radice, bensì produrrà un elemento di configurazione separato denominato .overrides[index], dove index indica la posizione dell'elemento. Ciò aiuta a determinare se l'elemento è effettivo sull'input e quali configurazioni sovrascriverà.

Se il tuo input viene ignorato da ignore o only, Babel indicherà che il file è stato ignorato.

Come Babel combina gli elementi di configurazione

La combinazione delle configurazioni in Babel è relativamente diretta. Le opzioni sovrascrivono quelle esistenti quando sono presenti e il loro valore non è undefined. Esistono tuttavia alcune eccezioni:

• Per assumptions, parserOpts e generatorOpts, gli oggetti vengono uniti anziché sostituiti.

• Per plugins e presets, vengono sostituiti in base all'identità del plugin/preset (oggetto/funzione) combinata con il nome dell'elemento.

Combinazione delle opzioni (eccetto plugin/preset)

Combinazione di plugin/preset

JavaScript

{
  sourceType: "script",
  assumptions: {
    setClassFields: true,
    iterableIsArray: false
  },
  env: {
    test: {
      sourceType: "module",
      assumptions: {
        iterableIsArray: true,
      },
    }
  }
};

Quando NODE_ENV è test, l'opzione sourceType verrà sostituita e l'opzione assumptions verrà unita. La configurazione effettiva è:

JavaScript

{
  sourceType: "module", // sourceType: "script" is overwritten
  assumptions: {
    setClassFields: true,
    iterableIsArray: true, // assumptions are merged by Object.assign
  },
}

Unione di Plugin/Preset

Combinazione di plugin/preset

JavaScript

plugins: [
  './other',
  ['./plug', { thing: true, field1: true }]
],
overrides: [{
  plugins: [
    ['./plug', { thing: false, field2: true }],
  ]
}]

L'elemento overrides verrà unito sopra le opzioni di primo livello. È importante notare che l'array plugins nel suo insieme non sostituisce semplicemente quello di primo livello. La logica di unione vedrà che "./plug" è lo stesso plugin in entrambi i casi, e { thing: false, field2: true } sostituirà le opzioni originali, risultando in una configurazione come

JavaScript

plugins: [
  './other',
  ['./plug', { thing: false, field2: true }],
],

Poiché l'unione si basa sull'identità e sul nome, è considerato un errore utilizzare lo stesso plugin con lo stesso nome due volte nello stesso array plugins/presets. Ad esempio:

JavaScript

plugins: ["./plug", "./plug"];

è considerato un errore, perché è identico a plugins: ['./plug']. Inoltre, anche

JavaScript

plugins: [["./plug", { one: true }], ["./plug", { two: true }]];

è considerato un errore, perché il secondo sostituirebbe sempre il primo.

è considerato errore perché il secondo sostituirebbe sempre il primo.

JavaScript

plugins: [
  ["./plug", { one: true }, "first-instance-name"],
  ["./plug", { two: true }, "second-instance-name"],
];

Perché a ciascuna istanza è stato assegnato un nome univoco e quindi un'identità univoca.