JavaScript Modules: ES Modules in Production
ES Modules replaced CommonJS in browsers and modern Node.js. Here is how I structure my projects and the gotchas I hit along the way. For years, JavaScript had competing module systems. CommonJS dominated Node.js, AMD ruled the browser through RequireJS, and everyone wrote build scripts to bridge them. ES Modules unified the ecosystem, and I have been migrating projects to pure ESM ever since. The transition has been smooth overall, but there are practical details worth sharing. The Basics of Import and Export ES Modules use import and export statements. Named exports are my default. they make dependencies explicit and enable tree shaking. A default export is useful for modules that export a single primary function or class, but I avoid mixing named and default exports in the same module because it creates confusion about what to import. // math.js export function add(a, b) { return a + b; } export function subtract(a, b) { return a - b; } export default { add, subtract }; // consumer.js import { add } from './math.js'; import math from './math.js'; // default import math.add(1, 2); Notice the file extension in the import path. In browsers, extensions…