使用 SvelteKit 和 Bun 构建应用

使用 sv create my-app 通过 Svelte 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 ms 内完成准备

    ➜  本地访问:   http://localhost:5173/
    ➜  网络访问: 使用 --host 参数以公开访问
    ➜  按 h + 回车 显示帮助

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

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

要构建生产版本，需要使用 SvelteKit 适配器。我们推荐使用 svelte-adapter-bun；使用 bun add -D svelte-adapter-bun 安装它。然后对 vite.config.ts（或 vite.config.js）进行以下更改。如果你的项目在 svelte.config.js 中配置 SvelteKit，请在那里替换适配器导入。

vite.config.ts

import adapter from "@sveltejs/adapter-auto"; 
import adapter from "svelte-adapter-bun"; 
import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    sveltekit({
      compilerOptions: {
        // Force runes mode for the project, except for libraries. Can be removed in svelte 6.
        runes: ({ filename }) => (filename.split(/[/\\]/).includes("node_modules") ? undefined : true),
      },

      // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
      // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
      // See https://svelte.dev/docs/kit/adapters for more information about adapters.
      adapter: adapter(),
    }),
  ],
});

构建生产包：

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 可在本地预览生产构建。

  > Using svelte-adapter-bun
    ✔ done

然后使用 bun ./build/index.js 启动生产服务器。它默认监听端口 3000；设置 PORT 环境变量即可更改端口。

terminal

bun ./build/index.js

Listening on http://0.0.0.0:3000/

概述

部署

运行时与调试

实用工具

生态系统与框架

HTTP 与网络

WebSocket

进程与系统

包管理器

测试运行器

运行时与调试

模块系统

文件系统

实用工具

HTML 处理

二进制数据

Streams

使用 SvelteKit 和 Bun 构建应用