День 8 | Запускаем режим разработки в Vite — Продвинутый курс по верстке сайтов

Что такое Vite Dev Server?

До сих пор мы запускали сборку вручную каждый раз, когда что-то меняли. Это неудобно. Представьте: вы изменили цвет кнопки, запустили сборку, открыли файл в браузере, обновили страницу... И так каждый раз!

Vite Dev Server — это сервер разработки, который автоматически перезагружает страницу при изменении файлов. Он работает очень быстро благодаря использованию нативных ES модулей.

Преимущества Vite Dev Server:

✅ Мгновенный запуск — сервер запускается за миллисекунды (не секунды, как Webpack)
✅ Мгновенная HMR — Hot Module Replacement работает без задержек
✅ Автоматическая перезагрузка при изменениях
✅ Работает локально на вашем компьютере
✅ Автоматически открывает браузер (если настроено)
✅ Не нужно настраивать — работает из коробки!

Запуск Dev Server

Vite Dev Server уже встроен в Vite! Не нужно устанавливать отдельный пакет. Просто запустите:

npm run dev

Или напрямую:

npx vite

Сервер запустится на http://localhost:5173 (порт по умолчанию) и автоматически откроет браузер.

Что такое localhost? localhost — это адрес вашего компьютера. Это как доменное имя, которое указывает на ваш компьютер. http://localhost:5173 означает "веб-сервер на этом компьютере, порт 5173".

Настройка Dev Server

Для кастомизации можно настроить dev server в vite.config.js:

import { defineConfig } from "vite";

export default defineConfig({
  root: "./src",
  
  build: {
    outDir: "../dist",
    emptyOutDir: true,
  },
  
  // Настройки dev server
  server: {
    port: 5173, // Порт (по умолчанию 5173)
    open: true, // Автоматически открыть браузер
    host: true, // Доступен по сети (можно открыть с телефона)
    
    // Прокси для API запросов
    proxy: {
      "/api": {
        target: "http://localhost:3000",
        changeOrigin: true,
      },
    },
  },
});

Разберём настройки server подробно:

port: 5173 — порт, на котором будет работать сервер. По умолчанию 5173.
open: true — автоматически открывать браузер при запуске сервера.
host: true — сделать сервер доступным по сети. Полезно, если хотите открыть сайт на телефоне в той же Wi-Fi сети.
proxy — перенаправляет запросы на другой сервер. Полезно, если у вас отдельный API сервер.

Hot Module Replacement (HMR)

HMR — это крутая фича, которая позволяет обновлять модули без полной перезагрузки страницы. Это очень удобно при разработке!

Как это работает:

Вы изменяете файл (CSS, SCSS, JS)
Vite обнаруживает изменение
Обновляется только изменённый модуль
Страница обновляется мгновенно, сохраняя состояние (например, открытые вкладки, скролл, введённый текст в формах)

Пример: Вы изменили цвет кнопки в SCSS. С обычной перезагрузкой страница полностью обновится. С HMR обновится только стиль кнопки, а всё остальное останется как было.

HMR для CSS/SCSS:

HMR для CSS и SCSS работает из коробки! Ничего дополнительно настраивать не нужно. Просто измените стили, и они обновятся мгновенно.

HMR для JavaScript:

HMR для JavaScript тоже работает автоматически! Но если нужно сохранить состояние, можно использовать специальный API:

// В src/js/main.js
if (import.meta.hot) {
  // Код для сохранения состояния при HMR
  import.meta.hot.accept((newModule) => {
    // Обновить модуль
  });
}

// Ваш код
console.log("Hello from main.js!");

Что делает этот код?

import.meta.hot — проверяет, доступен ли HMR (доступен только в режиме разработки с dev server)
import.meta.hot.accept() — говорит Vite: "если этот модуль изменится, обнови его без перезагрузки страницы"

Примечание: В большинстве случаев HMR работает автоматически, и этот код не нужен. Используйте его только если нужно сохранить сложное состояние.

Сравнение с Webpack Dev Server

Vite Dev Server:

✅ Запускается за миллисекунды
✅ HMR работает мгновенно
✅ Не нужно настраивать
✅ Использует нативные ES модули

Webpack Dev Server (для сравнения):

⚠️ Запускается за секунды (медленнее)
⚠️ HMR работает с задержкой
⚠️ Нужна сложная настройка
⚠️ Собирает всё в bundle перед запуском

Вывод: Vite Dev Server намного быстрее и проще в использовании!

