使用 SvelteKit 和 Bun 建置應用

使用 sv create my-app 通過 Svelte CLI 建立 SvelteKit 專案。回答提示以選擇模板並設定開發環境。

terminal

bunx sv create my-app

Text

┌  歡迎使用 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

Text

  $ 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"; // [!code --]
import adapter from "svelte-adapter-bun"; // [!code ++]
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

Text

  $ 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

Text

Listening on http://0.0.0.0:3000/