Этап 6 из 19 · ≈ 3 ч

Пакетные менеджеры — npm, pnpm, Yarn

Основа с Junior

Зависимости проекта, package.json, версии и lock-файл.

{
  "scripts": { "dev": "vite", "build": "vite build", "test": "vitest" },
  "dependencies": { "react": "^19.0.0" },
  "devDependencies": { "typescript": "~5.6.0", "vite": "^6.0.0" }
}

Что важно знать

  • Семантические версии MAJOR.MINOR.PATCH: ^1.2.3 разрешает обновления до 2.0.0, ~1.2.3 — только патчи.
  • Lock-файл (package-lock.json, pnpm-lock.yaml) фиксирует точные версии всего дерева — его коммитят; в CI ставят npm ci, который строго следует lock-файлу.
  • dependencies нужны в работе приложения, devDependencies — только для разработки и сборки.
  • pnpm хранит пакеты один раз на диске и не даёт использовать непрописанные зависимости; Yarn — альтернатива с похожими возможностями. Выбирают по проекту; принципы одни.
  • npx запускает бинарник пакета без глобальной установки.
  • Безопасность: npm audit, осторожность с малоизвестными пакетами и скриптами postinstall — атаки через цепочку поставок реальны.

Критерии освоения

Junior ≈ 3 ч

  • Устанавливает зависимости, различает dependencies и devDependencies и коммитит lock-файл
  • Объясняет семантические версии и разницу ^ и ~

Практика. Разобрать package.json и lock-файл своего проекта и объяснить, откуда взялась каждая прямая зависимость.

Middle ≈ 3 ч

  • Использует npm ci в CI, обновляет зависимости осознанно и проверяет уязвимости
  • Работает с workspaces pnpm

Практика. Обновить зависимости проекта до актуальных мажорных версий с проверкой ломающих изменений и аудитом уязвимостей.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все
Зачем нужен lock-файл (package-lock.json, pnpm-lock.yaml) и чем npm install отличается от npm ci?Junior

package.json задаёт диапазоны версий (^1.2.0), а lock-файл фиксирует точные версии всего дерева зависимостей — у всех разработчиков и в CI ставится одно и то же. Lock-файл коммитят. npm install может обновить lock в рамках диапазонов; npm ci ставит строго по…

Полный разбор
Что означают версии ^1.2.3 и ~1.2.3 и как обновлять зависимости?Junior

Semver: MAJOR.MINOR.PATCH — major ломает совместимость, minor добавляет функции, patch исправляет ошибки. ^1.2.3 разрешает обновления до <2.0.0 (minor и patch), ~1.2.3 — только patch (<1.3.0), 1.2.3 — точно. Обновляют регулярно и понемногу (Renovate…

Полный разбор
Что такое npm-скрипты и npx?Junior

Раздел scripts в package.json — именованные команды проекта: npm run dev, npm run build, npm test. В скриптах доступны бинарники из node_modules/.bin без указания пути — поэтому инструменты ставят локально в devDependencies, а не глобально: у всех одинаковые…

Полный разбор
Чем ES-модули отличаются от CommonJS?Junior

CommonJS — исторический формат Node.js: require() и module.exports, загрузка синхронная и динамическая (require можно вызвать где угодно). ES-модули — стандарт языка: import/export, статическая структура, асинхронная загрузка, работают и в браузере, и в…

Полный разбор

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

← Вся карта «Frontend-разработчик»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования