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

示例

🌐 Example

在

JavaScript

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

出

JavaScript

var profile = React.DOM.div(
  null,
  React.DOM.img({ src: "avatar.png", class: "profile" }),
  React.DOM.h3(null, [user.firstName, user.lastName].join(" "))
);

安装

🌐 Installation

npm

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

Yarn

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

pnpm

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

Bun

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

用法

🌐 Usage

使用配置文件（推荐）

🌐 With a configuration file (Recommended)

babel.config.json

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

通过 CLI

🌐 Via CLI

Shell

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

通过 Node API

🌐 Via Node API

JavaScript

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