Skip to content

Используйте sv create my-app для создания проекта SvelteKit с помощью SvelteKit CLI. Ответьте на вопросы для выбора шаблона и настройки среды разработки.

sh
bunx sv create my-app
txt
┌  Добро пожаловать в Svelte CLI! (v0.5.7)

◇  Какой шаблон вы хотите использовать?
│  SvelteKit demo

◇  Добавить проверку типов с Typescript?
│  Да, используя синтаксис Typescript

◆  Проект создан

◇  Что вы хотите добавить в ваш проект?
│  none

◇  Какой менеджер пакетов вы хотите использовать для установки зависимостей?
│  bun

◇  Зависимости успешно установлены

◇  Следующие шаги проекта ─────────────────────────────────────────────────────╮
│                                                                          │
│  1: cd my-app                                                            │
│  2: git init && git add -A && git commit -m "Initial commit" (опционально)  │
│  3: bun run dev -- --open                                                │
│                                                                          │
│  Для закрытия dev сервера нажмите Ctrl-C                                     │
│                                                                          │
│  Застряли? Посетите нас на https://svelte.dev/chat                              │
│                                                                          │
├──────────────────────────────────────────────────────────────────────────╯

└  Вы готовы!

Как только проект инициализирован, перейдите в директорию нового проекта с помощью cd. Вам не нужно запускать 'bun install', так как зависимости уже установлены.

Затем запустите сервер разработки с помощью bun --bun run dev.

Для запуска сервера разработки с Node.js вместо Bun, вы можете опустить флаг --bun.

sh
cd my-app
bun --bun run dev
txt
  $ vite dev
  Принудительная ре-оптимизация зависимостей

    VITE v5.4.10  готов за 424 мс

    ➜  Локально:   http://localhost:5173/
    ➜  Сеть: используйте --host для доступа
    ➜  нажмите h + enter для показа справки

Посетите 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 собирает SSR пакет для продакшена...
  "confetti" импортируется из внешнего модуля "@neoconfetti/svelte" но никогда не используется в "src/routes/sverdle/+page.svelte".
  ✓ 130 модулей трансформировано.
  vite v5.4.10 собирает для продакшена...
  ✓ 148 модулей трансформировано.
  ...
  ✓ собрано за 231мс
  ...
  ✓ собрано за 899мс

  Запустите npm run preview для предпросмотра вашей продакшен сборки локально.

  > Использование svelte-adapter-bun
    ✔ Запустить сервер с: bun ./build/index.js
    ✔ готово

Bun от www.bunjs.com.cn