跳到主要内容

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

信息

This plugin is included in @babel/preset-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.

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

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

Via CLI

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

Via Node API

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

Options

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