Bun开发技能Skill bun-development

Bun开发技能专注于使用Bun运行时进行现代JavaScript和TypeScript开发,涵盖包管理、打包、测试和从Node.js迁移。适用于提升开发速度、优化项目性能或迁移现有Node.js项目。关键词:Bun, JavaScript, TypeScript, 开发工具, 包管理, 测试框架, 性能优化, 迁移指南。

前端开发 0 次安装 0 次浏览 更新于 3/21/2026

名称: bun-development 描述: “使用Bun运行时进行现代JavaScript/TypeScript开发。涵盖包管理、打包、测试和从Node.js迁移。适用于使用Bun、优化JS/TS开发速度或从Node.js迁移到Bun的场景。”

⚡ Bun开发

使用Bun运行时进行快速、现代的JavaScript/TypeScript开发,灵感来源于oven-sh/bun

何时使用此技能

在以下情况下使用此技能:

  • 使用Bun启动新的JS/TS项目
  • 从Node.js迁移到Bun
  • 优化开发速度
  • 使用Bun的内置工具(打包器、测试运行器)
  • 解决Bun特定问题

1. 入门指南

1.1 安装

# macOS / Linux
curl -fsSL https://bun.sh/install | bash

# Windows
powershell -c "irm bun.sh/install.ps1 | iex"

# Homebrew
brew tap oven-sh/bun
brew install bun

# npm(如果需要)
npm install -g bun

# 升级
bun upgrade

1.2 为什么选择Bun?

特性 Bun Node.js
启动时间 ~25ms ~100ms+
包安装速度 10-100倍更快 基准
TypeScript 原生支持 需要转译器
JSX 原生支持 需要转译器
测试运行器 内置 外部(Jest, Vitest)
打包器 内置 外部(Webpack, esbuild)

2. 项目设置

2.1 创建新项目

# 初始化项目
bun init

# 创建文件:
# ├── package.json
# ├── tsconfig.json
# ├── index.ts
# └── README.md

# 使用特定模板
bun create <模板> <项目名称>

# 示例
bun create react my-app        # React应用
bun create next my-app         # Next.js应用
bun create vite my-app         # Vite应用
bun create elysia my-api       # Elysia API

2.2 package.json

{
  "name": "my-bun-project",
  "version": "1.0.0",
  "module": "index.ts",
  "type": "module",
  "scripts": {
    "dev": "bun run --watch index.ts",
    "start": "bun run index.ts",
    "test": "bun test",
    "build": "bun build ./index.ts --outdir ./dist",
    "lint": "bunx eslint ."
  },
  "devDependencies": {
    "@types/bun": "latest"
  },
  "peerDependencies": {
    "typescript": "^5.0.0"
  }
}

2.3 tsconfig.json(Bun优化版)

{
  "compilerOptions": {
    "lib": ["ESNext"],
    "module": "esnext",
    "target": "esnext",
    "moduleResolution": "bundler",
    "moduleDetection": "force",
    "allowImportingTsExtensions": true,
    "noEmit": true,
    "composite": true,
    "strict": true,
    "downlevelIteration": true,
    "skipLibCheck": true,
    "jsx": "react-jsx",
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "allowJs": true,
    "types": ["bun-types"]
  }
}

3. 包管理

3.1 安装包

# 从package.json安装
bun install              # 或 'bun i'

# 添加依赖
bun add express          # 常规依赖
bun add -d typescript    # 开发依赖
bun add -D @types/node   # 开发依赖(别名)
bun add --optional pkg   # 可选依赖

# 从特定注册表
bun add lodash --registry https://registry.npmmirror.com

# 安装特定版本
bun add react@18.2.0
bun add react@latest
bun add react@next

# 从git安装
bun add github:user/repo
bun add git+https://github.com/user/repo.git

3.2 移除与更新

# 移除包
bun remove lodash

# 更新包
bun update              # 更新所有
bun update lodash       # 更新特定包
bun update --latest     # 更新到最新(忽略范围)

# 检查过时包
bun outdated

3.3 bunx(相当于npx)

# 执行包二进制文件
bunx prettier --write .
bunx tsc --init
bunx create-react-app my-app

# 使用特定版本
bunx -p typescript@4.9 tsc --version

# 不安装直接运行
bunx cowsay "Hello from Bun!"

3.4 锁文件

# bun.lockb是二进制锁文件(解析更快)
# 生成文本锁文件用于调试:
bun install --yarn    # 创建yarn.lock

# 信任现有锁文件
bun install --frozen-lockfile

4. 运行代码

4.1 基本执行

# 直接运行TypeScript(无需构建步骤!)
bun run index.ts

# 运行JavaScript
bun run index.js

# 带参数运行
bun run server.ts --port 3000

