Vai al contenuto principale

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

Traduzione Beta Non Ufficiale

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

Nota​

Quando utilizzato insieme a @babel/plugin-transform-runtime, i polyfill (che includono Symbol per impostazione predefinita) vengono confinati in uno scope specifico per evitare di inquinare lo scope globale. Ciò compromette l'utilizzo con React, che non avrà accesso a quel polyfill causando il malfunzionamento dell'applicazione su browser legacy.

Anche specificando ['@babel/plugin-transform-runtime', { helpers: true, polyfill: false }], potrebbero comunque verificarsi problemi poiché gli helpers sono precompilati.

In questi casi consigliamo di importare/richiedere @babel/polyfill nel punto d'ingresso dell'applicazione e utilizzare @babel/preset-env con l'opzione useBuiltIns per includere solo i polyfill necessari per i tuoi target. In alternativa, puoi importare direttamente core-js/modules/es6.symbol.

Questa trasformazione dovrebbe essere abilitata solo in produzione (ad esempio immediatamente prima della minificazione) perché, sebbene migliori le prestazioni runtime, rende i messaggi d'avviso più criptici e bypassa importanti controlli attivi in modalità sviluppo, inclusi i propTypes.

Esempio​

In

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

Out

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} />

Installazione​

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

Utilizzo​

Con un file di configurazione (Consigliato)​

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

Tramite CLI​

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

Tramite Node API​

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

Riferimenti​