> ## Documentation Index
> Fetch the complete documentation index at: https://bun.zhcndoc.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 使用 SvelteKit 和 Bun 构建应用

使用 `sv create my-app` 通过 SvelteKit CLI 创建一个 SvelteKit 项目。根据提示选择模板并设置开发环境。

```sh terminal icon="terminal" theme={"theme":{"light":"github-light","dark":"dracula"}}
bunx sv create my-app
```

```txt theme={"theme":{"light":"github-light","dark":"dracula"}}
┌  欢迎使用 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                                  │
│                                                                          │
├──────────────────────────────────────────────────────────────────────────╯
│
└  一切就绪！
```

***

项目初始化完成后，进入新项目目录。由于依赖已安装，无需运行 `bun install`。

然后使用 `bun --bun run dev` 启动开发服务器。

如果想用 Node.js 而非 Bun 运行开发服务器，可以省略 `--bun` 标志。

```sh terminal icon="terminal" theme={"theme":{"light":"github-light","dark":"dracula"}}
cd my-app
bun --bun run dev
```

```txt theme={"theme":{"light":"github-light","dark":"dracula"}}
  $ vite dev
  强制重新优化依赖

    VITE v5.4.10  424 ms 内完成准备

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

***

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

<Frame>
  ![运行中的 SvelteKit 应用](https://github.com/oven-sh/bun/assets/3084745/7c76eae8-78f9-44fa-9f15-1bd3ca1a47c0)
</Frame>

***

编辑并保存 `src/routes/+page.svelte` 后，你的改动会在浏览器中热重载显示。

***

要构建生产版本，需要添加合适的 SvelteKit 适配器。当前推荐

`bun add -D svelte-adapter-bun`。

然后，对你的 `svelte.config.js` 做如下修改。

```js svelte.config.js icon="file-code" theme={"theme":{"light":"github-light","dark":"dracula"}}
import adapter from "@sveltejs/adapter-auto"; // [!code --]
import adapter from "svelte-adapter-bun"; // [!code ++]
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;
```

***

构建生产包：

```sh terminal icon="terminal" theme={"theme":{"light":"github-light","dark":"dracula"}}
bun --bun run build
```

```txt theme={"theme":{"light":"github-light","dark":"dracula"}}
  $ 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 启动服务器
    ✔ 完成
```