Engine & Tooling

CommonJS (Node's original system) uses require() to import and module.exports to export, loading modules synchronously at runtime. ES modules (the standard) use import/export, are parsed statically before execution, and support async loading. ESM bindings are live read-only views, while a CommonJS require returns a snapshot copy of the exported value.

A bundler (e.g. Webpack, Rollup, esbuild) follows the module graph from an entry point and combines many modules into fewer files. Tree-shaking drops unused exports — it needs static ES modules to know what is reachable. Minification shrinks the output by removing whitespace and renaming locals. Code-splitting does the opposite of combining: it carves the bundle into chunks loaded on demand.

Babel is a transpiler: it rewrites modern JavaScript syntax (arrow functions, class, optional chaining) into equivalent older syntax that target engines can parse, guided by a configured target list (e.g. browserslist). Transpilation transforms syntax; polyfilling adds missing runtime APIs like Promise. Babel handles syntax and pulls in polyfills (via core-js) only for the APIs your targets lack.

Source is first transpiled (e.g. Babel) to lower modern syntax to the targets. A bundler then walks the static ESM graph to combine modules, tree-shaking unused exports out. Minification shrinks the result; polyfills are injected for APIs the targets lack (often via core-js, ideally only the needed ones). Each stage emits a source map, chained so the final map points minified positions back to original source for debugging.

A JS engine (e.g. V8 in Chrome and Node) is a program that runs JavaScript. It parses source into an AST, compiles it to bytecode, and starts interpreting immediately; a JIT compiler then recompiles hot code to optimized machine code at runtime. JavaScript execution itself is single-threaded — one call stack runs one task at a time.

A polyfill is code that implements a missing built-in API (e.g. Promise, Array.prototype.includes) so older environments behave as if it were native. A shim is the broader term: any code that intercepts or patches an API to provide consistent behavior, not necessarily a missing standard one. Feature detection (if (!window.Promise)) decides at runtime whether to load the polyfill, rather than sniffing the browser.

All three embed a JS engine but expose different host APIs. Browsers add the DOM, fetch, and localStorage but no file system. Node.js adds file system, networking, and process via CommonJS modules (with ESM support). Deno (the runtime by Node's creator) uses web-standard APIs and ESM by default, ships TypeScript natively, and sandboxes file/network access behind explicit permission flags.

Node decides a file's type by .mjs/.cjs extension or the package's "type" field, then resolves specifiers via node_modules lookup and exports maps. ESM can import a CommonJS module (its module.exports becomes the default export), but CommonJS cannot statically require an ESM module because ESM loads asynchronously. The escape hatch is dynamic import(), which returns a Promise and works from either system at runtime.

A source map is a JSON file that maps positions in the generated (minified or transpiled) output back to the original source — file, line, and column. The browser loads it when DevTools is open (via a //# sourceMappingURL comment), so breakpoints, stack traces, and errors show original code instead of the mangled bundle. It is a debug aid only and does not change how the shipped code runs.

V8 assigns each object a hidden class (shape) describing its property layout, so objects created the same way share one shape and properties live at fixed offsets. Inline caching then remembers the shape seen at a call site to fetch the property directly next time. Changing an object's shape — adding properties in a different order, deleting one, or passing mixed shapes — invalidates the cache and triggers deoptimization back to slower generic code.

The engine owns the heap and runs a tracing garbage collector that reclaims objects unreachable from roots; a leak is unintended reachability — lingering closures, detached DOM nodes, growing globals, or live timers. The event loop, by contrast, belongs to the runtime (browser or Node), not the engine: it feeds tasks and microtasks onto the engine's single call stack. Deoptimization is separate — triggered by shape or type changes, not by GC.

Tree-shaking is dead-code elimination over the import graph: the bundler can drop an export only if it proves no path reaches it. ES module import/export are static — analyzable before running — so the graph is known; CommonJS require can take a computed path and reassign module.exports at runtime, defeating the analysis. The sideEffects flag in package.json tells the bundler a module is pure, so even imported-but-unused modules may be removed entirely.