Установка CLI и scaffolding

Для работы с SvelteKit используется официальный CLI-инструмент, который обеспечивает быстрое создание каркаса проекта, настройку сборки и интеграцию с современными инструментами фронтенда. Основным способом установки является использование npm, yarn или pnpm.

Установка через npm

npm create svelte@latest my-app

Параметры команды:

  • svelte@latest — указывает на установку последней стабильной версии SvelteKit.
  • my-app — имя создаваемого проекта. Можно заменить на любое название.

Команда запускает интерактивный мастер, который задаёт следующие вопросы:

  1. Тип проекта: можно выбрать между Skeleton Project (минимальная структура) и Demo App (с готовыми компонентами и примером маршрутизации).
  2. Язык: TypeScript или JavaScript.
  3. Использование ESLint и Prettier: выбор инструментов линтинга и форматирования кода.
  4. Фреймворк для тестирования: Vitest или отсутствие тестов.

После завершения мастер создаёт структуру проекта и устанавливает зависимости.

Создание проекта с yarn и pnpm

Для yarn используется аналогичная команда:

yarn create svelte my-app

Для pnpm:

pnpm create svelte my-app

Все версии CLI идентичны по функционалу и вызывают мастер настройки.

Структура проекта SvelteKit

После создания проекта структура выглядит следующим образом:

my-app/
├─ src/
│  ├─ routes/
│  ├─ lib/
│  └─ app.html
├─ static/
├─ package.json
├─ svelte.config.js
└─ vite.config.js

Ключевые элементы:

  • src/routes/ — маршруты приложения. Каждый файл .svelte автоматически становится страницей.
  • src/lib/ — библиотека компонентов и утилит.
  • static/ — статические ресурсы (изображения, файлы, шрифты).
  • svelte.config.js — конфигурация SvelteKit, включая адаптеры и плагины.
  • vite.config.js — настройки сборщика Vite, используемого для разработки и сборки.

Установка зависимостей UI-библиотек

Для интеграции визуальных компонентов в проект SvelteKit используются специализированные UI-библиотеки: например, Svelte Material UI, Carbon Components Svelte, Skeleton UI. Установка производится через пакетный менеджер:

npm install @smui/button @smui/card

или для Carbon Svelte:

npm install carbon-components-svelte

После установки библиотека готова к использованию через импорт в .svelte файлах:

Конфигурация и адаптеры

SvelteKit поддерживает различные адаптеры для деплоя: Node.js, Static, Vercel, Netlify. Установка и настройка адаптера выполняется в svelte.config.js:

import adapter from '@sveltejs/adapter-node';

export default {
  kit: {
    adapter: adapter(),
    target: '#svelte'
  }
};

Важно: адаптер определяет способ генерации конечного приложения, включая серверный рендеринг и статические файлы.

Скрипты для разработки и сборки

В package.json автоматически добавляются скрипты:

{
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview"
  }
}
  • dev — запускает локальный сервер разработки с горячей перезагрузкой.
  • build — компилирует проект для продакшена.
  • preview — позволяет протестировать сборку локально.

Шаблоны (scaffolding) для компонентов

SvelteKit CLI можно использовать для генерации базовых компонентов и страниц вручную. Рекомендуется создавать собственные шаблоны в src/lib/templates:

my-component/
├─ MyComponent.svelte
├─ MyComponent.test.ts
└─ MyComponent.stories.svelte

Преимущества собственного scaffolding:

  • Быстрое создание стандартизированных компонентов.
  • Поддержка тестов и Storybook для визуализации.
  • Упрощение интеграции с UI-библиотеками.

Настройка TypeScript и ESLint

При выборе TypeScript CLI создаёт tsconfig.json с базовой конфигурацией. Для интеграции линтинга:

npm install -D eslint prettier eslint-plugin-svelte

Конфигурация ESLint для SvelteKit включает:

{
  "extends": ["eslint:recommended", "plugin:svelte/recommended"],
  "overrides": [
    {
      "files": ["*.svelte"],
      "processor": "svelte/svelte"
    }
  ]
}

Это гарантирует корректную проверку синтаксиса компонентов и соблюдение код-стандарта.

Оглавление