SvelteKit 과 Bun 으로 앱 빌드하기

sv create my-app 을 사용하여 SvelteKit CLI 로 SvelteKit 프로젝트를 만듭니다. 템플릿을 선택하고 개발 환경을 설정하라는 프롬프트에 답하세요.

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 로 개발 서버를 시작하세요.

Bun 대신 Node.js 로 개발 서버를 실행하려면 --bun 플래그를 생략하세요.

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 어댑터를 추가해야 합니다. 현재는 svelte-adapter-bun 을 권장합니다.

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 = {
  // 프리프로세서에 대한 자세한 내용은 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;

프로덕션 번들을 빌드하려면:

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