Сервер разработки и горячая замена модулей
Запустите сервер разработки и узнайте, как HMR поддерживает синхронизацию браузера с приложением
«Сервер разработки и горячая замена модулей» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Что такое HMR
Горячая замена модулей обновляет только изменившиеся модули без полной перезагрузки страницы. Состояние приложения обычно сохраняется.
Запуск сервера
Скрипт разработки запускает Vite, который по умолчанию раздаёт Ваш код с включённым HMR.
npm run devНаблюдение за терминалом
Vite выводит локальный URL (по умолчанию http://localhost:5173) и сетевой URL, если передать --host.
Сохранение для обновления
Измените любой файл .svelte или JS-файл и сохраните его. Браузер обновится мгновенно, часто за несколько миллисекунд.
Сохранение состояния
По возможности Svelte сохраняет состояние компонента при обновлениях HMR. Счётчик со значением 5 останется равным 5 после изменения разметки.
Причины полной перезагрузки
Некоторые изменения вызывают полную перезагрузку: файлы конфигурации, серверные хуки или ошибки импорта. Vite сообщит об этом в консоли.
Доступ по сети
Передайте --host, чтобы открыть сервер разработки в Вашей LAN и тестировать приложение на телефоне.
npm run dev -- --hostКонфликты портов
Если порт 5173 занят, Vite выберет следующий свободный порт. Также можно принудительно задать порт с помощью --port 4000.
Инструменты разработчика браузера
Откройте DevTools браузера, чтобы увидеть карты исходного кода, указывающие на исходные файлы .svelte и обеспечивающие точные трассировки стека.
Наложение ошибок
Синтаксические ошибки и ошибки во время выполнения отображаются в браузере как наложение. Исправьте код — после сохранения наложение исчезнет.
Остановка сервера
Нажмите Ctrl+C в терминале, чтобы остановить сервер разработки. Снова выполните npm run dev, чтобы запустить его.
Быстрая проверка
Что делает HMR?
Итоги
Вы умеете запускать сервер разработки, пользоваться преимуществами HMR, открывать его в своей сети и восстанавливаться после ошибок с помощью наложения.
Часто задаваемые вопросы
Урок «Сервер разработки и горячая замена модулей» бесплатный?
Да — полный текст урока «Сервер разработки и горячая замена модулей» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Сервер разработки и горячая замена модулей»?
Запустите сервер разработки и узнайте, как HMR поддерживает синхронизацию браузера с приложением Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Сервер разработки и горячая замена модулей»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Что такое Svelte и зачем он компилируется
- Создание проекта с помощью npm create svelte
- Структура проекта: src routes static
- Сервер разработки и горячая замена модулей