Vai al contenuto principale

@babel/preset-react

Traduzione Beta Non Ufficiale

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

Questo preset include sempre i seguenti plugin:

E con l'opzione development:

Il runtime classico aggiunge:

Il runtime automatico (dalla versione v7.9.0) aggiunge automaticamente la funzionalità di questi plugin quando l'opzione development è abilitata. Se si utilizza il runtime automatico, l'aggiunta manuale di @babel/plugin-transform-react-jsx-self o @babel/plugin-transform-react-jsx-source genererà un errore.

Nota: Il supporto per la sintassi Flow non è più abilitato in v7. Per utilizzarlo, è necessario aggiungere il preset Flow.

Installazione​

Puoi anche consultare la pagina introduttiva di React

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

Utilizzo​

Con un file di configurazione (Consigliato)​

Senza opzioni:

babel.config.json
{
  "presets": ["@babel/preset-react"]
}

Con opzioni:

babel.config.json
{
  "presets": [
    [
      "@babel/preset-react",
      {
        "pragma": "dom", // default pragma is React.createElement (only in classic runtime)
        "pragmaFrag": "DomFrag", // default is React.Fragment (only in classic runtime)
        "throwIfNamespace": false, // defaults to true
        "runtime": "classic" // defaults to classic
        // "importSource": "custom-jsx-library" // defaults to react (only in automatic runtime)
      }
    ]
  ]
}

Tramite CLI​

Shell
babel --presets @babel/preset-react script.js

Tramite Node API​

JavaScript
require("@babel/core").transformSync("code", {
  presets: ["@babel/preset-react"],
});

Opzioni​

Entrambi i Runtime​

runtime​

classic | automatic, default: classic

Aggiunto in: v7.9.0

Nota: Il runtime predefinito verrà cambiato in automatic in Babel 8.

Determina quale runtime utilizzare.

automatic importa automaticamente le funzioni a cui viene transpilato JSX. classic non importa automaticamente nulla.

development​

boolean, predefinito false.

Abilita comportamenti specifici per lo sviluppo, come l'aggiunta di __source e __self.

Utile in combinazione con la configurazione dell'opzione env o dei file di configurazione js.

throwIfNamespace​

boolean, default: true.

Abilita/disabilita la generazione di un errore quando viene utilizzato un nome di tag con namespace XML. Esempio:

Sebbene lo standard JSX lo permetta, questa opzione è disabilitata di default poiché lo JSX di React non la supporta attualmente.

pure​

boolean, default: true.

Abilita @babel/plugin-transform-react-pure-annotations. Contrassegna le chiamate ai metodi React di primo livello come pure per il tree shaking.

Runtime Automatico di React​

importSource​

string, default: react.

Aggiunto in: v7.9.0

Sostituisce la sorgente di importazione quando si importano funzioni.

Runtime Classico di React​

pragma​

string, default: React.createElement.

Sostituisce la funzione utilizzata durante la compilazione delle espressioni JSX. Deve essere un nome qualificato (es. React.createElement) o un identificatore (es. createElement).

pragmaFrag​

string, default: React.Fragment.

Sostituisce il componente utilizzato durante la compilazione dei frammenti JSX. Deve essere un nome di tag JSX valido.

useBuiltIns​

boolean, default: false.

avviso

Questa opzione verrà rimossa in Babel 8. Imposta useBuiltIns su true se stai puntando a browser moderni.

Utilizzerà le funzionalità native invece di tentare di fornire un polyfill per qualsiasi plugin che lo richieda.

useSpread​

boolean, default: false.

Aggiunto in: v7.7.0

avviso

Questa opzione verrà rimossa in Babel 8. Imposta useSpread su true se stai puntando a browser moderni.

Quando si effettua lo spread delle props, utilizza direttamente oggetti inline con elementi spread invece dell'helper extend di Babel o Object.assign.

File babel.config.js​

babel.config.js
module.exports = {
  presets: [
    [
      "@babel/preset-react",
      {
        development: process.env.BABEL_ENV === "development",
      },
    ],
  ],
};

File babel.config.json​

Nota: l'opzione env verrà probabilmente deprecata a breve

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

Ulteriori informazioni sulla configurazione delle opzioni dei preset sono disponibili qui