Client-Side Tooling · 2 of 8

Package Managers

The tools that install, version, and pin your dependencies — and produce the lockfile that guarantees the same code runs everywhere.

npmpnpmyarnbunLockfiles
← Back to Client Side
Quick Facts

At a Glance

Basic Concepts

  • package.json declares your direct dependencies and their version ranges.
  • Lockfile (package-lock.json, pnpm-lock.yaml, yarn.lock, bun.lockb) pins exact versions for reproducibility — always commit it.
  • SemVer: ^1.2.3 = compatible upgrades, ~1.2.3 = patch only, 1.2.3 = exact.
  • node_modules is where installed packages live — historically huge ("heaviest object in the universe").
  • Workspaces / monorepos let one repo host many packages with shared deps.
Landscape

The Major Package Managers

ToolStrengthsTrade-offs
npmBundled with Node.js; default everywhere.Largest node_modules, slower than alternatives.
pnpmContent-addressable store + symlinks → 2–3× faster, far less disk space.Symlink quirks on edge cases; some tools choke.
yarn (v4 Berry)Plug'n'Play optional, zero-installs, modern features.PnP breaks tools that expect a real node_modules.
bunFastest of all (Zig); install = milliseconds.Younger ecosystem; some incompatibilities.
Mechanics

How They Work

The Install Workflow
  1. Read package.json for direct deps.
  2. Resolve the full dependency tree (transitive deps).
  3. Check the lockfile for pinned versions.
  4. Download tarballs from the registry (npm registry, by default).
  5. Verify integrity (SHA hashes from the lockfile).
  6. Place files in node_modules (or symlink from a global store).
  7. Run lifecycle scripts (preinstall, postinstall).
pnpm's Killer Innovation

pnpm stores every version of every package once on disk in ~/.pnpm-store, and creates symlinks into each project's node_modules. Result:

  • Disk usage often 70% lower than npm.
  • Installs much faster on cold cache.
  • Stricter — only declared dependencies are accessible (catches phantom deps).
Workspaces / Monorepos

A single repo with multiple package.json files. The package manager links workspace packages locally — change one, the others pick it up immediately.

// package.json (root)
{
  "workspaces": ["packages/*", "apps/*"]
}

For more sophisticated monorepos, layer Turborepo, Nx, Moon, or Lerna on top.

Lockfile Discipline
  • Commit the lockfile. Always. Not optional.
  • Use npm ci / pnpm install --frozen-lockfile in CI — fails if the lockfile is out of date.
  • Different package managers' lockfiles are not interchangeable; pick one for the team.
Security & Supply Chain
  • npm audit / pnpm audit — vulnerability scan against the GitHub advisory DB.
  • Dependabot / Renovate — automated PRs to update deps.
  • Snyk / Socket.dev / GitHub Advanced Security — deeper scanning, license checks, malware detection.
  • Lockfile lint tools verify integrity hashes & provenance.
  • Provenance (npm 9+) cryptographically links a package to its source repo.
Picking

Which to Choose

Default / Simplest

npm — bundled with Node, works everywhere, fine for solo projects.

Disk & Speed

pnpm — best for monorepos and developers with many projects.

Cutting Edge

bun — fastest installs by far, increasingly compatible.

Yarn Shop / PnP Curious

Yarn 4 (Berry) — strong monorepo features, optional zero-install.

Continue

Other Client-Side Tooling

BundlersTranspilersCSS SystemsState ManagementComponent LibrariesAccessibilityInternationalization ↑ Back to Client Side