Aller au contenu principal

@babel/preset-react

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Ce préréglage inclut toujours les plugins suivants :

Et avec l'option development :

Le runtime classique ajoute :

Le runtime automatique (depuis v7.9.0) ajoute automatiquement la fonctionnalité de ces plugins lorsque l'option development est activée. Si le runtime automatique est activé, l'ajout de @babel/plugin-transform-react-jsx-self ou @babel/plugin-transform-react-jsx-source provoquera une erreur.

Note : La syntaxe Flow n'est plus activée dans la v7. Pour cela, vous devrez ajouter le préréglage Flow.

Installation​

Vous pouvez également consulter la page de démarrage de React.

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

Utilisation​

Avec un fichier de configuration (Recommandé)​

Sans options :

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

Avec options :

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)
      }
    ]
  ]
}

Via CLI​

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

Via l'API Node​

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

Options​

Pour les deux runtimes​

runtime​

classic | automatic, par défaut classic

Ajouté dans : v7.9.0

Note : Le runtime par défaut passera à automatic dans Babel 8.

Détermine quel runtime utiliser.

automatic importe automatiquement les fonctions vers lesquelles JSX est transpilé. classic n'importe rien automatiquement.

development​

boolean, par défaut false.

Ceci active ou désactive le comportement spécifique au développement, comme l'ajout de __source et __self.

Ceci est utile lorsqu'il est combiné avec la configuration de l'option env ou les fichiers de configuration js.

throwIfNamespace​

boolean, par défaut true.

Active ou désactive le fait de lever une erreur si un nom de balise avec un espace de noms XML est utilisé. Par exemple :

Bien que la spécification JSX le permette, cette fonctionnalité est désactivée par défaut car le JSX de React ne la prend actuellement pas en charge.

pure​

boolean, par défaut true.

Active @babel/plugin-transform-react-pure-annotations. Cela marquera les appels de méthodes React de haut niveau comme purs pour le tree shaking.

Runtime automatique React​

importSource​

string, par défaut react.

Ajouté dans : v7.9.0

Remplace la source d'import lors de l'importation des fonctions.

Runtime classique React​

pragma​

string, par défaut React.createElement.

Remplace la fonction utilisée lors de la compilation des expressions JSX. Doit être un nom qualifié (ex. React.createElement) ou un identifiant (ex. createElement).

pragmaFrag​

string, par défaut React.Fragment.

Remplace le composant utilisé lors de la compilation des fragments JSX. Il doit s'agir d'un nom de balise JSX valide.

useBuiltIns​

boolean, par défaut false.

avertissement

Cette option sera supprimée dans Babel 8. Définissez useBuiltIns à true si vous ciblez des navigateurs modernes.

Utilisera les fonctionnalités natives intégrées au lieu de tenter de fournir un polyfill pour les plugins qui en nécessitent un.

useSpread​

boolean, par défaut false.

Ajouté dans : v7.7.0

avertissement

Cette option sera supprimée dans Babel 8. Définissez useSpread à true si vous ciblez des navigateurs modernes.

Lors de l'étalement des props, utilise directement un objet en ligne avec des éléments étalés au lieu de l'helper extend de Babel ou de Object.assign.

babel.config.js​

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

babel.config.json​

Remarque : l'option env sera probablement bientôt dépréciée

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

Vous pouvez en savoir plus sur la configuration des options des préconfigurations ici