Skip to main content

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

信息

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

¥This plugin is included in @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

输入

¥In

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

输出

¥Out

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 classic
        "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

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

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