ToolingBeginner3h

Package managers.

npm, pnpm, lockfiles, semver, and dependency hygiene.

What is it?

A package manager downloads code your project depends on, locks the exact versions, and runs scripts. npm ships with Node. pnpm and Bun are faster, disk-efficient alternatives that read the same package.json. The lockfile (pnpm-lock.yaml, package-lock.json) records the resolved graph so every machine installs identical bytes.

Why it matters

Dependency hygiene is invisible until it breaks. A teammate's "it works on mine" is almost always a lockfile they didn't commit. Knowing what the manager is doing — and trusting the lockfile — is the difference between predictable builds and a mystery outage at 4 PM Friday.

What to learn

  • package.json anatomy: dependencies, devDependencies, scripts
  • semver basics: ^1.2.3 vs ~1.2.3 vs exact pins
  • Lockfiles — what they record and why you commit them
  • npm install vs npm ci (and the pnpm/yarn equivalents)
  • Scripts: how pnpm run build actually finds and runs your script
  • npx / pnpm dlx for one-off binaries

Common pitfall

Updating dependencies all at once with npm update and shipping. semver is a promise libraries break by accident. Update one package at a time, re-run tests, commit, repeat. Tools like npm-check-updates make this manageable; "yolo update" rarely does.

Resources

Primary (free):

Practice

Take any project and audit package.json. Pin every direct dependency to an exact version (no ^ or ~). Run pnpm install and verify the lockfile changes are tiny. Done when a teammate (or your CI) installs identical bytes from a fresh checkout.

Outcomes

  • Read a package.json and predict what each script does.
  • Pick the right install command for development vs CI.
  • Update dependencies safely without batch-shipping breaks.
  • Choose between npm, pnpm, and Bun with reasons that fit your team.
Back to Frontend roadmap