Сборка: npm и Vite
До сих пор мы открывали файлы прямо из папки. В реальных проектах код принято «собирать»: подтягивать готовые пакеты, минифицировать и поднимать локальный сервер. Сегодня — минимальный сетап без магии.
Что такое npm
npm — менеджер пакетов для JavaScript. Ему говорят «установи пакет», он скачивает его в папку node_modules и записывает список зависимостей в package.json.
npm init -y # создать package.json
npm install sass # поставить пакет в проект
npm install -D vite # -D: только для разработки (devDependency)ℹ️
Разница зависимостей:
dependencies — то, что нужно и в продакшене (например, React); devDependencies — только при разработке (сборщик, препроцессор).Скрипты: команды одним словом
Вместо длинных команд пишем псевдонимы в package.json и запускаем через npm run ….
// package.json (фрагмент)
"scripts": {
"dev": "vite", // сервер для разработки
"build": "vite build", // финальная сборка
"preview": "vite preview"
}Vite: быстрый сборщик
Vite создаёт проект одной командой, раздаёт его на локальном сервере с «горячей перезагрузкой» (изменили файл — страница обновилась сама) и на выходе собирает всё в папку dist.
# создать проект
npm create vite@latest my-site -- --template vanilla
cd my-site
npm install
npm run dev # http://localhost:5173
npm run build # готовая папка dist/💡
После
build получится маленькая папка dist — её и можно публиковать или коммитить. Именно её потом отдаёт хостинг, а не исходники с node_modules.Что не коммитим
Папку node_modules можно переустановить одной командой — в Git её не носят. Для этого есть файл .gitignore.
# .gitignore
node_modules/
dist/⚠️
Не кладите в Git
package-lock.json? Кладите! Это «слепок» точных версий всех пакетов — команда воспроизведёт одинаковую установку везде. А вот node_modules — никогда.Итоговый цикл разработчика
npm run dev— пишем код, браузер обновляется сам;- После изменений —
git add+git commit; npm run build— собрали финальные файлы;npm run preview— проверили собранное локально.