Bun 預設支援 .jsx
和 .tsx
檔案。Bun 的內部轉譯器會在執行前將 JSX 語法轉換為純 JavaScript。
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 元件的轉譯結果
<Box width={5}>Hello</Box>
編譯器選項 | 轉譯輸出 |
---|---|
|
|
|
|
|
|
|
|
jsxFactory
注意 — 僅在 jsx
為 react
時適用。
用於表示 JSX 建構子的函式名稱。預設值為 "createElement"
。這對於像 Preact 這樣使用不同函式名稱("h"
)的函式庫很有用。
編譯器選項 | 轉譯輸出 |
---|---|
|
|
jsxFragmentFactory
注意 — 僅在 jsx
為 react
時適用。
用於表示 JSX 片段(例如 <>Hello</>
)的函式名稱;僅在 jsx
為 react
時適用。預設值為 "Fragment"
。
編譯器選項 | 轉譯輸出 |
---|---|
|
|
jsxImportSource
注意 — 僅在 jsx
為 react-jsx
或 react-jsxdev
時適用。
將從中匯入元件工廠函式(createElement
、jsx
、jsxDEV
等)的模組。預設值為 "react"
。當使用像 Preact 這樣的元件函式庫時,這通常是必要的。
編譯器選項 | 轉譯輸出 |
---|---|
|
|
|
|
|
|
JSX 註解
所有這些值都可以使用*註解*在每個檔案的基礎上設定。註解是一種特殊的註解,用於在特定檔案中設定編譯器選項。
註解 | 等效設定 |
---|---|
|
|
|
|
|
|
日誌記錄
Bun 為 JSX 實作了特殊的日誌記錄,以簡化偵錯。假設有以下檔案
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 的「屬性簡寫」。這是一種簡寫語法,適用於將變數指派給同名的屬性。
function Div(props: {className: string;}) {
const {className} = props;
// without punning
return <div className={className} />;
// with punning
return <div {className} />;
}