CommonJS vs. ES Modules: A Comprehensive Guide for JavaScript Developers

CommonJS vs. ES Modules: A Comprehensive Guide for JavaScript Developers

kietHT's photo
kietHT
·

3 min read

FeatureCommonJSES Modules
Syntaxrequire, module.exportsimport, export
File Extension.js (or .cjs for Node.js).js (or .mjs for Node.js)
LoadingSynchronousAsynchronous (in browsers)
UsagePrimarily used in Node.jsSupported in both Node.js and browsers
Default Exportmodule.exports = value;export default value;
Named Exportsexports.name = value;export const name = value;
Circular DependenciesAllowed but may cause issuesHandled more gracefully
Importingconst module = require('module');import module from 'module';
Dynamic ImportNot natively supportedSupported via import() syntax
Tree ShakingNot optimized for tree shakingOptimized for tree shaking
StandardizationNon-standard, Node.js specificECMAScript standard

CommonJS Example

In CommonJS, modules are loaded using require and exported using module.exports or exports.

File: math.js

// Exporting in CommonJS
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;

module.exports = { add, subtract };

// Importing in CommonJS
const math = require('./math');

console.log(math.add(2, 3));       // Output: 5
console.log(math.subtract(5, 2));  // Output: 3

ES Modules Example

In ES Modules, modules are imported using import and exported using export or export default.

File: math.mjs

// Exporting in ES Modules
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// Or using default export
// export default { add, subtract };

// Dynamic Import in ES Modules
import('./math.mjs').then((math) => {
  console.log(math.add(2, 3));       // Output: 5
  console.log(math.subtract(5, 2));  // Output: 3
});

Conclusion: CommonJS vs ES Modules

Both CommonJS and ES Modules serve the purpose of module management in JavaScript, but they have distinct differences that affect their usage.

CommonJS:

  • Synchronous Loading: Suitable for server-side applications, primarily used in Node.js. Modules are loaded synchronously, which can block execution.

  • Syntax: Uses require() for importing and module.exports for exporting.

  • Dynamic Loading: Allows conditional loading of modules using require(), but lacks true asynchronous loading.

  • Non-standard: Although widely adopted in Node.js, CommonJS is not part of the ECMAScript standard.

ES Modules:

  • Asynchronous Loading: Designed for both client-side and server-side applications, supporting asynchronous loading, which improves performance in web browsers.

  • Syntax: Uses import for importing and export for exporting. Supports both named exports and default exports.

  • Dynamic Imports: Provides native support for dynamic imports using import(), enabling loading of modules at runtime.

  • Standardized: Part of the ECMAScript specification, making it more compatible across various environments, including modern browsers and Node.js.

Summary:

  • Use CommonJS when working primarily in Node.js applications that require synchronous module loading.

  • Use ES Modules for new projects, especially those intended to run in both browsers and Node.js, due to their standardization and support for asynchronous loading.

JavaScript