Vite и dev-сервер

Vite — быстрый инструмент сборки и dev-сервер для современных веб-проектов. Dev-сервер запускает ваш проект локально в браузере. HMR (Hot Module Replacement) обновляет страницу мгновенно при изменении файлов. npm run build создаёт production-сборку.

Что такое dev-сервер?

Когда вы разрабатываете сайт, вам нужен способ видеть его в браузере. Dev-сервер:

• Запускает ваш код локально
• Показывает результат в браузере
• Автоматически обновляет страницу при изменениях

Создание проекта: npm create vite@latest my-app -- --template vanilla cd my-app npm install npm run dev

Откроется http://localhost:5173

Вариант с React (--template react) — это уже отдельная технология; в этом курсе она не изучается. Для наших примеров подходит vanilla.

Что делает Vite:

• Dev-сервер — быстрое обновление при изменениях
• HMR — Hot Module Replacement (обновление без перезагрузки)
• Сборка — оптимизация кода для production

npm run dev — dev-сервер:

• Порт: 5173 (по умолчанию)
• Автообновление при сохранении файлов
• Ошибки показываются в браузере

npm run build — production-сборка:

• Создаёт папку dist/
• Оптимизирует JS, CSS, картинки
• Минификация и сжатие

npm run preview — предпросмотр сборки:

• Запускает production-сборку локально
• Проверяет, как сайт будет работать на сервере

Vite vs другие:

• Webpack — старый, медленнее настройка
• Vite — новый, быстрый, современный
• Next.js — framework поверх Vite (или Webpack)

Конфигурация (для vanilla-проекта): // vite.config.js import { defineConfig } from 'vite';

export default defineConfig({ server: { port: 3000 } });

Если встретите @vitejs/plugin-react в чужом проекте — это плагин для React, отдельная технология (в этот курс не входит).

Dev-сервер — как черновик для художника. Вы рисуете (пишете код), сразу видите результат (в браузере), и можете быстро исправить (HMR). Production-сборка — как финальная версия картины: оптимизированная, отредактированная, готовая к выставке.

**Самый простой:**

# Создание нового проекта Vite:
npm create vite@latest my-app -- --template vanilla
cd my-app
npm install
npm run dev

# Откроется http://localhost:5173

Создание и запуск проекта с нуля.

**Простой:**

# Команды Vite:
npm run dev       # Dev-сервер (автообновление)
npm run build    # Production-сборка в dist/
npm run preview  # Предпросмотр сборки

# Измените любой файл — браузер обновится автоматически!
# Без перезагрузки страницы!

Основные команды: dev, build, preview.

**Реальный пример:**

// vite.config.js — настройка проекта
import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    port: 3000,
    open: true  // автоматически открыть браузер
  },
  build: {
    outDir: 'dist'
  }
});

Конфигурация Vite: порт и настройки сборки. Если встретите @vitejs/plugin-react в чужом проекте — это плагин для React, отдельная технология (в этот курс не входит).

**Неправильно:** Коммитить папку dist

**Почему:** dist — это build output. Восстановить через npm run build.

**Правильно:** Добавьте dist в .gitignore.

**Неправильно:** Запускать dev-сервер на production

**Почему:** Dev-сервер не оптимизирован, медленный, небезопасный для прода.

**Правильно:** npm run build → npm run preview (или deploy на сервер).

**Неправильно:** Путать dev и build

**Почему:** dev — быстрый dev-сервер для разработки. build — оптимизированная сборка.

**Правильно:** dev = разработка. build = production.

• npm run dev — dev-сервер с автообновлением
• npm run build — production-сборка в dist/
• npm run preview — предпросмотр сборки
• HMR — обновление без перезагрузки
• dist/ — НЕ коммитить
• Vite — быстрый modern dev-сервер

Назад: Вы знаете npm (T4) и package.json (T5). Vite использует оба инструмента для запуска проекта.

Вперёд: Вы завершили все уроки раздела «Инструменты»! Дальше — раздел HTML.

• Документация Vite