npm, pnpm, yarn
Тема дорожной карты · Frontend разработчик
npm, pnpm и yarn — три доминирующих менеджера пакетов для экосистем JavaScript и Node.js, отвечающих за установку, версионирование и управление сторонними зависимостями во frontend- и backend-проектах. Команды npm install, pnpm add и yarn add разрешают пакеты из реестра npm и фиксируют точные версии в package-lock.json, pnpm-lock.yaml или yarn.lock соответственно, обеспечивая воспроизводимость сборок в CI/CD-конвейерах. pnpm выделяется контент-адресуемым хранилищем, которое использует жёсткие ссылки для экономии дискового пространства и предотвращения фантомных зависимостей, а yarn предлагает режим Plug'n'Play, полностью устраняющий папку node_modules. Понимание скриптов package.json, семантического версионирования (^, ~, точная версия) и разницы между devDependencies и dependencies необходимо каждому frontend-разработчику, работающему с такими инструментами, как Webpack, Vite, ESLint и TypeScript.
Как это работает
npm, pnpm, yarn трансформирует исходник (TypeScript, JSX, современный JS, CSS Modules, ассеты) в бандлы, которые браузер исполнит, желательно оптимизированные под кеш и code splitting. Vite (dev-time esbuild + prod Rollup) — современный дефолт: быстрый HMR, разумные дефолты. Webpack — legacy, но повсеместен. Turbopack и Rspack — bun-/Rust-based эксперименты. Parcel — zero-config. Dev-сервер даёт HMR (Hot Module Replacement), правки отражаются без full reload.
Когда применять
Vite — для любого нового проекта: самый простой, быстрый, активно поддерживаемый. Webpack — только если проект уже на нём и миграция дорогая. Code-split по route-границе (lazy load). Bundle-аналитика (vite-plugin-visualizer, webpack-bundle-analyzer) — чтобы видеть, что шипится. Цель — < 200 KB начального JS gzipped на типичной странице.
Типичные ошибки
Ловушки npm, pnpm, yarn: деплой неминифицированных dev-бандлов в production; импорт всей библиотеки, когда нужна одна функция (import _ from "lodash" вместо import map from "lodash/map"); нет dynamic imports для route-level splitting; нет source maps в production (отладка вслепую); коммит dist/ или node_modules в git. Аудит размера бандла ежемесячно — он только растёт.