使用 Bun 建置 React 應用

Bun 內建支援 .jsx 和 .tsx 檔案。React 可以與 Bun 一起使用。

使用 bun init --react 建立一個新的 React 應用。這會給你一個模板：把 React 應用和 API 伺服器放在一個完整的全棧應用中。

terminal

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

# 在開發模式下執行應用
bun dev

# 建置為生產環境的靜態站點
bun run build

# 在生產環境下執行伺服器
bun start

熱過載

執行 bun dev 以在開發模式下啟動應用。這會啟動 API 伺服器和支援熱過載的 React 應用。

全棧應用

執行 bun start 可以在一個行程中同時啟動 API 伺服器和前端。

靜態站點

執行 bun run build 將應用建置為靜態站點。這會建立一個 dist 目錄，其中包含建置後的應用及其資源。

File

├── src/
│   ├── index.ts        # Server entry point with API routes
│   ├── frontend.tsx    # React app entry point with HMR
│   ├── App.tsx         # Main React component
│   ├── APITester.tsx   # Component for testing API endpoints
│   ├── index.html      # HTML template
│   ├── index.css       # Styles
│   └── *.svg           # Static assets
├── package.json        # Dependencies and scripts
├── tsconfig.json       # TypeScript configuration
├── bun-env.d.ts        # Type declarations for .svg and .css imports
├── bunfig.toml         # Bun configuration
└── bun.lock            # Lock file