Chapitre 19 – Modules JavaScript

Les modules permettent d'organiser le code JavaScript en plusieurs fichiers afin de le rendre plus clair, réutilisable et maintenable. Chaque module peut exporter des variables, fonctions ou classes, et importer ce dont il a besoin d'un autre module.

1. Fichiers modules (import / export)

// fichier utils.js
export const PI = 3.14159;
export function addition(a, b) {
  return a + b;
}
export class Calculatrice {
  // ...
}

// fichier main.js
import { PI, addition, Calculatrice } from './utils.js';

console.log(PI); // 3.14159
console.log(addition(2, 3)); // 5
const calc = new Calculatrice();

// fichier math.js
export default function multiply(a, b) {
  return a * b;
}

// Alternative pour une classe
// export default class Multiplicateur { ... }

// fichier app.js
import multiply from './math.js';
// ou avec un nom différent
import multiplicateur from './math.js';

console.log(multiply(3, 4)); // 12

2. Portée des modules

Les modules JavaScript ont leur propre portée. Les variables définies dans un module ne sont pas visibles globalement, sauf si elles sont explicitement exportées. Cela évite les conflits de noms et rend le code plus sécurisé.

// module.js
const secret = "Je suis privé"; // Non exporté → inaccessible de l'extérieur
export const publicVar = "Je suis public"; // Exporté → accessible

// main.js
import { publicVar } from './module.js';
console.log(publicVar); // OK
console.log(secret); // Erreur: secret n'est pas défini

De plus, le strict mode ("use strict") est automatiquement activé dans les modules, ce qui interdit certaines mauvaises pratiques comme l'utilisation de variables non déclarées.

3. Modules ES6 vs CommonJS

// export
export const x = 42;
export function hello() { return "Bonjour"; }
export default class Person { /* ... */ }

// import
import { x, hello } from './module.js';
import Person from './module.js';

// fichier util.js
module.exports = function(a, b) {
  return a + b;
};

// fichier app.js
const addition = require('./util');
console.log(addition(2, 3));

4. Utilisation dans un navigateur

Pour utiliser des modules ES6 dans un navigateur, ajoutez type="module" à la balise <script> :

<!-- Fichier HTML -->
<script type="module" src="main.js"></script>

Important :

• Les modules sont chargés en mode différé (comme defer)
• Ils sont exécutés en strict mode automatiquement
• Les imports doivent utiliser des URLs absolues ou relatives avec extensions (./module.js et non ./module)
• Pour les anciens navigateurs, utiliser des outils comme Webpack ou Rollup

5. Import dynamique

Les modules peuvent être chargés dynamiquement avec la fonction import() qui retourne une promesse :

// Chargement dynamique d'un module
button.addEventListener('click', async () => {
  const module = await import('./module.js');
  module.doSomething();
});

Utile pour :

• Charger du code seulement quand il est nécessaire (lazy loading)
• Réduire le temps de chargement initial
• Charger des modules conditionnellement