# 运行package.json脚本
bun run dev
bun run build

# 简写形式(用于脚本)
bun dev
bun build

4.2 监视模式

# 文件更改时自动重启
bun --watch run index.ts

# 带热重载
bun --hot run server.ts

4.3 环境变量

// .env文件自动加载!

// 访问环境变量
const apiKey = Bun.env.API_KEY;
const port = Bun.env.PORT ?? "3000";

// 或使用process.env(Node.js兼容)
const dbUrl = process.env.DATABASE_URL;
# 使用特定env文件运行
bun --env-file=.env.production run index.ts

5. 内置API

5.1 文件系统(Bun.file)

// 读取文件
const file = Bun.file("./data.json");
const text = await file.text();
const json = await file.json();
const buffer = await file.arrayBuffer();

// 文件信息
console.log(file.size); // 字节
console.log(file.type); // MIME类型

// 写入文件
await Bun.write("./output.txt", "Hello, Bun!");
await Bun.write("./data.json", JSON.stringify({ foo: "bar" }));

// 流式处理大文件
const reader = file.stream();
for await (const chunk of reader) {
  console.log(chunk);
}

5.2 HTTP服务器(Bun.serve)

const server = Bun.serve({
  port: 3000,

  fetch(request) {
    const url = new URL(request.url);

    if (url.pathname === "/") {
      return new Response("Hello World!");
    }

    if (url.pathname === "/api/users") {
      return Response.json([
        { id: 1, name: "Alice" },
        { id: 2, name: "Bob" },
      ]);
    }

    return new Response("Not Found", { status: 404 });
  },

  error(error) {
    return new Response(`Error: ${error.message}`, { status: 500 });
  },
});

console.log(`Server running at http://localhost:${server.port}`);

5.3 WebSocket服务器

const server = Bun.serve({
  port: 3000,

  fetch(req, server) {
    // 升级到WebSocket
    if (server.upgrade(req)) {
      return; // 已升级
    }
    return new Response("Upgrade failed", { status: 500 });
  },

  websocket: {
    open(ws) {
      console.log("Client connected");
      ws.send("Welcome!");
    },

    message(ws, message) {
      console.log(`Received: ${message}`);
      ws.send(`Echo: ${message}`);
    },

    close(ws) {
      console.log("Client disconnected");
    },
  },
});

5.4 SQLite(Bun.sql)

import { Database } from "bun:sqlite";

const db = new Database("mydb.sqlite");

// 创建表
db.run(`
  CREATE TABLE IF NOT EXISTS users (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name TEXT NOT NULL,
    email TEXT UNIQUE
  )
`);

// 插入
const insert = db.prepare("INSERT INTO users (name, email) VALUES (?, ?)");
insert.run("Alice", "alice@example.com");

// 查询
const query = db.prepare("SELECT * FROM users WHERE name = ?");
const user = query.get("Alice");
console.log(user); // { id: 1, name: "Alice", email: "alice@example.com" }

// 查询所有
const allUsers = db.query("SELECT * FROM users").all();

5.5 密码哈希

// 哈希密码
const password = "super-secret";
const hash = await Bun.password.hash(password);

// 验证密码
const isValid = await Bun.password.verify(password, hash);
console.log(isValid); // true

// 使用算法选项
const bcryptHash = await Bun.password.hash(password, {
  algorithm: "bcrypt",
  cost: 12,
});

6. 测试

6.1 基本测试

// math.test.ts
import { describe, it, expect, beforeAll, afterAll } from "bun:test";

describe("数学运算", () => {
  it("两个数字相加", () => {
    expect(1 + 1).toBe(2);
  });

  it("两个数字相减", () => {
    expect(5 - 3).toBe(2);
  });
});

6.2 运行测试

# 运行所有测试
bun test

# 运行特定文件
bun test math.test.ts

# 运行匹配模式
bun test --grep "adds"

# 监视模式
bun test --watch

# 带覆盖率
bun test --coverage

# 超时设置
bun test --timeout 5000

6.3 匹配器

import { expect, test } from "bun:test";

test("匹配器", () => {
  // 相等性
  expect(1).toBe(1);
  expect({ a: 1 }).toEqual({ a: 1 });
  expect([1, 2]).toContain(1);

  // 比较
  expect(10).toBeGreaterThan(5);
  expect(5).toBeLessThanOrEqual(5);

  // 真值性
  expect(true).toBeTruthy();
  expect(null).toBeNull();
  expect(undefined).toBeUndefined();

  // 字符串
  expect("hello").toMatch(/ell/);
  expect("hello").toContain("ell");

  // 数组
  expect([1, 2, 3]).toHaveLength(3);

  // 异常
  expect(() => {
    throw new Error("fail");
  }).toThrow("fail");

  // 异步
  await expect(Promise.resolve(1)).resolves.toBe(1);
  await expect(Promise.reject("err")).rejects.toBe("err");
});

