JavaScript modules play a crucial role in organising code, enhancing reusability, and improving maintainability of applications. Two primary module systems widely used are CommonJS (CJS) and ECMAScript Modules (ESM). Understanding their differences and capabilities is key to effectively leveraging them in your projects.
CommonJS is the module system originally designed for Node.js environments. It emphasises simplicity and synchronous loading of modules.
Modules in CommonJS use module.exports to export values, objects, or functions.
1. Default Export/Imports
// logger.js function log(message) { console.log(message); } module.exports = log; // Default export // index.js const log = require('./logger'); log('This is a log message.'); // Output: This is a log message.
2. Named Exports/Imports
// math.js function add(a, b) { return a + b; } function subtract(a, b) { return a - b; } module.exports = { add, subtract }; // Named exports // index.js const { add, subtract } = require('./math'); console.log(add(5, 3)); // Output: 8 console.log(subtract(5, 3)); // Output: 2
ESM, introduced in ES6 (ES2015), is the standardised module system for JavaScript. It supports both synchronous and asynchronous module loading and is natively supported in modern browsers and in Node.js with certain configurations.
ESM uses export statements to export values, objects, or functions.
1. Default Export/Import
// utils.mjs (Note the .mjs extension for ESM) function formatName(name) { return `Mr./Ms. ${name}`; } export default formatName; // index.mjs import formatName from './utils.mjs'; console.log(formatName('John')); // Output: Mr./Ms. John
2. Named Exports
// operations.mjs export function multiply(a, b) { return a * b; } export function divide(a, b) { return a / b; } // index.mjs import { multiply, divide } from './operations.mjs'; console.log(multiply(4, 2)); // Output: 8 console.log(divide(10, 2)); // Output: 5
3. Mixed Export Styles in ECMAScript Modules
// mixedExports.mjs function greet(name) { return `Hello, ${name}!`; } export default greet; export function goodbye(name) { return `Goodbye, ${name}!`; } // index.mjs import sayHello, { goodbye } from './mixedExports.mjs'; console.log(sayHello('Alice')); // Output: Hello, Alice! console.log(goodbye('Bob')); // Output: Goodbye, Bob!
Choosing between CommonJS and ECMAScript Modules depends on your project's environment and requirements. While CommonJS is robust for Node.js backend development, ESM offers interoperability across browsers and modern Node.js applications. Understanding these module systems equips developers to harness JavaScript's modular capabilities effectively.
By leveraging CommonJS or ESM, developers can enhance code organisation, improve project scalability, and facilitate collaboration in JavaScript projects.
The above is the detailed content of CommonJS (CJS) vs ECMAScript Modules (ESM) in JavaScript. For more information, please follow other related articles on the PHP Chinese website!