Aller au contenu principal

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

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 →

info

Ce plugin est inclus dans @babel/preset-react

Ce plugin est une version pour développeurs de @babel/plugin-transform-react-jsx. Il est conçu pour fournir des messages d'erreur de validation améliorés et des informations précises sur l'emplacement du code lors du débogage d'applications React. Notez que ce plugin est destiné à être utilisé dans un environnement de développement, car il génère des sorties bien plus volumineuses que la version de production.

Si vous utilisez @babel/preset-react, il sera automatiquement activé par l'option development, vous n'avez donc pas besoin de l'installer séparément.

Exemple​

Entrée

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

Sortie

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
);

Installation​

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

Utilisation​

Avec un fichier de configuration (Recommandé)​

Sans options :

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

Avec options :

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

Via CLI​

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

Via l'API Node​

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

Options​

Il accepte les mêmes options que @babel/plugin-transform-react-jsx.