JSTAcademy
0 XP
Dashboard
Crash Courses
npm, package.json & the Build Chain
11 min
Masters+175 XP
Crash Courses · Masters

npm, package.json & the Build Chain

Use npm confidently and understand what happens between source code and the browser.
11 min read+175 XP on completionCert: JavaScript Crash Course
Tap any word in the text below to start reading from there.

npm, package.json & the Build Chain

Understanding the package system and what npm run build actually does removes a huge class of debugging helplessness.

npm Commands Daily

npm install                    # install all deps from package-lock.json
npm install react              # add to dependencies
npm install -D eslint          # add to devDependencies
npm uninstall package          # remove
npm run dev                    # run dev script
npm run build                  # run build script
npx some-cli                   # run without global install

Reading package.json

{
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "lint": "next lint",
    "typecheck": "tsc --noEmit"
  },
  "dependencies": {
    "next": "15.1.0",
    "react": "^19.0.0",
    "@supabase/supabase-js": "^2.46.0"
  },
  "devDependencies": {
    "typescript": "^5.7.2",
    "tailwindcss": "^4.0.0",
    "eslint": "^9.0.0"
  }
}

Version ranges: ^19.0.0 = accept minor+patch (19.x.x); ~19.0.0 = patches only; 19.0.0 = exact.

The Build Chain (Next.js)

  1. TypeScript — type-checks .ts/.tsx; build fails on errors
  2. Bundler — resolves all imports, loads files, applies aliases
  3. Tree Shaking — removes unused exported code
  4. Code Splitting — separate bundles per route
  5. Minification — renames vars, removes whitespace
  6. Output — .next/ directory

Environment Variables

NEXT_PUBLIC_API_URL=https://api.mysite.com  ← baked into client bundle at BUILD TIME
SUPABASE_SERVICE_ROLE_KEY=secret            ← server-side only at RUNTIME

NEXT_PUBLIC_* vars are inlined into the JS bundle — anyone can read them. Never put secrets in NEXT_PUBLIC_.

.gitignore Rules

Always commit: package.json, package-lock.json

Never commit: node_modules/, .env

Semantic Versioning

MAJOR.MINOR.PATCH — breaking.feature.fix. The ^ caret accepts MINOR and PATCH but locks MAJOR.

0%