День 6 | Настраиваем сборку для проекта — Продвинутый курс по верстке сайтов

Что такое сборщик и зачем он нужен?

Представьте: у вас есть 10 файлов CSS, 5 файлов JavaScript, куча изображений. Вручную их объединять, оптимизировать, минифицировать — это долго и скучно. А что если всё это делать автоматически одной командой? Вот для этого и нужен сборщик.

Сборщик — это программа, которая берёт ваши файлы и зависимости и собирает их в оптимизированные бандлы (готовые файлы для браузера).

Что делает сборщик?

✅ Объединяет множество файлов в один (или несколько)
✅ Компилирует SCSS в CSS
✅ Минифицирует код для продакшена (удаляет пробелы, комментарии, сокращает имена переменных)
✅ Оптимизирует изображения
✅ Автоматически перезагружает страницу при изменениях
✅ Транспилирует современный JavaScript в старый (чтобы работало в старых браузерах)

Без сборщика вам пришлось бы вручную:

Компилировать каждый SCSS файл в CSS
Объединять все CSS файлы в один
Объединять все JS файлы в один
Минифицировать код
Оптимизировать изображения
Каждый раз обновлять страницу вручную

С сборщиком всё это делается автоматически!

Почему Vite?

В этом курсе мы используем Vite — современный и быстрый сборщик, который стал стандартом для новых проектов в 2024-2025 годах.

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

✅ Мгновенный запуск — dev server запускается за миллисекунды
✅ Быстрая HMR — изменения применяются мгновенно без перезагрузки
✅ Простая настройка — работает из коробки, минимум конфигурации
✅ Нативные ES модули — использует современные возможности браузера
✅ Оптимизированная сборка — быстрая сборка для продакшена

Альтернативы: Существуют и другие сборщики (Webpack, Rollup, Parcel). Webpack всё ещё используется в больших legacy проектах, но для новых проектов Vite стал стандартом из-за скорости и простоты.

Установка Vite

Vite устанавливается через npm. Откройте терминал в папке вашего проекта и выполните:

npm install --save-dev vite

Что мы устанавливаем?

vite — сам сборщик (включает dev server и сборщик для продакшена)
--save-dev — устанавливаем как зависимость разработки (не нужна на готовом сайте)

После установки проверьте версию:

npx vite --version

Что такое npx? npx — это утилита, которая запускает пакеты из node_modules. Если пакет установлен локально, но не добавлен в PATH, можно запустить его через npx.

Структура проекта

Перед настройкой Vite нужно создать правильную структуру папок. Вот рекомендуемая структура:

my-website/
├── src/                    # Исходные файлы (здесь мы пишем код)
│   ├── index.html
│   ├── js/
│   │   └── main.js
│   └── scss/
│       └── style.scss
├── dist/                   # Собранные файлы (сюда Vite положит результат)
├── node_modules/            # Установленные пакеты (создаётся автоматически)
├── package.json
└── vite.config.js          # Конфигурация Vite (опционально)

Объяснение структуры:

src/ (source — источник) — здесь мы пишем код. Это наши "сырые" файлы.
dist/ (distribution — распространение) — здесь Vite складывает готовые файлы для браузера. Эти файлы мы загружаем на сервер.
node_modules/ — папка с установленными пакетами. Не нужно трогать вручную.

Создайте эту структуру:

mkdir src
mkdir src/js
mkdir src/scss
mkdir dist

Или через терминал одной командой (Mac/Linux):

mkdir -p src/js src/scss dist

Базовая конфигурация Vite

Vite работает из коробки без конфигурации! Но для кастомизации можно создать файл vite.config.js в корне проекта:

import { defineConfig } from "vite";

export default defineConfig({
  // Корневая папка проекта
  root: "./src",
  
  // Папка для собранных файлов
  build: {
    outDir: "../dist",
    emptyOutDir: true, // Очищать папку dist перед сборкой
  },
  
  // Настройки dev server
  server: {
    port: 5173, // Порт по умолчанию
    open: true, // Автоматически открыть браузер
  },
});

Разберём каждую часть подробно:

1. import { defineConfig } from "vite"

Это современный синтаксис ES модулей для импорта. Vite использует ES модули вместо CommonJS (require/module.exports).

2. defineConfig

Функция, которая помогает с автодополнением и проверкой типов в редакторе. Не обязательна, но рекомендуется.

3. root

root: "./src" — указывает, где находится корень проекта. По умолчанию это текущая папка, но мы указываем src, чтобы index.html был в корне исходников.

4. build.outDir

