Создание проекта с помощью npm create svelte
Создайте каркас нового проекта SvelteKit с помощью официального CLI и выберите подходящие параметры
«Создание проекта с помощью npm create svelte» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Инструмент создания проекта
Официальный способ начать проект SvelteKit — команда npm create svelte@latest. Она создаёт готовое к запуску приложение.
npm create svelte@latest my-appВопросы мастера
Мастер предложит выбрать шаблон (каркас или демонстрационное приложение), поддержку TypeScript и инструменты (ESLint, Prettier, Playwright, Vitest).
Выбор шаблона
Проект Skeleton предоставляет минимальную структуру. Приложение Demo содержит небольшой пример игры Sverdle для изучения.
Вариант с TypeScript
Выберите «Да» для TypeScript, если Вам нужна проверка типов. Мастер настроит конфигурацию TS и будет использовать lang="ts" в блоках скриптов.
Установка зависимостей
После завершения работы мастера перейдите в нужный каталог и установите пакеты.
cd my-app
npm installЗапуск сервера разработки
Используйте скрипт dev, чтобы запустить сервер с горячей перезагрузкой по адресу http://localhost:5173.
npm run devОткрытие в браузере
Перейдите по URL, напечатанному в терминале. Вы должны увидеть приветственную страницу. Измените src/routes/+page.svelte и наблюдайте за обновлением в реальном времени.
Сборка для производства
Скрипт build запускает компилятор и создаёт каталог с результатом, готовым к раздаче.
npm run build
npm run previewВыбор менеджера пакетов
Можно использовать npm, pnpm или yarn. pnpm популярен благодаря эффективному использованию дискового пространства и строгому разрешению зависимостей.
Настройка редактора
Установите расширение Svelte for VS Code, чтобы получить подсветку синтаксиса, IntelliSense и диагностику в файлах .svelte.
Инициализация Git по желанию
Мастер предлагает инициализировать репозиторий Git. Если согласиться, будет добавлен подходящий файл .gitignore.
Быстрая проверка
Какая команда создаёт новый проект SvelteKit?
Итоги
Теперь Вы умеете создать каркас проекта, выбрать TypeScript и инструменты, установить зависимости и запускать скрипты разработки или сборки.
Часто задаваемые вопросы
Урок «Создание проекта с помощью npm create svelte» бесплатный?
Да — полный текст урока «Создание проекта с помощью npm create svelte» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Создание проекта с помощью npm create svelte»?
Создайте каркас нового проекта SvelteKit с помощью официального CLI и выберите подходящие параметры Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Создание проекта с помощью npm create svelte»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Что такое Svelte и зачем он компилируется
- Создание проекта с помощью npm create svelte
- Структура проекта: src routes static
- Сервер разработки и горячая замена модулей