npx and semantic versioning ranges

npx + semver at a glance

npx basics

// Emulate what npx does: run a package's CLI on-demand
function demoNpx(cmd) {
  console.log("npx", cmd);
  console.log("→ downloads tool if needed");
  console.log("→ runs its binary once");
  console.log("→ no global install required");
}

demoNpx("eslint --version");
demoNpx("create-vite@latest my-app");

Local beats global (usually)

Semver ranges (simple)

// Semver range cheat sheet (intent only)
// MAJOR.MINOR.PATCH
const ranges = [
  "^1.2.3  -> allow 1.x (>=1.2.3 <2.0.0)",
  "~1.2.3  -> allow 1.2.x (>=1.2.3 <1.3.0)",
  "1.2.3   -> exact only"
];

for (const line of ranges) console.log(line);

Picking a range

// Tiny helper to explain when to use which
function suggestRange(stability) {
  if (stability === "beginner-default") return "^";
  if (stability === "hotfix-only") return "~";
  if (stability === "lock") return "exact";
  return "^";
}

console.log("beginner-default ->", suggestRange("beginner-default"));
console.log("hotfix-only      ->", suggestRange("hotfix-only"));
console.log("lock             ->", suggestRange("lock"));

Lockfiles matter

Semver tilde vs caret quiz

Recap