Skip to content

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

sh
bunx sv create my-app
txt
┌  Welcome to the Svelte CLI! (v0.5.7)

◇  Which template would you like?
│  SvelteKit demo

◇  Add type checking with Typescript?
│  Yes, using Typescript syntax

◆  Project created

◇  What would you like to add to your project?
│  none

◇  Which package manager do you want to install dependencies with?
│  bun

◇  Successfully installed dependencies

◇  Project next steps ─────────────────────────────────────────────────────╮
│                                                                          │
│  1: cd my-app                                                            │
│  2: git init && git add -A && git commit -m "Initial commit" (optional)  │
│  3: bun run dev -- --open                                                │
│                                                                          │
│  To close the dev server, hit Ctrl-C                                     │
│                                                                          │
│  Stuck? Visit us at https://svelte.dev/chat                              │
│                                                                          │
├──────────────────────────────────────────────────────────────────────────╯

└  You're all set!

项目初始化后,cd 进入新项目。你不需要运行 bun install,因为依赖已经安装。

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

要使用 Node.js 而不是 Bun 运行开发服务器,你可以省略 --bun 标志。

sh
cd my-app
bun --bun run dev
txt
  $ vite dev
  Forced re-optimization of dependencies

    VITE v5.4.10  ready in 424 ms

    ➜  Local:   http://localhost:5173/
    ➜  Network: use --host to expose
    ➜  press h + enter to show help

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


如果你编辑并保存 src/routes/+page.svelte,你应该会在浏览器中看到你的更改热重载。


要为生产构建,你需要添加正确的 SvelteKit 适配器。目前我们推荐使用

bun add -D svelte-adapter-bun

现在,对 svelte.config.js 进行以下更改。

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;

要构建生产包:

sh
bun --bun run build
txt
  $ vite build
  vite v5.4.10 building SSR bundle for production...
  "confetti" is imported from external module "@neoconfetti/svelte" but never used in "src/routes/sverdle/+page.svelte".
  ✓ 130 modules transformed.
  vite v5.4.10 building for production...
  ✓ 148 modules transformed.
  ...
  ✓ built in 231ms
  ...
  ✓ built in 899ms

  Run npm run preview to preview your production build locally.

  > Using svelte-adapter-bun
    ✔ Start server with: bun ./build/index.js
    ✔ done

Bun学习网由www.bunjs.com.cn整理维护