@babel/plugin-transform-react-jsx-development

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 →

información

Este plugin está incluido en @babel/preset-react

Este plugin es una versión para desarrolladores de @babel/plugin-transform-react-jsx. Está diseñado para proporcionar mensajes de error de validación mejorados e información precisa de ubicación del código para depurar aplicaciones React. Ten en cuenta que este plugin está destinado a usarse en entornos de desarrollo, ya que genera una salida significativamente mayor que la compilación de producción.

Si estás usando @babel/preset-react, se habilitará automáticamente mediante la opción development, por lo que no necesitas instalarlo.

Ejemplo

Entrada

input.jsx

const profile = (
  <div>
    <img src="avatar.png" className="profile" />
    <h3>{[user.firstName, user.lastName].join(" ")}</h3>
  </div>
);

Salida

output.js

import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";

const _jsxFileName = "input.jsx";
const profile = _jsxDEV("div", {
  children: [
    _jsxDEV("img", {
      src: "avatar.png",
      className: "profile",
    }, undefined, false, { fileName: _jsxFileName, lineNumber: 3, columnNumber: 5 }, this),
    _jsxDEV("h3", {
      children: [user.firstName, user.lastName].join(" "),
    }, undefined, false, { fileName: _jsxFileName, lineNumber: 4, columnNumber: 5 }, this),
  ]},
  undefined, false, { fileName: _jsxFileName, lineNumber: 2, columnNumber: 3 }, this
);

Instalación

npm

npm install --save-dev @babel/plugin-transform-react-jsx-development

Yarn

yarn add --dev @babel/plugin-transform-react-jsx-development

pnpm

pnpm add --save-dev @babel/plugin-transform-react-jsx-development

Bun

bun add --dev @babel/plugin-transform-react-jsx-development

Uso

Mediante un archivo de configuración (Recomendado)

Sin opciones:

babel.config.json

{
  "plugins": ["@babel/plugin-transform-react-jsx-development"]
}

Con opciones:

babel.config.json

{
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx-development",
      {
        "throwIfNamespace": false, // defaults to true
        "runtime": "automatic", // defaults to classic
        "importSource": "custom-jsx-library" // defaults to react
      }
    ]
  ]
}

Mediante la CLI

Shell

babel --plugins @babel/plugin-transform-react-jsx-development script.js

Mediante la API de Node

JavaScript

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

Opciones

Acepta las mismas opciones que @babel/plugin-transform-react-jsx.