Skip to main content

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

info

这个插件包含在 @babel/preset-react 中

这个插件是 @babel/plugin-transform-react-jsx 的开发者版本。它旨在为调试 React 应用提供更详细的验证错误信息和精确的代码位置信息。请注意，这个插件是用于开发环境的，因为它生成的输出比生产版本多得多。

🌐 This plugin is a developer version of @babel/plugin-transform-react-jsx. It is designed to provide enhanced validation error messages and precise code location information for debugging React apps. Note that this plugin is intended to be used in a development environment, as it generates significantly more outputs than the production build.

如果你正在使用@babel/preset-react，它会被development选项自动启用，所以你不需要安装它。

🌐 If you are using @babel/preset-react, it will be automatically enabled by the development option so you don't have to install it.

示例​

🌐 Example

在

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

出

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

用法​

🌐 Usage

🌐 With a configuration file (Recommended)

没有选项：

🌐 Without options:

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

有选项：

🌐 With options:

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

通过 CLI​

🌐 Via CLI

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

通过 Node API​

🌐 Via Node API

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

选项​

🌐 Options

sourceSelf​

boolean，默认值为 false。

当 true 时，这个插件会在 jsxDEV 调用中生成 __source 和 __self 参数。这些参数曾被旧版本的 React 用于开发警告，但从 React 19.2 开始已经被移除了。

🌐 When true, the plugin generates __source and __self arguments in jsxDEV calls. These were used by older versions of React for development warnings but have been removed since React 19.2.

如果你使用的 React 版本低于 19.2，或者使用依赖这些参数的自定义 JSX 运行时，就把这个设置为 true。

🌐 Set this to true if you are using a React version older than 19.2 or a custom JSX runtime that depends on these arguments.

它接受与 @babel/plugin-transform-react-jsx 相同的选项。

🌐 It accepts the same options as @babel/plugin-transform-react-jsx.