Bun

指南生态系统

使用 Bun 构建 React 应用

Bun 开箱即用地支持 .jsx.tsx 文件。React 与 Bun 完美兼容。

使用 bun init --react 创建一个新的 React 应用。这会为您提供一个模板,其中包含一个简单的 React 应用和一个简单的 API 服务器,它们都位于一个全栈应用中。

# Create a new React app
bun init --react

# Run the app in development mode
bun dev

# Build as a static site for production
bun run build

# Run the server in production
bun start

热重载

运行 bun dev 以在开发模式下启动应用程序。这将启动 API 服务器和 React 应用,并支持热重载。

全栈应用

运行 bun start 以在单个进程中启动 API 服务器和前端。

静态站点

运行 bun run build 将应用构建为静态站点。这将创建一个 dist 目录,其中包含构建的应用和所有资产。

├── src/
│   ├── index.tsx       # 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
├── bunfig.toml         # Bun configuration
└── bun.lock            # Lock file