Tooling — Cheat Sheet

npm, package.json and Dependencies

{
  "name": "toolhub",
  "type": "module",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "typecheck": "tsc --noEmit"
  },
  "dependencies": {          // shipped to the browser / needed at runtime
    "next": "14.2.5",        // exact
    "zod": "^3.23.0"         // >=3.23.0 <4.0.0
  },
  "devDependencies": {       // build and test only, not shipped
    "typescript": "~5.5.0",  // >=5.5.0 <5.6.0
    "vitest": "^2.0.0"
  },
  "engines": { "node": ">=20" }
}

// Ranges
// ^1.2.3  -> minor and patch updates   (the default npm adds)
// ~1.2.3  -> patch updates only
// 1.2.3   -> exactly this
// Below 1.0.0, ^ behaves like ~ — 0.x is treated as unstable.

// Run scripts
npm run build
npx tsc --noEmit        // run a binary without installing it globally

Bundlers — What They Actually Do

// This ships one function, not the whole library
import { debounce } from 'lodash-es'

// This ships all of lodash — CommonJS cannot be statically analysed
const _ = require('lodash')
import _ from 'lodash'

// Requirements for tree shaking to work:
//   1. ES modules (static import/export), not CommonJS
//   2. No side effects at module top level
//   3. "sideEffects": false in the package's package.json

// A top-level side effect defeats it:
// utils.js
export function unused() { }
window.analytics = init()      // runs on import, so the module is kept

// Barrel files are the usual culprit in application code:
// components/index.ts re-exporting 80 components means importing
// one can pull the graph of all 80 into the analysis.
import { Button } from '@/components'        // risky
import { Button } from '@/components/Button' // predictable

Build Configuration — Targets, Polyfills and Env Vars

// browserslist drives the target
"browserslist": ["> 0.5%", "last 2 versions", "not dead"]

// Transpiling handles SYNTAX
const x = a?.b ?? c
// becomes, for an old target:
var x = (a === null || a === void 0 ? void 0 : a.b) ?? c

// Polyfills handle MISSING APIs — rewriting syntax cannot invent
// Array.prototype.at or structuredClone; those need runtime code.
import 'core-js/actual/array/at'

// A lower target means more rewriting, which means a bigger, slower
// bundle for everybody. In 2026, ES2022 is a safe baseline unless
// you have a documented legacy requirement.
"target": "ES2022"

// Check support before using a feature — caniuse.com, or the
// compatibility table at the bottom of every MDN page.

DevTools — Debugging Beyond console.log

// Conditional breakpoint — right-click a line number
//   condition: problem.slug === 'two-sum'
// Stops on the one iteration you care about out of 500.

// Logpoint — logs without pausing and without editing the file
//   Right-click -> Add logpoint -> problem.slug, state.status

// Break on a DOM change: Elements -> right-click -> Break on ->
//   attribute modifications / subtree modifications
// This is how you find what code is adding that class.

// Break on any exception: Sources -> pause icon -> caught + uncaught
// Then the stack at the moment of failure, not after it.

// In code
debugger        // pauses when DevTools is open, ignored otherwise

// Useful console methods people forget
console.table(problems)          // arrays of objects as a grid
console.time('render'); console.timeEnd('render')
console.trace()                  // how did we get here
console.assert(items.length > 0, 'empty')

Workspaces, Monorepos and Shipping a Package

// root package.json
{ "private": true, "workspaces": ["apps/*", "packages/*"] }

// apps/web/package.json
{ "dependencies": { "@aicancode/shared": "workspace:*" } }

// Layout
//   apps/web        Next frontend
//   apps/api        Node backend
//   packages/shared types + zod schemas used by both
//   packages/ui     component library

npm install                       // installs everything once
npm run build -w apps/web         // run a script in one workspace

// The payoff: change a schema in packages/shared and both apps
// fail to typecheck immediately — no publish step, no version drift.

// The cost: slower CI unless you cache and only build what changed.
// Turborepo or Nx exist for exactly that.