前端打包app(7个让全栈开发效率起飞的 Bun 工作流)

前端打包app(7个让全栈开发效率起飞的 Bun 工作流)
7个让全栈开发效率起飞的 Bun 工作流

有没有谁敲下 npm install 后,电脑风扇开始狂转,好像随时就要起飞了。

随着 Bun 的出现,这种情况就好转了,Bun 把运行时、包管理器、打包工具、测试工具全塞进了一个二进制文件里,主打多快好省。

但光用上 Bun 还不够,得用得巧。今天就分享7个Bun工作流,提升你的全栈开发效率,减少掉发。


在开始之前,咱们先解决入门问题。要在电脑上装 Bun 或者 Node.js,就得得跟 nvm、brew 或者环境变量斗智斗勇。想跳过这些麻烦?那就用 ServBay。它能一键安装和管理多个版本的 Node.js 和 Bun,而且装完自带 npm,开箱即用,主打一个一步到位。


好了,环境搞定了,让我们正式发车!


用 bunx执行一次性命令,告别全局污染

都2025了,就别再用 npm install -g 装 CLI 工具了,一年到头都不见得用第二次,还会污染全局环境。务必要试试bunx ,临时下载并执行命令,用完就扔,干净利落。

# 用 Vite 创建一个新项目,全程无需全局安装bunx create-vite@latest my-vue-app --template vue-ts# 跑一下 ESLint 检查并自动修复bunx eslint . --fix


不管是电脑还是 CI/CD 服务器,大家用的都是同一个版本的工具,避免了“在我这儿好好的”这种经典扯皮。


闪电般的 install和铁板一块的锁文件

bun install 的速度快是出了名的,但它真正的杀手锏是生成一个高度一致、体积更小的 node_modules 目录。

# 如果 lock 文件有变动就直接报错,保证环境一致性bun install --frozen-lockfile# 在生产环境打包时,只安装 dependencies,不装 devDependenciesbun install --production


记得把 bun.lockb 这个二进制锁文件提交到 Git 仓库。在 CI 流程里用 --frozen-lockfile,能有效防止某个同事偷偷升级依赖。


Monorepo?用 Workspaces 就够了

项目一大,代码库就容易变成巨石应用。Monorepo(单体仓库)是解决方案之一,而 Bun 的 Workspaces 让这件事变得异常简单,甚至不需要 Lerna 或 Nx 这类重型武器。

在项目根目录 package.json 里这么写:

{  "name": "my-cool-project",  "private": true,  "workspaces": [    "apps/*",    "packages/*"  ],  "scripts": {    "dev": "bun run --filter \"./apps/*\" dev",    "build": "bun run --filter \"./packages/*\" build"  }}


这样一来,packages 里的公共模块能被 apps 里的应用直接引用,就像本地安装了一样,修改后立马生效。管理多个相关联的项目,从未如此清爽。


API + 前端,一个进程就搞定的开发服务器

Bun 内置的 HTTP 服务器小而快。随便配个轻量级框架(比如 Hono 或 ElysiaJS),就能把 API 服务和静态网站放在同一个进程里跑起来。

// server.tsimport { Hono } from 'hono';import { serveStatic } from 'hono/bun';const app = new Hono();// 你的 API 路由app.get('/api/users/:id', (c) => {  const { id } = c.req.param();  return c.json({ id, name: `User ${id}` });});// 托管前端打包好的静态文件app.use('/*', serveStatic({ root: './public' }));export default {  port: 8080,  fetch: app.fetch,};


启动它:bun --watch run server.ts

开发时,API 和前端都在一个地方,改完代码自动重载,调试起来方便多了。


bun build:打包代码,又快又小

Bun 不仅是运行时,还是个高效的打包工具。不管是给浏览器用的代码,还是给服务器跑的程序,它都能打出体积超小的包。

# 打包给浏览器用的前端代码bun build ./src/main.ts --outdir ./dist/client --sourcemap --minify# 打包给 Bun 或 Node.js 运行的后端服务bun build ./src/server.ts --target=bun --outdir ./dist/server


前端打包app(7个让全栈开发效率起飞的 Bun 工作流)

这功能非常适合用来打包一些给客户部署的独立小工具、云函数,或者优化 CI 流程。


bun test:零配置的极速测试体验

受够了配置 Jest、Babel、ts-jest 那一套全家桶了吗?Bun Test 可以开箱即用,并且利用了多核心并行测试,速度飞快。

写个测试文件:

// utils.test.tsimport { expect, test, describe } from "bun:test";const capitalize = (str: string) => {  if (!str) return '';  return str.charAt(0).toUpperCase() + str.slice(1);}describe("capitalize function", () => {  test("should capitalize the first letter", () => {    expect(capitalize("hello")).toBe("Hello");  });  test("should return an empty string if input is empty", () => {    expect(capitalize("")).toBe("");  });});

然后运行:bun test

它还自带了 watch 模式和覆盖率报告,功能一点都不少。写测试的体验顺滑得让人想多写几个。


零依赖的环境变量管理,跟 dotenv 说拜拜

每个项目都少不了处理数据库地址、API 密钥这类敏感信息。过去我们都得装个 dotenv 包,然后在代码入口处小心翼翼地 require('dotenv').config()。

有了 Bun,这事儿就成了历史。Bun 会自动加载项目根目录下的 .env 文件。

创建一个 .env 文件:

DATABASE_URL="postgresql://user:pass@host:port/db"JWT_SECRET="a-very-secret-string-that-is-long"


然后,代码里直接就能用 Bun.env 来访问它们,连 import 都不需要。

// config.tsfunction getRequiredEnv(key: string): string {  const value = Bun.env[key];  if (!value) {    throw new Error(`喂!环境变量 "${key}" 没设置啊!`);  }  return value;}export const config = {  dbUrl: getRequiredEnv("DATABASE_URL"),  jwtSecret: getRequiredEnv("JWT_SECRET"),};


这样做的好处是,少装一个包,项目就轻一分。而且通过一个简单的辅助函数,就能确保所有必需的配置在程序启动时都已就位,否则直接报错退出。这可比程序跑到一半才发现连不上数据库要友好多了。


注意有坑

  1. Node.js 原生模块兼容性:Bun 尽力兼容了 Node.js API,但不是 100%。如果某个库深度依赖了 Node.js 的 C++ 底层模块,可能会出问题。
  2. 导入旧模块(CJS)时的 default 兼容问题:当你用 import 去加载一个使用 require/module.exports 的老库时,有时需要通过 yourImport.default 才能拿到真正的导出内容,这是最常见的小坑。
  3. 二进制的 bun.lockb 文件:Bun 的锁文件是二进制格式,这有助于提升解析速度。但它的坏处是,当合并分支时如果遇到冲突,没法像解决 package-lock.json 冲突那样手动编辑它,通常只能选择一方的版本然后重新 bun install。


总结一下

Bun 的核心思想就是整合,它把过去需要用五六个工具才能搞定的事情,用一个工具就漂亮地解决了。从依赖管理到测试打包,流程顺畅了,开发体验自然就好了。

而一个好的开始是成功的一半。在体验 Bun 带来的丝滑开发流程之前,不妨先用 ServBay 来搞定环境安装这个前置任务。它铺好了路,用户能更快地在 Bun 的世界里驰骋。

文章版权声明:除非注明,否则均为边学边练网络文章,版权归原作者所有

相关阅读