Bun 开箱即用支持 .jsx 和 .tsx 文件。Bun 的内部转译器在执行之前将 JSX 语法转换为纯 JavaScript。
ts
function Component(props: {message: string}) {
return (
<body>
<h1 style={{color: 'red'}}>{props.message}</h1>
</body>
);
}
console.log(<Component message="Hello world!" />);配置
Bun 读取你的 tsconfig.json 或 jsconfig.json 配置文件来确定如何在内部执行 JSX 转换。为避免使用其中任何一个，以下选项也可以在 bunfig.toml 中定义。
以下编译器选项会被尊重。
jsx
JSX 构造如何在内部转换为纯 JavaScript。下表列出了 jsx 的可能值，以及它们对以下简单 JSX 组件的转译：
tsx
<Box width={5}>Hello</Box>| 编译器选项 | 转译输出 |
|---|---|
json<br/>{<br/> "jsx": "react"<br/>}<br/> | tsx<br/>import { createElement } from "react";<br/>createElement("Box", { width: 5 }, "Hello");<br/> |
json<br/>{<br/> "jsx": "react-jsx"<br/>}<br/> | tsx<br/>import { jsx } from "react/jsx-runtime";<br/>jsx("Box", { width: 5 }, "Hello");<br/> |
json<br/>{<br/> "jsx": "react-jsxdev"<br/>}<br/> | tsx<br/>import { jsxDEV } from "react/jsx-dev-runtime";<br/>jsxDEV(<br/> "Box",<br/> { width: 5, children: "Hello" },<br/> undefined,<br/> false,<br/> undefined,<br/> this,<br/>);<br/>jsxDEV 变量名是 React 使用的约定。DEV 后缀是一个可见的方式，表明代码旨在用于开发。React 的开发版本较慢，包含额外的有效性检查和调试工具。 |
json<br/>{<br/> "jsx": "preserve"<br/>}<br/> | tsx<br/>// JSX 未被转译<br/>// Bun 目前不支持 "preserve"<br/><Box width={5}>Hello</Box><br/> |
jsxFactory
NOTE
**注意** — 仅当 `jsx` 为 `react` 时适用。用于表示 JSX 构造的函数名。默认值为 "createElement"。这对于像 Preact 这样使用不同函数名（"h"）的库很有用。
| 编译器选项 | 转译输出 |
|---|---|
json<br/>{<br/> "jsx": "react",<br/> "jsxFactory": "h"<br/>}<br/> | tsx<br/>import { h } from "react";<br/>h("Box", { width: 5 }, "Hello");<br/> |
jsxFragmentFactory
NOTE
**注意** — 仅当 `jsx` 为 `react` 时适用。用于表示 JSX 片段（如 <>Hello</>）的函数名；仅当 jsx 为 react 时适用。默认值为 "Fragment"。
| 编译器选项 | 转译输出 |
|---|---|
json<br/>{<br/> "jsx": "react",<br/> "jsxFactory": "myjsx",<br/> "jsxFragmentFactory": "MyFragment"<br/>}<br/> | tsx<br/>// 输入<br/><>Hello</>;<br/><br/>// 输出<br/>import { myjsx, MyFragment } from "react";<br/>myjsx(MyFragment, null, "Hello");<br/> |
jsxImportSource
NOTE
**注意** — 仅当 `jsx` 为 `react-jsx` 或 `react-jsxdev` 时适用。组件工厂函数（createElement、jsx、jsxDEV 等）将从中导入的模块。默认值为 "react"。这通常在使用像 Preact 这样的组件库时需要。
| 编译器选项 | 转译输出 |
|---|---|
jsonc<br/>{<br/> "jsx": "react",<br/> // jsxImportSource 未定义<br/> // 默认为 "react"<br/>}<br/> | tsx<br/>import { jsx } from "react/jsx-runtime";<br/>jsx("Box", { width: 5, children: "Hello" });<br/> |
jsonc<br/>{<br/> "jsx": "react-jsx",<br/> "jsxImportSource": "preact",<br/>}<br/> | tsx<br/>import { jsx } from "preact/jsx-runtime";<br/>jsx("Box", { width: 5, children: "Hello" });<br/> |
jsonc<br/>{<br/> "jsx": "react-jsxdev",<br/> "jsxImportSource": "preact",<br/>}<br/> | tsx<br/>// /jsx-runtime 自动附加<br/>import { jsxDEV } from "preact/jsx-dev-runtime";<br/>jsxDEV(<br/> "Box",<br/> { width: 5, children: "Hello" },<br/> undefined,<br/> false,<br/> undefined,<br/> this,<br/>);<br/> |
JSX pragma
所有这些值都可以使用 pragma 在每个文件的基础上设置。pragma 是一个特殊注释，用于在特定文件中设置编译器选项。
| Pragma | 等效配置 |
|---|---|
ts<br/>// @jsx h<br/> | jsonc<br/>{<br/> "jsxFactory": "h",<br/>}<br/> |
ts<br/>// @jsxFrag MyFragment<br/> | jsonc<br/>{<br/> "jsxFragmentFactory": "MyFragment",<br/>}<br/> |
ts<br/>// @jsxImportSource preact<br/> | jsonc<br/>{<br/> "jsxImportSource": "preact",<br/>}<br/> |
日志记录
Bun 实现了特殊的 JSX 日志记录，使调试更容易。给定以下文件：
tsx
import { Stack, UserCard } from "./components";
console.log(
<Stack>
<UserCard name="Dom" bio="Street racer and Corona lover" />
<UserCard name="Jakob" bio="Super spy and Dom's secret brother" />
</Stack>,
);Bun 将在日志记录时漂亮地打印组件树：
属性简写
Bun 运行时还支持 JSX 的"属性简写"。这是一种有用的简写语法，用于将变量分配给同名的属性。
tsx
function Div(props: {className: string;}) {
const {className} = props;
// 不使用简写
return <div className={className} />;
// 使用简写
return <div {className} />;
}