Создание проекта: sv create и Vite

Современный Svelte-проект создаётся одной командой и работает на Vite — быстром сборщике с мгновенной перезагрузкой.

«Инструмент не должен мешать.» Стартовый шаблон Svelte настраивается за минуту, чтобы вы сразу занялись интересным — кодом, а не конфигами.

Чтобы начать работать со Svelte, не нужно вручную собирать конфигурацию сборщика. Команда npx sv create (новый официальный CLI) разворачивает проект с разумными настройками: Vite в роли сборщика, опционально TypeScript, ESLint, Prettier и даже SvelteKit, если вы хотите сразу полноценное приложение. Vite важен здесь не просто как сборщик — он даёт молниеносную перезагрузку модулей: вы меняете компонент, и браузер обновляет именно его, не теряя состояние страницы.

Разберём минимальные шаги. Сначала создаём проект, выбирая в интерактивном мастере нужные опции. Затем устанавливаем зависимости и запускаем dev-сервер. Через секунды у вас открывается приложение с горячей перезагрузкой.

# создать новый проект (выберите шаблон в мастере)
npx sv create my-app

# перейти в папку и установить зависимости
cd my-app
npm install

# запустить dev-сервер с горячей перезагрузкой
npm run dev

После запуска вы увидите адрес вроде http://localhost:5173. Откройте его — и каждое сохранение файла будет мгновенно отражаться в браузере. Для продакшена есть команда сборки, которая запускает компилятор Svelte и выдаёт оптимизированные статические файлы.

# собрать оптимизированную сборку для продакшена
npm run build

# локально посмотреть, как ведёт себя продакшен-сборка
npm run preview

Структура проекта проста. Исходники лежат в src, компоненты — в .svelte-файлах, точка входа — обычно src/main.js для чистого Svelte или система маршрутов src/routes для SvelteKit. Конфигурация Vite живёт в vite.config.js, а настройки Svelte — в svelte.config.js.

Как это работает под капотом

Когда вы запускаете npm run dev, Vite поднимает сервер разработки, который компилирует ваши .svelte-файлы по запросу через плагин @sveltejs/vite-plugin-svelte. Браузер запрашивает модуль, Vite на лету прогоняет его через компилятор Svelte и отдаёт готовый JavaScript. При сохранении файла Vite пересобирает только изменённый модуль и подменяет его в браузере — это и есть HMR (Hot Module Replacement).

  вы сохраняете файл
        |
        v
  Vite ловит изменение
        |
        v
  компилятор Svelte -> JS-модуль
        |
        v
  HMR подменяет модуль в браузере (состояние страницы сохраняется)

Частые ошибки

Путать npm run dev и npm run build. Первый — для разработки, второй создаёт финальную сборку.
Коммитить папку node_modules. Её всегда исключают через .gitignore.
Игнорировать выбор TypeScript в мастере, а потом жалеть. Подключить TS позже сложнее, чем выбрать сразу.

Best practices

Включайте Prettier и ESLint на старте — единый стиль кода экономит время в команде.
Для приложения с маршрутами выбирайте шаблон SvelteKit сразу, а не чистый Svelte.
Не правьте конфиги без необходимости: дефолты Vite и Svelte покрывают почти все случаи.

Что лежит в типичном проекте

Когда мастер закончит работу, полезно осмотреться. Папка src — это сердце проекта: туда вы будете класть компоненты и, в случае SvelteKit, маршруты. Файл package.json описывает зависимости и скрипты (dev, build, preview). Конфиги vite.config.js и svelte.config.js почти никогда не требуют ручной правки на старте — разумные значения по умолчанию покрывают подавляющее большинство случаев. Папка static хранит файлы, которые отдаются как есть: картинки, шрифты, favicon. Привыкайте запускать npm run dev в начале каждой сессии работы и держать браузер открытым рядом с редактором: цикл «поменял код — увидел результат» в Svelte измеряется долями секунды, и это сильно ускоряет обучение, потому что вы мгновенно проверяете каждую гипотезу.

Итог: проект создаётся командой npx sv create, работает на Vite с горячей перезагрузкой, а в продакшен собирается через npm run build. Это позволяет сразу сосредоточиться на компонентах.