Как настроить и запустить проект на Svelte с нуля за 1 час: пошаговое руководство

Svelte — это революционный подход к созданию веб-интерфейсов. В отличие от традиционных фреймворков, таких как React или Vue, которые выполняют основную работу в браузере, Svelte переносит эту работу на этап сборки, превращая ваши компоненты в идеально оптимизированный ванильный JavaScript. Результат — невероятно быстрые приложения с меньшим количеством кода. Это руководство покажет, как за один час пройти путь от пустой папки до работающего, настроенного проекта на Svelte с ключевыми инструментами разработчика.

Шаг 1: Подготовка среды (5 минут). Убедитесь, что у вас установлена последняя LTS-версия Node.js (включая npm). Откройте терминал и проверьте командами `node --version` и `npm --version`. Этого достаточно. Вам не нужны глобальные установки сложных CLI, все делается через `npx`.

Шаг 2: Создание проекта (2 минуты). В терминале перейдите в папку для ваших проектов и выполните команду: `npx degit sveltejs/template svelte-app`. Эта команда клонирует официальный шаблон Svelte без истории Git. Затем перейдите в созданную папку: `cd svelte-app`. Установите зависимости: `npm install`. Это займет пару минут.

Шаг 3: Первый запуск и знакомство со структурой (10 минут). Запустите dev-сервер: `npm run dev`. Откройте браузер на `http://localhost:5000` (или другом указанном порту). Вы увидите стартовую страницу. Теперь откройте папку проекта в вашем редакторе кода (рекомендуется VS Code с официальным расширением Svelte for VS Code). Изучите структуру: `src/` — исходный код, `public/` — статические файлы. Ключевой файл — `src/App.svelte`. Это и есть компонент Svelte. Откройте его и увидите три секции: `` (логика), `` (стили, которые автоматически изолируются для этого компонента) и разметку. Внесите простое изменение, например, измените текст в теге `<h1>` — страница в браузере мгновенно обновится (Hot Reload).

Шаг 4: Настройка для продакшена: Роутинг и сборка (20 минут). Для создания многостраничного приложения нужен роутер. Самый популярный и официально рекомендуемый — SvelteKit (фреймворк следующего поколения). Но для простого SPA за час мы выберем легковесный `svelte-routing`. Установите: `npm install svelte-routing`. В `src/main.js` импортируйте `Router, Link, Route` и настройте базовые маршруты. Создайте несколько компонентов-страниц в `src/routes/` (например, `About.svelte`, `Contact.svelte`) и подключите их. Теперь настройте сборку. В `package.json` уже есть скрипты `build` и `start`. Запустите `npm run build`. Это создаст оптимизированную папку `public/build/`. Для предпросмотра продакшн-сборки выполните `npm run start`. Это запустит статический сервер.

Шаг 5: Интеграция смены тем (Тёмная/Светлая) и состояние (15 минут). Svelte делает управление состоянием невероятно простым. Для глобального состояния (например, темы) используйте writable stores. Создайте файл `src/stores.js`. Внутри напишите: `import { writable } from 'svelte/store'; export const theme = writable('light');`. В вашем основном компоненте (например, `App.svelte`) импортируйте `theme` и подпишитесь на него с помощью синтаксиса `$theme` (автоматическая подписка). Добавьте кнопку для переключения: ` $theme = $theme === 'light' ? 'dark' : 'light'}>`. Привяжите класс или CSS-переменные к значению store, чтобы менять стили.

Шаг 6: Подключение UI-библиотеки и деплой (8 минут). Чтобы быстро получить красивые компоненты, установите одну из библиотек, например, Svelte Material UI или Smelte. Выполните `npm install --save-dev smelte`. Настройте согласно их документации (обычно это импорт в `main.js` и добавление глобальных стилей). Теперь ваш проект выглядит профессионально.

Финальный шаг — деплой. Поскольку на выходе у нас статические файлы, мы можем задеплоить куда угодно. Самый быстрый способ — Vercel или Netlify. Установите CLI Vercel глобально (`npm i -g vercel`), в корне проекта выполните `vercel` и следуйте инструкциям. Или просто подключите ваш Git-репозиторий к сервису — деплой будет автоматическим при каждом пуше.

За один час вы не только настроили проект, но и добавили роутинг, глобальное состояние, UI-библиотеку и подготовили его к деплою. Svelte впечатляет своей простотой и мощью. Код компонентов лаконичен и интуитивно понятен, а производительность итогового бандла говорит сама за себя. Теперь вы готовы к углубленному изучению этого современного инструмента для создания веб-интерфейсов.