使用 SvelteKit 和 Bun 建構應用程式

在 GitHub 上編輯

使用 sv create my-app 以 SvelteKit CLI 建立 SvelteKit 專案。回答提示以選擇範本並設定您的開發環境。

bunx sv create my-app
┌  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.org.tw/chat                              │
│                                                                          │
├──────────────────────────────────────────────────────────────────────────╯
│
└  You're all set!

專案初始化完成後，cd 進入新專案。您不需要執行 'bun install'，因為依賴套件已安裝。

然後使用 bun --bun run dev 啟動開發伺服器。

若要使用 Node.js 而非 Bun 執行開發伺服器，您可以省略 --bun 標記。

cd my-app
bun --bun run dev
  $ vite dev
  Forced re-optimization of dependencies
  
    VITE v5.4.10  ready in 424 ms
  
    ➜  Local:   https://127.0.0.1:5173/
    ➜  Network: use --host to expose
    ➜  press h + enter to show help

在瀏覽器中瀏覽 https://127.0.0.1:5173 以查看範本應用程式。

如果您編輯並儲存 src/routes/+page.svelte，您應該會在瀏覽器中看到您的變更熱重載。

若要建置用於生產環境的版本，您需要新增正確的 SvelteKit 轉接器。目前我們推薦

bun add -D svelte-adapter-bun.

現在，對您的 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 = {
	// Consult https://svelte.dev.org.tw/docs/kit/integrations#preprocessors
	// for more information about preprocessors
	preprocess: vitePreprocess(),

	kit: {
		// adapter-auto only supports some environments, see https://svelte.dev.org.tw/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.org.tw/docs/kit/adapters for more information about adapters.
		adapter: adapter()
	}
};

export default config;

若要建置生產環境套件

bun --bun run build
  $ 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