outDir: "../dist" — папка, куда сохранять собранные файлы. Относительно root, поэтому ../dist означает "на уровень выше, в папку dist".

5. server

Настройки dev server (сервера разработки):

port: 5173 — порт, на котором будет работать сервер (по умолчанию 5173)
open: true — автоматически открывать браузер при запуске

Настройка скриптов в package.json

Чтобы не писать длинные команды каждый раз, добавим скрипты в package.json. Откройте package.json и найдите секцию "scripts". Добавьте туда:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Что означают эти скрипты?

"dev": "vite" — запуск dev server для разработки. Запускается: npm run dev
"build": "vite build" — сборка для продакшена. Запускается: npm run build
"preview": "vite preview" — предпросмотр собранного проекта. Запускается: npm run preview

Почему npm run? Команды из секции "scripts" запускаются через npm run название-скрипта. Это позволяет использовать локально установленные пакеты (vite из node_modules), даже если они не в PATH.

Создание index.html

Vite использует index.html как точку входа. Создайте src/index.html:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Мой сайт</title>
</head>
<body>
    <h1>Привет, Vite!</h1>
    
    <!-- Vite автоматически добавит ссылку на main.js -->
    <script type="module" src="/js/main.js"></script>
</body>
</html>

Важно: Обратите внимание на type="module" в теге script. Это говорит браузеру, что это ES модуль. Vite использует нативные ES модули для быстрой разработки.

Создание main.js

Создайте src/js/main.js с простым кодом:

console.log("Hello Vite!");

// Можно импортировать CSS и SCSS
import "../scss/style.scss";

Что происходит? Vite автоматически обработает импорт SCSS файла и скомпилирует его в CSS.

Обработка CSS и SCSS

Vite поддерживает CSS и SCSS из коробки! Но для SCSS нужно установить sass:

npm install --save-dev sass

После установки можно импортировать SCSS файлы в JavaScript:

// В src/js/main.js
import "../scss/style.scss";

Vite автоматически:

Компилирует SCSS в CSS
Обрабатывает импорты
Добавляет CSS в HTML

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

Создайте структуру папок проекта (src, src/js, src/scss, dist)
Установите Vite: npm install --save-dev vite
Создайте vite.config.js с базовой конфигурацией (опционально)
Создайте src/index.html с базовой структурой
Создайте src/js/main.js с простым кодом: console.log("Hello Vite!");
Добавьте скрипты в package.json
Запустите dev server: npm run dev
Проверьте, что браузер открылся автоматически на http://localhost:5173
Установите sass: npm install --save-dev sass
Создайте src/scss/style.scss с простыми стилями
Импортируйте SCSS в main.js: import "../scss/style.scss";
Проверьте, что стили применились
Запустите сборку для продакшена: npm run build
Проверьте, что в папке dist появились собранные файлы

Частые ошибки и их решение

Ошибка: "Cannot find module 'vite'"

Убедитесь, что вы установили vite: npm install --save-dev vite
Проверьте, что вы в правильной папке (где есть package.json)

Ошибка: "Failed to resolve import"

Проверьте пути к файлам при импорте
Убедитесь, что файлы существуют
Помните: пути должны быть относительными от текущего файла

Ошибка: "Cannot find module 'sass'" (при импорте SCSS)

Установите sass: npm install --save-dev sass

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

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

Vite vs Webpack

Когда использовать Vite:

✅ Новые проекты
✅ Нужна быстрая разработка
✅ Простая настройка
✅ Современные браузеры

Когда использовать Webpack:

✅ Большие legacy проекты (уже используют Webpack)
✅ Нужна очень сложная кастомизация
✅ Работа с очень старыми браузерами
✅ Понимание принципов сборки (Webpack более явный)

Вывод: Для новых проектов Vite — лучший выбор. Webpack всё ещё актуален для существующих проектов и обучения принципам сборки.

Что дальше?

Отлично! Теперь у вас настроен Vite. В следующем уроке мы настроим SCSS в Vite и изучим современные подходы к работе со стилями, включая CSS Custom Properties.

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

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

День 6 | Настраиваем сборку для проекта

Что такое сборщик и зачем он нужен?

Что делает сборщик?

Почему Vite?

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

Установка Vite

Структура проекта

Базовая конфигурация Vite

1. import { defineConfig } from "vite"

2. defineConfig

3. root

4. build.outDir

5. server

Настройка скриптов в package.json

Создание index.html

Создание main.js

Обработка CSS и SCSS

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

Частые ошибки и их решение

Vite vs Webpack

Что дальше?

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

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