1CommonJS (CJS)

Legacy Node.js module system. Uses synchronous require(). Modules are loaded and executed at runtime. Dynamic imports are possible but prevents many build-time optimizations.

const add = (a, b) => a + b;
module.exports = { add };

2ES Modules (ESM)

Modern standard. Uses static import/export. Enables tree-shaking, scope hoisting, and top-level await. Native support in modern browsers and Node (with type: module).

export const add = (a, b) => a + b;

export default { add };

3UMD (Universal Module Definition)

Legacy pattern designed to work in browser, Node, and AMD environments. Usually generated by bundlers for library distribution. Larger output size and rarely used in modern apps.

(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    define([], factory);
  } else if (typeof module === 'object' && module.exports) {
    module.exports = factory();
  } else {
    root.myLib = factory();
  }
}(typeof self !== 'undefined' ? self : this, function() {
  return { /* lib */ };
}));

4Bundler Role & Interop

Bundlers (Webpack, Vite, Rollup) resolve the module graph at build time. ESM enables powerful optimizations. Interop between CJS and ESM can be tricky — default exports from CJS become .default in ESM.

Common questions

• ›“What is the difference between CJS and ESM?”
• ›“Why does tree-shaking only work with ESM?”
• ›“How do you handle CJS/ESM interop issues?”
• ›“When would you still use UMD?”

What interviewers look for

• Deep understanding of static vs runtime module resolution
• Knowledge of tree-shaking and bundler optimizations
• Practical interop strategies
• Modern best practices (ESM-first)