Les modules JavaScript sont un moyen d'organiser et de réutiliser le code JavaScript. L'utilisation de modules peut diviser le code en morceaux plus petits et gérables, qui peuvent ensuite être importés et utilisés dans d'autres parties d'une application selon les besoins. Cette approche modulaire aide à maintenir une base de code propre, facilite le débogage et améliore la réutilisabilité du code.

Modules ES contre CommonJS

Il existe différents systèmes de modules dans l'écosystème JavaScript. ES Modules (ESM) est le standard de la spécification ECMAScript, utilisé principalement dans le navigateur et de plus en plus pris en charge dans Node.js. CommonJS est un autre système de modules traditionnellement utilisé dans Node.js.

Modules ES (ESM)

Les modules ES (ESM) sont un système de modules standardisé en JavaScript, introduit dans ECMAScript 2015 (ES6). Ils permettent une meilleure organisation et réutilisation du code en permettant l'importation et l'exportation de fonctions, d'objets et de primitives entre différents fichiers. Ce système de modules est largement pris en charge dans les environnements JavaScript modernes, notamment les navigateurs et Node.js.

Exporter et importer

Le mot-clé export étiquette les variables et les fonctions qui doivent être accessibles depuis l'extérieur du module actuel, leur permettant d'être réutilisées dans d'autres parties de votre application. Le mot-clé import permet l'importation de ces fonctionnalités depuis d'autres modules, permettant une programmation modulaire et la réutilisation du code.

L'exportation nommée permet d'exporter plusieurs éléments à partir d'un module. Chaque élément doit être importé avec le même nom avec lequel il a été exporté.

//modules.js
const greet = () => {
   console.log('Hello World');
};
export { greet};

Lors de l'importation d'exportations nommées, vous devez utiliser les mêmes noms que les exportations.

import { greet } from './module.js';
greet(); // Hello, World!

L'exportation par défaut permet une seule exportation par défaut par module. L'élément peut être importé sous n'importe quel nom.

//modules.js
const greet = () => {
   console.log('Hello World');
};
export default greet;

Lors de l'importation de l'exportation par défaut, vous pouvez utiliser n'importe quel nom.

import message  from './module.js';
message(); // Hello, World!

Utiliser des modules en HTML

Lorsque vous utilisez des modules dans un navigateur, vous devez les inclure dans votre fichier HTML. Vous utilisez l'attribut type="module" dans la balise

Support du navigateur

Les navigateurs modernes prennent en charge les modules JavaScript de manière native. Cela inclut Chrome, Firefox, Safari, Edge et Opera. Cependant, les navigateurs plus anciens comme Internet Explorer ne prennent pas en charge les modules. Pour ceux-là, vous devrez peut-être utiliser un bundler comme Webpack ou un transpilateur comme Babel.

Utilisation de modules dans Node.js
Pour utiliser les modules ES dans Node.js, vous pouvez utiliser l'extension de fichier .mjs ou définir "type": "module" dans le fichier package.json.

// package.json
{
 "type": "module"
}

Importer des alias

Les alias dans les modules JavaScript vous permettent d'importer et d'exporter des fonctionnalités en utilisant différents noms. Cela peut être utile pour éviter les conflits de noms ou pour fournir des noms plus descriptifs dans le contexte du module qui les importe.

// math.js
export function add(a, b) {
   return a   b;
}
 export function subtract(a, b) {
   return a - b;
}

Vous pouvez importer ces fonctions sous des noms différents à l'aide d'alias :

// main.js
import { add as sum, subtract as diff } from './math.js';


console.log(sum(2, 3)); // 5
console.log(diff(5, 3)); // 2

Importation du module entier en tant qu'alias

Vous pouvez importer l'intégralité du module sous un seul alias, ce qui vous permet d'accéder à toutes les exportations sous un espace de noms.

// main.js
import * as math from './math.js';


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

Importation dynamique

Vous pouvez également importer des modules dynamiquement à l'aide de la fonction import(), qui renvoie une promesse. Ceci est utile pour le fractionnement de code et le chargement paresseux.

// main.js
const loadModule = async () => {
   try {
     const module = await import('./math.js');
     console.log(module.add(2, 3));
   } catch (error) {
     console.error('loading error:', error);
   }
 };


 loadModule();

Dans cet exemple, le module math.js est chargé dynamiquement lorsque la fonction loadModule est appelée.

CommonJS (CJS)

CommonJS est un système de modules principalement utilisé dans Node.js. C'était le système de modules par défaut avant la standardisation des modules ES et il est encore largement utilisé dans de nombreux projets Node.js. Il utilise require() pour importer des modules et module.exports ou exports pour exporter des fonctionnalités d'un module.

Dans CommonJS, module.exports et exports sont utilisés pour exporter les valeurs d'un module. exports est essentiellement un raccourci pour module.exports, permettant d'utiliser l'un ou l'autre. Cependant, il est généralement conseillé d'utiliser module.exports de manière cohérente pour éviter toute confusion potentielle ou comportement inattendu.

Dans cet exemple, module.exports se voit attribuer une fonction, donc l'appel require dans app.js renvoie cette fonction.

// greet.js
module.exports = function(name) {
   return `Hello, ${name}!`;
};

// app.js
const greet = require('./greet');
console.log(greet('Alice')); // 'Hello, Alice!'

Dans cet exemple, exports est utilisé pour ajouter des propriétés à module.exports. L'appel require dans app.js renvoie un objet avec des fonctions d'ajout et de soustraction.

// math.js
exports.add = function(a, b) {
   return a   b;
};
exports.subtract = function(a, b) {
   return a - b;
};

// app.js
const math = require('./math');
console.log(math.add(2, 3)); // 5
console.log(math.subtract(5, 2)); // 3

Les modules JavaScript offrent de nombreux avantages qui améliorent l'organisation, la maintenabilité et les performances du code.

• Réutilisabilité
  Les modules vous permettent d'écrire des morceaux de code réutilisables qui peuvent être importés et utilisés dans différentes parties de votre application ou même dans différents projets.

• Maintenabilité
  En divisant le code en modules plus petits et autonomes, vous pouvez gérer et maintenir votre base de code plus efficacement. Cela facilite la mise à jour, la refactorisation et le débogage de modules individuels sans affecter l'ensemble de l'application.

• Partage de code
  Les modules permettent le fractionnement du code, ce qui vous permet de charger uniquement le code nécessaire en cas de besoin, améliorant ainsi les temps de chargement initiaux et les performances globales.

• Tests améliorés
  Le code modulaire est plus facile à tester car vous pouvez tester des modules individuels de manière isolée. Cela conduit à des tests plus fiables et maintenables.

• Secousse des arbres
  Les bundles de modules modernes tels que Webpack et Rollup peuvent effectuer une secousse d'arborescence, une technique qui supprime le code inutilisé du bundle final, ce qui donne un code plus petit et plus efficace.

Conclusion

Dans le développement JavaScript, l'introduction des modules ES a marqué un changement significatif par rapport au système de modules CommonJS traditionnel. Les modules ES offrent un moyen standardisé et efficace de gérer les dépendances et d'améliorer la maintenabilité. La syntaxe d'exportation et d'importation fournit un moyen clair et concis de définir et d'utiliser les modules, favorisant ainsi une meilleure organisation et une meilleure lisibilité dans la base de code.