Tooling — Vite, npm, pnpm, npx

Senior interviews often probe whether you understand what runs when, what bundles what, and why your tooling choices matter for DX, CI speed, and production performance.

Vite (what it is)

Vite is a modern frontend build tool that provides:

• A dev server with fast startup and HMR (Hot Module Replacement)
• A production build pipeline (bundling + code splitting + asset processing)

How it works (high level):

• Dev: serves native ESM modules and transforms on demand (fast feedback loop).
• Build: bundles for production (typically via Rollup under the hood).

When to use Vite:

• Most modern React/Vue/Svelte apps and many Angular-adjacent tooling setups.
• When you want fast dev iteration + good production output without heavy config.

Common Vite concepts to know:

• vite dev (or npm run dev) → dev server
• vite build → production build
• vite preview → serve the built output locally
• vite.config.ts → plugins, aliasing, build options
• Env vars: import.meta.env (not process.env by default)

npm (what it is)

npm is:

• A package registry (hosted at npmjs.com) and
• A package manager + CLI (npm) used to install dependencies and run scripts.

Key files:

• package.json — dependencies + scripts
• package-lock.json — lockfile pinning exact versions for reproducible installs

Common commands:

• npm install — install deps
• npm ci — clean, reproducible install in CI (uses lockfile strictly)
• npm run <script> — run package.json scripts

When to prefer npm ci:

• In CI pipelines for deterministic installs and speed.

pnpm (what it is)

pnpm is an alternative package manager focused on:

• Disk efficiency (content-addressable store)
• Speed (especially in monorepos)
• Strictness (helps catch “phantom dependency” issues)

Key files:

• pnpm-lock.yaml — pnpm lockfile

Why teams choose pnpm:

• Monorepos with lots of packages (better install performance and caching).
• More deterministic dependency access patterns (good for large teams).

Useful pnpm commands:

• pnpm install
• pnpm -r <cmd> (recursive across workspaces)
• pnpm dlx <pkg> (like npx, runs a package without permanent install)

Version management tip:

• Use corepack to pin pnpm versions across machines/CI.

npx (what it is)

npx runs package binaries without you manually installing them globally.

Typical use cases:

• Run project-local CLIs (e.g., npx eslint ., npx playwright test)
• Run one-off tools (e.g., npx serve .)

Modern equivalents:

• npm exec <cmd> (preferred in some setups)
• pnpm dlx <pkg> (pnpm equivalent for one-offs)

How these fit together (interview-ready)

• Vite builds/serves your frontend app.
• npm/pnpm install dependencies and run scripts that call Vite (and other tooling).
• npx is a convenient runner for CLIs (especially ad-hoc).

Good senior rule of thumb:

Pick one package manager per repo (npm or pnpm), commit the lockfile, and use CI-friendly install commands (npm ci / pnpm equivalents).

Common pitfalls (and strong answers)

• “Works on my machine” installs: mismatched lockfiles, using npm install in CI.
• Fix: commit lockfile, use npm ci (or pnpm lock + strict install) in CI.

• Dependency confusion: importing packages that aren’t declared (phantom deps).
• Fix: declare deps properly; pnpm tends to expose this earlier.

• Env var confusion: expecting Node-style process.env in Vite.
• Fix: use import.meta.env and Vite’s env prefixing rules.

Questions & Answers