Saltar al contenido principal

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

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Nota​

Cuando se usa junto con @babel/plugin-transform-runtime, los polyfills (que por defecto incluyen Symbol) tienen un alcance específico para no contaminar el ámbito global. Esto interrumpe el uso con React, ya que no tendrá acceso a ese polyfill y hará que tu aplicación falle en navegadores antiguos.

Incluso si se especifica ['@babel/plugin-transform-runtime', { helpers: true, polyfill: false }], aún podría fallar, ya que los helpers vienen precompilados.

En este caso, recomendamos importar/requerir @babel/polyfill en el punto de entrada de tu aplicación y usar @babel/preset-env con la opción useBuiltIns para incluir únicamente los polyfills que tus objetivos necesitan. Alternativamente, también puedes importar/requerir core-js/modules/es6.symbol por sí solo.

Esta transformación debe habilitarse solo en producción (por ejemplo, justo antes de minificar tu código) porque, aunque mejora el rendimiento en tiempo de ejecución, hace que los mensajes de advertencia sean más crípticos y omite verificaciones importantes que ocurren en modo desarrollo, incluyendo propTypes.

Ejemplo​

Entrada

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

Salida

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

Instalación​

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

Uso​

Mediante un archivo de configuración (Recomendado)​

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

Mediante la CLI​

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

Mediante la API de Node​

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

Referencias​