Skip to content

Bun 開箱即支持 .jsx.tsx 文件。React 可以在 Bun 上直接運行。

使用 bun init --react 創建一個新的 React 應用。這將為你提供一個模板,包含一個簡單的 React 應用和一個簡單的 API 服務器,整合在一個全棧應用中。

bash
# 創建一個新的 React 應用
bun init --react

# 以開發模式運行應用
bun dev

# 構建為靜態站點用於生產
bun run build

# 以生產模式運行服務器
bun start

熱重載

運行 bun dev 以開發模式啟動應用。這將啟動 API 服務器和帶有熱重載功能的 React 應用。

全棧應用

運行 bun start 在一個進程中同時啟動 API 服務器和前端。

靜態站點

運行 bun run build 將應用構建為靜態站點。這將創建一個 dist 目錄,包含構建好的應用和所有資源。

txt
├── src/
│   ├── index.tsx       # 帶有 API 路由的服務器入口點
│   ├── frontend.tsx    # 帶有 HMR 的 React 應用入口點
│   ├── App.tsx         # 主要 React 組件
│   ├── APITester.tsx   # 用於測試 API 端點的組件
│   ├── index.html      # HTML 模板
│   ├── index.css       # 樣式
│   └── *.svg           # 靜態資源
├── package.json        # 依賴和腳本
├── tsconfig.json       # TypeScript 配置
├── bunfig.toml         # Bun 配置
└── bun.lock            # 鎖定文件

Bun學習網由www.bunjs.com.cn整理維護