Aller au contenu principal

@babel/plugin-transform-react-inline-elements

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 →

Remarque​

Lorsqu'il est utilisé avec @babel/plugin-transform-runtime, les polyfills (incluant par défaut Symbol) sont délimités spécifiquement pour ne pas polluer la portée globale. Cela interrompt le fonctionnement avec React, qui n'aura pas accès à ce polyfill, entraînant des échecs de votre application dans les navigateurs hérités.

Même si ['@babel/plugin-transform-runtime', { helpers: true, polyfill: false }] est spécifié, cela peut quand même échouer, car les helpers sont précompilés.

Dans ce cas, nous recommandons d'importer/requérir @babel/polyfill au point d'entrée de votre application et d'utiliser @babel/preset-env avec l'option useBuiltIns pour n'inclure que les polyfills nécessaires à vos cibles. Alternativement, vous pouvez aussi importer/requérir core-js/modules/es6.symbol seul.

Cette transformation ne devrait être activée qu'en production (par exemple, juste avant la minification de votre code) car, bien qu'elle améliore les performances d'exécution, elle rend les messages d'avertissement plus cryptiques et ignore des vérifications importantes du mode développement, notamment les propTypes.

Exemple​

Entrée

JavaScript
<Baz foo="bar" key="1" />

Sortie

JavaScript
babelHelpers.jsx(
  Baz,
  {
    foo: "bar",
  },
  "1"
);

/**
 * Instead of
 *
 * React.createElement(Baz, {
 *   foo: "bar",
 *   key: "1",
 * });
 */

Deopt

JavaScript
// The plugin will still use React.createElement when `ref` or `object rest spread` is used
<Foo ref="bar" />
<Foo {...bar} />

Installation​

npm install --save-dev @babel/plugin-transform-react-inline-elements

Utilisation​

Avec un fichier de configuration (Recommandé)​

babel.config.json
{
  "plugins": ["@babel/plugin-transform-react-inline-elements"]
}

Via CLI​

Shell
babel --plugins @babel/plugin-transform-react-inline-elements script.js

Via l'API Node​

JavaScript
require("@babel/core").transformSync("code", {
  plugins: ["@babel/plugin-transform-react-inline-elements"],
});

Références​