npm vs yarn vs pnpm
What a Package Manager Does
npm, yarn, and pnpm all do the same core job: read a list of dependencies and download the right package versions into your project. They differ mainly in speed, disk usage, and lockfile format.
Note: Any of the three works fine for learning -- npm comes bundled with Node.js so it needs no extra install.
Warning: Mixing lockfiles from different package managers in the same project (package-lock.json alongside yarn.lock) can cause inconsistent installs.
Example: What a Package Manager Does
npm install react
yarn add react
pnpm add react
# all three fetch the same package from the npm registry⚠️ Run this command in your terminal.
Key Command Differences
The everyday commands map closely across tools: installing a package is npm install pkg, yarn add pkg, or pnpm add pkg; running a script is npm run dev, yarn dev, or pnpm dev.
Note: Stick to one package manager per project so teammates don't end up with mismatched lockfiles.
Warning: yarn dev (no run) works because yarn allows omitting run for script names -- typing the same shortcut in npm does not always work the same way.
Example: Key Command Differences
Task npm yarn pnpm
Install all npm install yarn pnpm install
Add package npm install x yarn add x pnpm add x
Run a script npm run dev yarn dev pnpm dev⚠️ Run this command in your terminal.
Why pnpm Saves Disk Space
pnpm stores one copy of each package version on disk and links it into every project that needs it, instead of duplicating node_modules per project the way npm and yarn classically do. This can save significant disk space across many projects.
Note: pnpm is worth trying once you're comfortable with npm and working across several projects at once.
Warning: Some older tooling assumes npm's flat node_modules layout and can misbehave under pnpm's stricter linking -- check compatibility if you hit strange errors.
Example: Why pnpm Saves Disk Space
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function DiskSpaceDemo() {
return (
<div>
<p style={{background: '#e57373', width: '260px', padding: '8px', color: '#fff'}}>
npm/yarn: full copy of react in every project
</p>
<p style={{background: '#81c784', width: '90px', padding: '8px', color: '#fff'}}>
pnpm: linked
</p>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<DiskSpaceDemo />);
</script>
</body>
</html>- Mixing lock files from different package managers in the same project (e.g. both package-lock.json and yarn.lock).
- Assuming all three package managers install dependencies identically -- their resolution strategies can differ.
- Not committing the lock file, causing inconsistent installs across machines.
- npm ships with Node.js and is the default choice for most projects.
- yarn offers faster installs and was an early alternative to npm.
- pnpm saves disk space by sharing packages across projects via symlinks.
- Pick one package manager per project and stick with it consistently.
Not applicable -- package managers are development-time tools.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: