【前端】Bun：快速上手

Bun 是一个超快的 JavaScript 全栈工具链，集成了包管理器、构建器、运行时和开发服务器。

一、环境准备与工具安装

1.1 系统要求

• 操作系统：Windows 10/11
• 终端工具：PowerShell / Windows Terminal
• 可选工具：Git（用于版本控制）

1.2 安装 Bun

# 执行安装脚本（无需管理员权限）
powershell -c "irm bun.sh/install.ps1 | iex"

# 验证安装
bun --version

1.3 卸载 Bun

# 从系统中移除 Bun
> powershell -c ~\.bun\uninstall.ps1

二、项目初始化

2.1 创建基础结构

# 创建项目目录
mkdir bun-ts-app && cd bun-ts-app

# 初始化项目, 本教程不需要, 采用手动创建
bun init

下面是你要求的统一结构整理方式，适用于文档章节，例如 tsconfig.json 和 package.json 的讲解：

---

2.2 配置 TypeScript（tsconfig.json）

tsconfig.json 是 TypeScript 的配置文件，用于定义编译选项。虽然 Bun 默认支持 TypeScript，但该文件可以提供更严格的类型检查规则，并帮助编辑器理解代码结构。

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "noEmit": true
  }
}

字段名	含义说明
target	输出的 JavaScript 版本（这里为 ESNext，启用最新语法）
module	输出的模块系统（ESNext，使用原生 import/export）
moduleResolution	模块解析策略，bundler 表示使用 Bun 的内置解析器
strict	启用严格模式（包括 noImplicitAny、strictNullChecks 等）
noEmit	不输出 .js 文件，构建输出由 bun build 控制

2.3 定义运行脚本（package.json）

package.json 是项目的元数据和脚本命令入口。Bun 兼容 Node 风格，因此可以使用 scripts 字段定义常用的运行与构建命令，统一前后端开发流程。

{
  "scripts": {
    "dev:frontend": "bun dev frontend/index.html",
    "build:frontend": "bun build frontend/index.html --outdir dist/frontend",
    "dev:backend": "bun run backend/server.ts",
    "build:backend": "bun build backend/server.ts --compile --outfile dist/backend/server"
  }
}

脚本名	命令作用
dev:frontend	启动 Bun 的开发服务器，监听 HTML 和 TS 文件变化，实时更新页面
build:frontend	打包前端 HTML 和 TS 到 dist/frontend 目录
dev:backend	直接运行后端 server.ts 脚本，适用于本地开发调试
build:backend	将后端服务编译为原生可执行文件，输出到 dist/backend/server

参数名	含义说明
bun dev	启动内置开发服务器，支持热重载
bun build	构建并打包项目，支持前端文件合并和后端编译
--outdir	指定输出目录（用于前端）
--compile	编译为原生可执行文件（用于后端）
--outfile	指定输出文件路径名（用于后端）

2.4 目录结构

bun-ts-app/
├── frontend/     # 前端代码
├── backend/      # 后端代码
├── dist/         # 构建产物
├── tsconfig.json
└── package.json

三、前端开发实践

3.1 编写基础代码

<!-- frontend/index.html -->
<script type="module" src="./main.ts"></script>

<!-- frontend/main.ts -->
document.getElementById('greeting')!.textContent = 'Hello Bun!';

3.2 开发与构建

# 启动开发服务器（带热更新）
bun run dev:frontend

# 生产环境构建
bun run build:frontend

四、后端开发实践

4.1 编写服务端

// backend/server.ts
import { serve } from "bun";

serve({
  port: 3000,
  fetch: () => new Response("Bun Server Running")
});

4.2 运行与编译

# 开发模式运行
bun run dev:backend

# 编译为独立可执行文件
bun run build:backend

五、依赖管理指南

5.1 安装第三方库

# 前端库
bun add axios lodash

# 后端库
bun add sqlite3

5.2 前端使用示例

// frontend/main.ts
import axios from 'axios';

axios.get('/api/data').then(res => {
  console.log('Received:', res.data);
});

5.3 后端使用示例

// backend/server.ts
import Database from 'sqlite3';

const db = new Database.Database(':memory:');
db.run("CREATE TABLE users(id INTEGER PRIMARY KEY, name TEXT)");

六、项目构建结果

6.1 最终结构

bun-ts-app/
├── frontend/
│   ├── index.html
│   └── main.ts
├── backend/
│   └── server.ts
├── dist/
│   ├── frontend/  # 打包后的静态资源
│   └── backend/   # 编译后的可执行文件
└── package.json

6.2 关键优势

• 零配置：无需 Webpack/Vite 等构建工具
• 全栈统一：前后端共用同一工具链
• 高性能：Bun 的启动速度比传统工具快 5-10 倍