使用 SvelteKit 和 Bun 构建应用

使用 sv create my-app 通过 SvelteKit CLI 创建一个 SvelteKit 项目。回答提示以选择模板并设置你的开发环境。

terminal

bunx sv create my-app

┌  欢迎使用 Svelte CLI！(v0.5.7)
│
◇  你想使用哪个模板？
│  SvelteKit 演示
│
◇  是否使用 TypeScript 添加类型检查？
│  是，使用 TypeScript 语法
│
◆  项目已创建
│
◇  你想为项目添加什么？
│  无
│
◇  你想使用哪个包管理器安装依赖？
│  bun
│
◇  依赖安装成功
│
◇  项目后续步骤 ─────────────────────────────────────────────────────╮
│                                                                      │
│  1: cd my-app                                                        │
│  2: git init && git add -A && git commit -m "Initial commit"（可选） │
│  3: bun run dev -- --open                                            │
│                                                                      │
│  要关闭开发服务器，按 Ctrl-C                                         │
│                                                                      │
│  卡住了？访问 https://svelte.dev/chat                                │
│                                                                      │
├──────────────────────────────────────────────────────────────────────╯
│
└  一切就绪！

项目初始化后，cd 进入新项目。依赖已经安装，因此你无需运行 bun install。然后使用 bun --bun run dev 启动开发服务器。要用 Node.js 而非 Bun 运行开发服务器，省略 --bun 标志。

terminal

cd my-app
bun --bun run dev

  $ vite dev
  强制重新优化依赖

    VITE v5.4.10 在 424 毫秒内准备就绪

    ➜  本地：   http://localhost:5173/
    ➜  网络：   使用 --host 暴露
    ➜  按 h + enter 显示帮助

在浏览器中访问 http://localhost:5173 查看模板应用。

编辑并保存 src/routes/+page.svelte，你的更改将在浏览器中热重载。

要为生产环境构建，你需要一个 SvelteKit 适配器。我们推荐 svelte-adapter-bun；使用 bun add -D svelte-adapter-bun 安装。然后对你的 svelte.config.js 进行以下更改。

svelte.config.js

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

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // 有关预处理器的更多信息，请查阅 https://svelte.dev/docs/kit/integrations#preprocessors
  preprocess: vitePreprocess(),

  kit: {
    // adapter-auto 只支持部分环境，请查看 https://svelte.dev/docs/kit/adapter-auto 获取列表。
    // 如果你的环境不受支持，或者你选定了特定环境，请切换适配器。
    // 有关适配器的更多信息，请查看 https://svelte.dev/docs/kit/adapters
    adapter: adapter(),
  },
};

export default config;

要构建生产包：

terminal

bun --bun run build

  $ vite build
  vite v5.4.10 正在为生产环境构建 SSR 包...
  "confetti" 已从外部模块 "@neoconfetti/svelte" 导入，但未在 "src/routes/sverdle/+page.svelte" 中使用
  ✓ 130 个模块已转换。
  vite v5.4.10 正在为生产环境构建...
  ✓ 148 个模块已转换。
  ...
  ✓ 在 231ms 内构建完成
  ...
  ✓ 在 899ms 内构建完成

  运行 npm run preview 在本地预览你的生产构建。

  > 使用 svelte-adapter-bun
    ✔ 使用以下命令启动服务器：bun ./build/index.js
    ✔ 完成

使用 StricJS 和 Bun 构建 HTTP 服务器

使用 systemd 将 Bun 作为守护进程运行

⌘I

概览

部署

运行时与调试

实用工具

生态系统与框架

HTTP 与网络

WebSocket

进程与系统

包管理器

测试运行器

运行时与调试

模块系统

文件系统

实用工具

HTML 处理

二进制数据

流

使用 SvelteKit 和 Bun 构建应用