使用 SvelteKit 和 Bun 構建應用程式

在 GitHub 上編輯

使用 bun create 以 svelte 套件建立應用程式架構。回答提示以選擇範本並設定開發環境。

bun create svelte@latest my-app
┌  Welcome to SvelteKit!
│
◇  Which Svelte app template?
│  SvelteKit demo app
│
◇  Add type checking with TypeScript?
│  Yes, using TypeScript syntax
│
◇  Select additional options (use arrow keys/space bar)
│  None
│
└  Your project is ready!

✔ Typescript
  Inside Svelte components, use <script lang="ts">

Install community-maintained integrations:
  https://github.com/svelte-add/svelte-add

專案初始化後，cd 進入新專案並安裝依賴項。

cd my-app
bun install

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

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

bun --bun run dev
  $ vite dev

  Forced re-optimization of dependencies

    VITE v4.4.9  ready in 895 ms

    ➜  Local:   https://127.0.0.1:5173/
    ➜  Network: use --host to expose
    ➜  press h 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/kit/vite";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter(),
  },
  preprocess: vitePreprocess(),
};

export default config;

若要建置生產環境套件

bun run build
 $ vite build

vite v4.4.9 building SSR bundle for production...
transforming (60) node_modules/@sveltejs/kit/src/utils/escape.js

✓ 98 modules transformed.
Generated an empty chunk: "entries/endpoints/waitlist/_server.ts".

vite v4.4.9 building for production...
✓ 92 modules transformed.
Generated an empty chunk: "7".
.svelte-kit/output/client/_app/version.json      0.03 kB │ gzip:  0.05 kB

...

.svelte-kit/output/server/index.js               86.47 kB

Run npm run preview to preview your production build locally.
Using svelte-adapter-bun
  ✔ Start server with: bun ./build/index.js
  ✔ done
✓ built in 7.81s