День 5 | Устанавливаем Node и npm — Продвинутый курс по верстке сайтов

Что такое Node.js и зачем он нужен?

До сих пор мы работали только с HTML и CSS — это языки, которые браузер понимает напрямую. Но для современной разработки нужны дополнительные инструменты, которые помогают автоматизировать работу. Вот для этого и нужен Node.js.

Что такое Node.js?

Node.js — это среда выполнения JavaScript вне браузера. Простыми словами, это программа, которая позволяет запускать JavaScript на вашем компьютере, а не только в браузере.

Зачем это нужно для верстки? Node.js нужен не для написания кода сайта, а для запуска инструментов разработки:

✅ Сборщики (Vite, Webpack, Gulp) — автоматически объединяют и оптимизируют файлы
✅ Компиляторы — превращают SCSS в CSS, современный JavaScript в старый
✅ Локальные серверы — запускают сайт на вашем компьютере для тестирования
✅ Инструменты оптимизации — сжимают изображения, минифицируют код

Без Node.js вам пришлось бы вручную компилировать SCSS, объединять файлы, оптимизировать код. С Node.js всё это делается автоматически одной командой.

Что такое npm?

npm (Node Package Manager) — это менеджер пакетов для Node.js. Простыми словами, это программа, которая помогает устанавливать и управлять другими программами (пакетами).

Представьте, что npm — это как App Store для разработчиков. Вместо приложений там программы для разработки. Например, вы можете установить Vite (современный сборщик), Sass (компилятор SCSS), и множество других инструментов.

npm устанавливается автоматически вместе с Node.js, так что вам не нужно устанавливать его отдельно.

Установка Node.js

Теперь давайте установим Node.js. Процесс очень простой и похож на установку любой другой программы.

Windows и Mac

Откройте браузер и перейдите на официальный сайт: https://nodejs.org
На главной странице вы увидите две кнопки с версиями:
- LTS (Long Term Support) — стабильная версия, рекомендуется для большинства пользователей. LTS означает "долгосрочная поддержка" — эта версия будет получать обновления безопасности долгое время.
- Current — самая новая версия с последними функциями. Может быть менее стабильной.
Рекомендую выбрать LTS версию — она более стабильная и проверенная
Нажмите на кнопку LTS, и начнётся автоматическая загрузка установщика для вашей операционной системы
После загрузки запустите установщик:
- Windows: файл будет называться примерно node-v20.x.x-x64.msi
- Mac: файл будет называться примерно node-v20.x.x.pkg
Следуйте инструкциям установщика. Можно оставить все настройки по умолчанию — они подходят для большинства случаев
После установки перезапустите терминал (закройте и откройте заново) — это важно, чтобы система "увидела" новую программу

Mac через Homebrew

Если у вас уже установлен Homebrew (мы устанавливали его в предыдущем уроке), можно установить Node.js через него:

brew install node

Эта команда установит и Node.js, и npm одновременно.

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

brew — программа Homebrew
install — команда установки
node — название пакета (Node.js)

Linux (Ubuntu/Debian)

На Linux можно установить через менеджер пакетов:

sudo apt-get update
sudo apt-get install nodejs npm

Или использовать более свежую версию через NodeSource (рекомендуется):

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

Что делает первая команда? Она скачивает и запускает скрипт, который добавляет репозиторий NodeSource в список источников пакетов. Это позволяет установить более новую версию Node.js, чем та, что есть в стандартных репозиториях Ubuntu.

Проверка установки

После установки нужно проверить, что Node.js и npm установлены правильно. Откройте терминал и выполните две команды:

node --version
npm --version

Если всё установлено правильно, вы увидите что-то вроде:

v20.10.0
10.2.3

Первая строка — версия Node.js, вторая — версия npm.

Если вы видите ошибку "command not found":

Убедитесь, что вы перезапустили терминал после установки
Попробуйте переустановить Node.js
На Windows убедитесь, что установщик добавил Node.js в PATH (путь системы) — обычно это делается автоматически
На Mac через Homebrew проверьте, что Homebrew установлен правильно: brew --version

Что такое package.json?

package.json — это файл, который описывает ваш проект и его зависимости. Это как "паспорт" вашего проекта. В нём хранится:

Название проекта
Версия проекта
Описание
Список используемых инструментов (зависимости)
Команды для запуска различных задач

Когда вы устанавливаете какой-то инструмент (например, Vite), npm автоматически добавляет его в package.json. Это позволяет другим разработчикам (или вам на другом компьютере) установить все нужные инструменты одной командой.

Пример package.json:

{
  "name": "my-website",
  "version": "1.0.0",
  "description": "Мой первый сайт",
  "main": "index.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "keywords": ["website", "html", "css"],
  "author": "Ваше Имя",
  "license": "MIT",
  "dependencies": {},
  "devDependencies": {}
}

Разберём каждое поле:

