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} />;
}