SvelteKit и структура проекта

Новый разработчик клонирует чужой Svelte-проект и теряется: где точка входа, почему файл называется +page.svelte, что за плюс в начале имени, куда класть общий код. Голый компилятор Svelte отвечает только за превращение компонента в JavaScript. Всё остальное - роутинг, сборка, дев-сервер, рендер на сервере - берёт на себя SvelteKit, официальный фреймворк над Svelte. Команда npx sv create разворачивает каркас за пару минут, а понимание структуры папок снимает половину начальной растерянности.

• Документация svelte.dev сама построена на SvelteKit, включая интерактивные примеры и плейграунд
• Vercel, разработчик SvelteKit, использует его для собственных продуктовых страниц и шаблонов
• Стартапы выбирают SvelteKit для MVP: один инструмент даёт роутинг, сборку, SSR и API-эндпоинты
• Дев-команды ценят Vite под капотом: горячая замена модулей обновляет экран за десятки миллисекунд
• Файловый роутинг src/routes снимает споры о структуре: маршрут = путь файла, без отдельного конфига

Предварительные знания

• Установленный Node.js (LTS) и пакетный менеджер npm
• Базовая работа в терминале: запуск команд, переход по папкам
• Понимание идеи Svelte как компилятора из предыдущего урока

Создание проекта и роль Vite

Новый проект SvelteKit создаётся официальной командой npx sv create. Она запускает интерактивный мастер: выбор шаблона (минимальный, демо-приложение, библиотека), включение TypeScript, добавление готовых интеграций вроде ESLint, Prettier и Tailwind. После этого остаётся установить зависимости и запустить дев-сервер.

Под капотом SvelteKit использует Vite - сборщик и дев-сервер. В режиме разработки Vite не собирает весь проект заранее: он отдаёт модули по запросу через нативные ES-модули браузера, поэтому старт почти мгновенный даже на большом проекте. При правке файла работает горячая замена модулей (HMR): изменённый компонент подменяется на лету без перезагрузки страницы и без потери состояния.

Адаптер (adapter) - часть SvelteKit, которая упаковывает собранное приложение под конкретную цель: статический сайт, Node-сервер, Vercel, Cloudflare. Менять платформу деплоя - это в основном поменять адаптер, а не код приложения.

Файловый роутинг в src/routes

Маршруты в SvelteKit задаются структурой папки src/routes. Каждая папка - сегмент URL, а специальные файлы с плюсом в начале имени описывают, что происходит на этом маршруте. Файл +page.svelte - это видимая страница. Файл src/routes/+page.svelte отвечает за корень сайта, а src/routes/about/+page.svelte - за путь слэш about.

Квадратные скобки в имени папки делают сегмент динамическим. Папка [slug] поймает любой путь вида слэш blog слэш и что-то после, а конкретное значение придёт в функцию load и в страницу через параметры маршрута. Так одна страница обслуживает тысячи статей блога без отдельного файла на каждую.

Функция load в +page.js или +page.server.js запускается до отрисовки страницы и возвращает данные, которые страница получает через `$props`. Версия с server.js в имени работает только на сервере и подходит для обращения к базе данных или секретам.

Папка src/lib и переиспользуемый код

Не весь код относится к конкретному маршруту. Компоненты-кнопки, утилиты форматирования, типы, общее состояние - всё это живёт в src/lib. SvelteKit даёт удобный алиас доллар-lib, который всегда указывает на эту папку, независимо от того, насколько глубоко вложен текущий файл. Это избавляет от длинных относительных путей с множеством точка-точка-слэш.

Внутри src/lib есть особая подпапка server: код из src/lib/server никогда не попадает в браузерный бандл. Туда кладут работу с базой, ключи API и любую логику, которой не место на клиенте. Если такой модуль случайно импортировать в клиентский код, сборка сообщит об ошибке - это защита от утечки секретов.

Папка static в корне проекта (не внутри src) отдаёт файлы без обработки сборщиком. Содержимое static/robots.txt будет доступно прямо по адресу слэш robots.txt. Туда кладут favicon, шрифты и статичные ассеты, которые не нужно преобразовывать.

Связь с другими темами

Каркас проекта - фундамент для всего практического кода дальше:

• Зачем нужен Svelte — SvelteKit стоит поверх компилятора Svelte. Без понимания базовой идеи фреймворк выглядит магией
• Компонент .svelte — Файлы +page.svelte и компоненты в src/lib - это обычные .svelte файлы, которые разбираются в следующем уроке
• Синтаксис шаблонов — Страницы маршрутов наполняются разметкой Svelte: выражения, условия, циклы

Итог

• SvelteKit - официальный фреймворк поверх Svelte: он добавляет роутинг, сборку, дев-сервер и рендер на сервере
• Каркас разворачивается командой npx sv create, которая в интерактивном мастере предлагает шаблон, TypeScript и дополнения
• Под капотом работает Vite: мгновенный старт дев-сервера и горячая замена модулей (HMR) при правках
• Папка src/routes реализует файловый роутинг: путь файла напрямую задаёт URL, файлы с плюсом имеют особый смысл
• Папка src/lib хранит переиспользуемый код (компоненты, утилиты), доступный через алиас доллар-lib

Связанные уроки

• sv-01-why-svelte — SvelteKit это фреймворк поверх Svelte, поэтому сначала нужно понять, что такое Svelte-компилятор
• sv-03-components — Каркас проекта готов - дальше разработчик пишет первый .svelte компонент внутри src
• sv-04-template-syntax — Страницы маршрутов в src/routes используют синтаксис шаблонов Svelte, который разбирается дальше