Дополнительные настройки

Вот ещё полезные настройки, которые можно добавить в vite.config.js:

import { defineConfig } from "vite";

export default defineConfig({
  root: "./src",
  
  build: {
    outDir: "../dist",
    emptyOutDir: true,
    
    // Source maps для отладки
    sourcemap: true, // Для разработки
    // sourcemap: "hidden", // Для продакшена (отдельный файл)
  },
  
  server: {
    port: 5173,
    open: true,
    host: true,
    
    // История для SPA (если нужно)
    // historyApiFallback: true, // В Vite это настраивается через плагин
  },
  
  // CSS настройки
  css: {
    devSourcemap: true, // Source maps для CSS в разработке
  },
});

Объяснение дополнительных настроек:

build.sourcemap: true — создаёт source maps для отладки. Показывает оригинальные файлы вместо скомпилированных в DevTools.
css.devSourcemap: true — source maps для CSS в режиме разработки.

Практическое задание

Запустите dev server: npm run dev
Проверьте, что браузер открылся автоматически на http://localhost:5173
Измените какой-нибудь CSS/SCSS файл и посмотрите, как страница обновляется автоматически
Измените JavaScript файл и проверьте HMR (добавьте код для HMR в main.js, если нужно)
Настройте порт на другой (например, 3000) в vite.config.js и перезапустите сервер
Попробуйте изменить несколько файлов подряд и посмотрите, как быстро обновляется
Откройте DevTools в браузере и посмотрите на вкладку Network — там будут видны ES модули
Попробуйте остановить сервер (Ctrl+C) и запустить снова — посмотрите, как быстро он запускается

Полезные команды

# Запустить dev server
npm run dev

# Запустить с другим портом
npx vite --port 3000

# Запустить с открытием в браузере
npx vite --open

# Запустить без открытия браузера
npx vite --no-open

# Запустить с доступом по сети
npx vite --host

# Остановить сервер
# Нажмите Ctrl+C в терминале

Частые проблемы

Порт уже занят

Измените порт в vite.config.js: server: { port: 3000 }
Или остановите программу, которая использует порт 5173
Или используйте флаг: npx vite --port 3000

Страница не обновляется автоматически

Проверьте консоль браузера на ошибки
Убедитесь, что файл сохранён (Ctrl+S / Cmd+S)
Проверьте консоль терминала — там должны быть сообщения о пересборке
Попробуйте обновить страницу вручную (F5)

Изменения не применяются

Убедитесь, что вы сохранили файл (Ctrl+S / Cmd+S)
Проверьте консоль терминала — там должны быть сообщения о пересборке
Проверьте, что вы редактируете файлы в папке src
Попробуйте перезапустить dev server

Медленная работа (редко, но возможно)

Проверьте, что вы используете последнюю версию Vite
Убедитесь, что у вас достаточно оперативной памяти
Попробуйте закрыть другие программы

Итоги модуля 1

Поздравляем! Вы завершили первый модуль курса. Теперь у вас:

✅ Настроено рабочее окружение
✅ Установлен Git и настроен GitHub
✅ Установлен Node.js и npm
✅ Настроен Vite для сборки проекта
✅ Настроен SCSS и изучены CSS Custom Properties
✅ Запущен dev server для разработки

Вы готовы к верстке! В следующем модуле мы начнём создавать реальный сайт: добавим переменные и шрифты, сверстаем шапку, баннер и многое другое.

Что дальше?

В следующем модуле мы начнём верстать! Создадим систему дизайна с переменными (SCSS и CSS Custom Properties), подключим шрифты и начнём верстать шапку сайта.

Материалы по теме

Глоссарий digital-терминов Глоссарий
Статьи блога по разработке и SEO Блог
Практические чеклисты по внедрению Чеклисты
Ваш сайт тормозит? Вот сколько денег вы теряете каждый день Статья
CI/CD пайплайн: автоматизация разработки и деплоя Статья

День 8 | Запускаем режим разработки в Vite

Что такое Vite Dev Server?

Преимущества Vite Dev Server:

Запуск Dev Server

Настройка Dev Server

Hot Module Replacement (HMR)

Как это работает:

HMR для CSS/SCSS:

HMR для JavaScript:

Сравнение с Webpack Dev Server

Дополнительные настройки

Практическое задание

Полезные команды

Частые проблемы

Итоги модуля 1

Что дальше?

Материалы по теме

Оставить заявку