⚡

BunSvelteKit开发 BunSvelteKit

这项技能专注于利用Bun运行时高效开发和部署SvelteKit应用程序，涵盖服务器端渲染、适配器配置、Bun API集成以及数据库和文件操作等关键功能，适用于快速构建高性能Web应用，关键词包括SvelteKit、Bun、SSR、适配器、数据库操作、文件操作。

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

名称: Bun SvelteKit 描述: 在构建或运行SvelteKit应用程序时使用Bun，包括SSR、适配器和Bun特定API 关键词: [SvelteKit, Svelte 5, Bun, SSR, 适配器, Vite, 数据库, 文件操作]

Bun SvelteKit

使用Bun运行SvelteKit应用程序，以实现更快的开发和构建。

快速开始

# 创建新的SvelteKit项目
bunx sv create my-app
cd my-app

# 安装依赖
bun install

# 开发
bun run dev

# 构建
bun run build

# 预览
bun run preview

项目设置

package.json

{
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@sveltejs/adapter-auto": "^7.0.0",
    "@sveltejs/kit": "^2.0.0",
    "svelte": "^5.0.0",
    "vite": "^7.3.0"
  }
}

使用Bun适配器

bun add -D svelte-adapter-bun

// svelte.config.js
import adapter from "svelte-adapter-bun";
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";

/** @type {import('@sveltejs/kit').Config} */
export default {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter(),
  },
};

使用Bun API

服务器加载函数

// src/routes/users/+page.server.ts
import { Database } from "bun:sqlite";
import type { PageServerLoad } from "./$types";

export const load: PageServerLoad = async () => {
  const db = new Database("data.sqlite");
  const users = db.query("SELECT * FROM users").all();
  db.close();

  return { users };
};

表单操作

// src/routes/users/+page.server.ts
import { Database } from "bun:sqlite";
import type { Actions } from "./$types";
import { fail } from "@sveltejs/kit";

export const actions: Actions = {
  create: async ({ request }) => {
    const data = await request.formData();
    const name = data.get("name") as string;

    if (!name) {
      return fail(400, { error: "名称必填" });
    }

    const db = new Database("data.sqlite");
    db.run("INSERT INTO users (name) VALUES (?)", [name]);
    db.close();

    return { success: true };
  },

  delete: async ({ request }) => {
    const data = await request.formData();
    const id = data.get("id") as string;

    const db = new Database("data.sqlite");
    db.run("DELETE FROM users WHERE id = ?", [id]);
    db.close();

    return { success: true };
  },
};

API路由

// src/routes/api/users/+server.ts
import { Database } from "bun:sqlite";
import { json } from "@sveltejs/kit";
import type { RequestHandler } from "./$types";

export const GET: RequestHandler = async () => {
  const db = new Database("data.sqlite");
  const users = db.query("SELECT * FROM users").all();
  db.close();

  return json(users);
};

export const POST: RequestHandler = async ({ request }) => {
  const { name } = await request.json();

  const db = new Database("data.sqlite");
  const result = db.run("INSERT INTO users (name) VALUES (?)", [name]);
  db.close();

  return json({ id: result.lastInsertRowid });
};

文件操作

// src/routes/api/files/[name]/+server.ts
import type { RequestHandler } from "./$types";

export const GET: RequestHandler = async ({ params }) => {
  const file = Bun.file(`./data/${params.name}`);

  if (!(await file.exists())) {
    return new Response("未找到", { status: 404 });
  }

  return new Response(file);
};

export const PUT: RequestHandler = async ({ params, request }) => {
  const content = await request.text();
  await Bun.write(`./data/${params.name}`, content);

  return new Response("已保存");
};

服务器钩子

// src/hooks.server.ts
import type { Handle } from "@sveltejs/kit";
import { Database } from "bun:sqlite";

// 启动时初始化数据库
const db = new Database("data.sqlite");
db.run(`
  CREATE TABLE IF NOT EXISTS users (
    id INTEGER PRIMARY KEY,
    name TEXT NOT NULL
  )
`);

export const handle: Handle = async ({ event, resolve }) => {
  // 添加数据库到locals
  event.locals.db = db;

  // 身份验证检查
  const session = event.cookies.get("session");
  if (session) {
    event.locals.user = await getUser(session);
  }

  return resolve(event);
};

// src/app.d.ts
import type { Database } from "bun:sqlite";

declare global {
  namespace App {
    interface Locals {
      db: Database;
      user?: { id: number; name: string };
    }
  }
}

Svelte 5 组件

<!-- src/routes/users/+page.svelte -->
<script lang="ts">
  import type { PageData } from "./$types";

  let { data }: { data: PageData } = $props();
  let { users } = $derived(data);

  let name = $state("");
</script>

<h1>用户</h1>

<form method="POST" action="?/create">
  <input type="text" name="name" bind:value={name} />
  <button type="submit">添加用户</button>
</form>

<ul>
  {#each users as user}
    <li>
      {user.name}
      <form method="POST" action="?/delete" style="display: inline">
        <input type="hidden" name="id" value={user.id} />
        <button type="submit">删除</button>
      </form>
    </li>
  {/each}
</ul>

部署

为Bun构建

bun run build
bun ./build/index.js

Docker

FROM oven/bun:1 AS builder

WORKDIR /app
COPY package.json bun.lockb ./
RUN bun install --frozen-lockfile

COPY . .
RUN bun run build

FROM oven/bun:1

WORKDIR /app
COPY --from=builder /app/build ./build
COPY --from=builder /app/package.json ./

EXPOSE 3000

CMD ["bun", "./build/index.js"]

适配器选项

// svelte.config.js
import adapter from "svelte-adapter-bun";

export default {
  kit: {
    adapter: adapter({
      out: "build",
      precompress: true, // 生成.gz和.br文件
      envPrefix: "",     // 环境变量前缀
      development: false,
      dynamic_origin: true,
      xff_depth: 1,
    }),
  },
};

环境变量

# .env
DATABASE_URL=./data.sqlite
PUBLIC_API_URL=https://api.example.com

// 在服务器代码中访问
import { DATABASE_URL } from "$env/static/private";
import { PUBLIC_API_URL } from "$env/static/public";

// 或动态访问
import { env } from "$env/dynamic/private";
const dbUrl = env.DATABASE_URL;

常见错误

错误 原因 修复方法
Cannot find bun:sqlite 适配器错误 使用svelte-adapter-bun
Vite error 构建问题 清除.svelte-kit
Hydration failed 服务器/客户端差异 检查加载函数
404 on refresh SPA回退 配置适配器

何时加载参考

加载 references/adapter-config.md 当：

  • 高级适配器选项
  • 静态预渲染
  • 边缘部署

加载 references/performance.md 当：

  • 缓存策略
  • 懒加载
  • 流式SSR