6.4 模拟

import { mock, spyOn } from "bun:test";

// 模拟函数
const mockFn = mock((x: number) => x * 2);
mockFn(5);
expect(mockFn).toHaveBeenCalled();
expect(mockFn).toHaveBeenCalledWith(5);
expect(mockFn.mock.results[0].value).toBe(10);

// 监视方法
const obj = {
  method: () => "original",
};
const spy = spyOn(obj, "method").mockReturnValue("mocked");
expect(obj.method()).toBe("mocked");
expect(spy).toHaveBeenCalled();

7. 打包

7.1 基本构建

# 为生产环境打包
bun build ./src/index.ts --outdir ./dist

# 带选项
bun build ./src/index.ts \
  --outdir ./dist \
  --target browser \
  --minify \
  --sourcemap

7.2 构建API

const result = await Bun.build({
  entrypoints: ["./src/index.ts"],
  outdir: "./dist",
  target: "browser", // 或 "bun", "node"
  minify: true,
  sourcemap: "external",
  splitting: true,
  format: "esm",

  // 外部包(不打包)
  external: ["react", "react-dom"],

  // 定义全局变量
  define: {
    "process.env.NODE_ENV": JSON.stringify("production"),
  },

  // 命名
  naming: {
    entry: "[name].[hash].js",
    chunk: "chunks/[name].[hash].js",
    asset: "assets/[name].[hash][ext]",
  },
});

if (!result.success) {
  console.error(result.logs);
}

7.3 编译为可执行文件

# 创建独立可执行文件
bun build ./src/cli.ts --compile --outfile myapp

# 交叉编译
bun build ./src/cli.ts --compile --target=bun-linux-x64 --outfile myapp-linux
bun build ./src/cli.ts --compile --target=bun-darwin-arm64 --outfile myapp-mac

# 嵌入资产
bun build ./src/cli.ts --compile --outfile myapp --embed ./assets

8. 从Node.js迁移

8.1 兼容性

// 大多数Node.js API开箱即用
import fs from "fs";
import path from "path";
import crypto from "crypto";

// process是全局的
console.log(process.cwd());
console.log(process.env.HOME);

// Buffer是全局的
const buf = Buffer.from("hello");

// __dirname和__filename工作
console.log(__dirname);
console.log(__filename);

8.2 常见迁移步骤

# 1. 安装Bun
curl -fsSL https://bun.sh/install | bash

# 2. 替换包管理器
rm -rf node_modules package-lock.json
bun install

# 3. 更新package.json中的脚本
# "start": "node index.js" → "start": "bun run index.ts"
# "test": "jest" → "test": "bun test"

# 4. 添加Bun类型
bun add -d @types/bun

8.3 与Node.js的区别

// ❌ Node.js特定(可能不工作)
require("module")             // 使用import代替
require.resolve("pkg")        // 使用import.meta.resolve
__non_webpack_require__       // 不支持

// ✅ Bun等效
import pkg from "pkg";
const resolved = import.meta.resolve("pkg");
Bun.resolveSync("pkg", process.cwd());

// ❌ 这些全局变量不同
process.hrtime()              // 使用Bun.nanoseconds()
setImmediate()                // 使用queueMicrotask()

// ✅ Bun特定功能
const file = Bun.file("./data.txt");  // 快速文件API
Bun.serve({ port: 3000, fetch: ... }); // 快速HTTP服务器
Bun.password.hash(password);           // 内置哈希

9. 性能提示

9.1 使用Bun原生API

// 慢(Node.js兼容)
import fs from "fs/promises";
const content = await fs.readFile("./data.txt", "utf-8");

// 快(Bun原生)
const file = Bun.file("./data.txt");
const content = await file.text();

9.2 使用Bun.serve进行HTTP

// 不要:Express/Fastify(开销大)
import express from "express";
const app = express();

// 做:Bun.serve(原生,快4-10倍)
Bun.serve({
  fetch(req) {
    return new Response("Hello!");
  },
});

// 或使用Elysia(Bun优化框架)
import { Elysia } from "elysia";
new Elysia().get("/", () => "Hello!").listen(3000);

9.3 为生产环境打包

# 始终为生产环境打包和压缩
bun build ./src/index.ts --outdir ./dist --minify --target node

# 然后运行打包文件
bun run ./dist/index.js

快速参考

任务 命令
初始化项目 bun init
安装依赖 bun install
添加包 bun add <pkg>
运行脚本 bun run <script>
运行文件 bun run file.ts
监视模式 bun --watch run file.ts
运行测试 bun test
构建 bun build ./src/index.ts --outdir ./dist
执行包 bunx <pkg>

资源