CommonJS (CJS) vs modules ECMAScript (ESM) en JavaScript

Les modules JavaScript jouent un rôle crucial dans l'organisation du code, l'amélioration de la réutilisabilité et l'amélioration de la maintenabilité des applications. Les deux principaux systèmes de modules largement utilisés sont CommonJS (CJS) et ECMAScript Modules (ESM). Comprendre leurs différences et leurs capacités est essentiel pour les exploiter efficacement dans vos projets.

CommonJS (CJS)

CommonJS est le système de modules initialement conçu pour les environnements Node.js. Il met l'accent sur la simplicité et le chargement synchrone des modules.

Modules d'exportation/importation CommonJS

Les modules de CommonJS utilisent module.exports pour exporter des valeurs, des objets ou des fonctions.

1. Exportation/Importation par défaut

// 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. Exportations/Importations nommées

// 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

Modules ECMAScript (ESM)

ESM, introduit dans ES6 (ES2015), est le système de modules standardisé pour JavaScript. Il prend en charge le chargement de modules synchrone et asynchrone et est pris en charge nativement dans les navigateurs modernes et dans Node.js avec certaines configurations.

Modules d'exportation ECMAScript

ESM utilise des instructions d'exportation pour exporter des valeurs, des objets ou des fonctions.

1. Exportation/Importation par défaut

// 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. Exportations nommées

// 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. Styles d'exportation mixtes dans les modules ECMAScript

// 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!

Principales différences entre CommonJS et ESM

• Syntaxe : CommonJS utilise require() et module.exports, tandis qu'ESM utilise des instructions d'importation et d'exportation.
• Chargement : les modules CommonJS sont chargés de manière synchrone, tandis qu'ESM prend en charge le chargement synchrone et asynchrone.
• Environnement : CommonJS est principalement utilisé dans Node.js, tandis que ESM est pris en charge nativement dans les navigateurs et peut être utilisé dans Node.js avec des configurations spécifiques (indicateur --experimental-modules ou extension de fichier .mjs).

Compatibilité et utilisation

• Node.js : CommonJS reste répandu en raison de sa prise en charge de longue date et de sa simplicité dans les environnements Node.js.
• Navigateurs : ESM gagne en popularité à mesure que les navigateurs le prennent de plus en plus en charge de manière native, offrant de meilleures performances et un chargement de code modulaire.

Conclusion

Le choix entre les modules CommonJS et ECMAScript dépend de l'environnement et des exigences de votre projet. Bien que CommonJS soit robuste pour le développement backend de Node.js, ESM offre une interopérabilité entre les navigateurs et les applications Node.js modernes. Comprendre ces systèmes de modules permet aux développeurs d'exploiter efficacement les capacités modulaires de JavaScript.

En tirant parti de CommonJS ou d'ESM, les développeurs peuvent améliorer l'organisation du code, améliorer l'évolutivité des projets et faciliter la collaboration dans les projets JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!