name — название проекта (должно быть уникальным, если публикуете в npm)
version — версия проекта (формат: major.minor.patch, например 1.0.0)
description — краткое описание проекта
main — главный файл проекта (обычно не используется для верстки)
scripts — команды, которые можно запускать через npm run
dependencies — зависимости для продакшена (библиотеки, которые нужны на готовом сайте)
devDependencies — зависимости для разработки (инструменты, которые нужны только во время разработки)

Основные команды npm

Теперь давайте изучим основные команды npm. Они очень похожи на команды Git — простые и логичные.

Инициализация проекта

Чтобы создать package.json, нужно инициализировать проект:

npm init

Эта команда задаст вам несколько вопросов (название проекта, версия, описание и т.д.) и создаст package.json.

Если не хотите отвечать на вопросы:

npm init -y

Флаг -y означает "yes" — использовать значения по умолчанию для всех вопросов. Это быстрее, и вы всегда можете отредактировать package.json вручную позже.

Установка пакетов

Установить пакет локально (только для этого проекта):

npm install package-name

Или короткая версия:

npm i package-name

Например, чтобы установить Vite:

npm install --save-dev vite

После установки вы увидите:

Папку node_modules — здесь хранятся все установленные пакеты (может быть очень большой!)
Файл package-lock.json — фиксирует точные версии пакетов (важно для воспроизводимости установки)
Обновлённый package.json — добавлена запись о новом пакете

Установить пакет глобально (для всех проектов):

npm install -g package-name

Глобальная установка нужна редко. Обычно пакеты устанавливают локально для каждого проекта.

Установить пакет как зависимость разработки:

npm install --save-dev package-name

Или короткая версия:

npm install -D package-name

Зависимости разработки — это инструменты, которые нужны только во время разработки (например, Vite, компиляторы), но не нужны на готовом сайте. Они попадают в секцию devDependencies в package.json.

Обычные зависимости (без --save-dev) попадают в секцию dependencies — это библиотеки, которые нужны и на готовом сайте.

Другие полезные команды

# Удалить пакет
npm uninstall package-name

# Обновить пакет
npm update package-name

# Обновить все пакеты
npm update

# Посмотреть установленные пакеты
npm list

# Посмотреть только пакеты верхнего уровня
npm list --depth=0

Работа с командной строкой

Для работы с Node.js и npm нужно знать базовые команды терминала. Не пугайтесь — их немного, и они очень простые.

Навигация по папкам

Посмотреть текущую папку:

Mac/Linux: pwd (print working directory)
Windows: cd (без параметров)

Перейти в папку:

cd folder-name

Например: cd Documents — перейти в папку Documents.

Перейти на уровень выше:

cd ..

Две точки (..) означают "родительская папка".

Перейти в домашнюю папку:

Mac/Linux: cd ~
Windows: cd %USERPROFILE%

Посмотреть содержимое папки:

Mac/Linux: ls
Windows: dir

Совет для Mac/Linux: Добавьте флаг -la чтобы увидеть скрытые файлы: ls -la

Работа с файлами и папками

Создать папку:

mkdir folder-name

Например: mkdir my-website — создать папку my-website.

Создать файл:

Mac/Linux: touch file.txt
Windows: type nul > file.txt

Но обычно файлы создают в редакторе кода, а не через терминал.

Удалить файл:

Mac/Linux: rm file.txt
Windows: del file.txt

Удалить папку:

Mac/Linux: rm -rf folder-name (осторожно! Удалит всё внутри)
Windows: rmdir /s folder-name

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

Установите Node.js с официального сайта (выберите LTS версию)
Проверьте установку: выполните node --version и npm --version
Создайте папку для проекта: mkdir my-website
Перейдите в папку: cd my-website
Инициализируйте npm проект: npm init -y
Откройте созданный package.json в текстовом редакторе и изучите его структуру
Установите тестовый пакет: npm install lodash (это популярная библиотека JavaScript)
Посмотрите, как изменился package.json — должна появиться секция "dependencies"
Посмотрите, что появилась папка node_modules — здесь хранятся все установленные пакеты
Удалите пакет: npm uninstall lodash

Полезные npm пакеты для верстки

Вот список пакетов, которые мы будем использовать в курсе:

vite — современный сборщик модулей (объединяет файлы, оптимизирует код, включает dev server)
sass — компилятор SCSS (нужен для работы с SCSS в Vite)

Не устанавливайте их сейчас — мы будем устанавливать по мере необходимости в следующих уроках.

Что дальше?

Отлично! Теперь у вас установлен Node.js и npm. В следующем уроке мы настроим Vite — современный и быстрый инструмент для сборки проекта, который автоматизирует множество задач и сделает вашу работу намного удобнее.

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

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

День 5 | Устанавливаем Node и npm

Что такое Node.js и зачем он нужен?

Что такое Node.js?

Что такое npm?

Установка Node.js

Windows и Mac

Mac через Homebrew

Linux (Ubuntu/Debian)

Проверка установки

Что такое package.json?

Основные команды npm

Инициализация проекта

Установка пакетов

Другие полезные команды

Работа с командной строкой

Навигация по папкам

Работа с файлами и папками

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

Полезные npm пакеты для верстки

Что дальше?

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

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