当前位置：首页 > news >正文

【前端】Bun：快速上手

news 来源：原创 2025/5/24 8:50:44

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