99. Introduction aux modules (ESM)

À mesure que les applications grandissent, séparer le code en fichiers réutilisables (modules) devient essentiel pour l'organisation, la maintenance et l'évitement des conflits de variables globales. Les modules ES (ESM) sont la solution native moderne.

1. Exporter

Pour rendre une fonction, une variable ou une classe disponible dans un autre fichier, vous devez l'utiliser avec export.

Exports nommés : Exporter plusieurs éléments d'un seul fichier.

javascript // utils.js export const version = '1.0'; export function log(message) { console.log([LOG]: ${message}); }

Export par défaut (Default Export) : Un seul export par défaut par module (souvent utilisé pour les classes ou les composants principaux).

javascript // User.js export default class User { /* ... */ }

2. Importer

Utilisez le mot-clé import pour ramener ces exports dans un fichier différent.

javascript // app.js import { version, log } from './utils.js'; import User from './User.js'; // L'import par défaut n'utilise pas {} et peut être renommé

log('Démarrage de l'application...'); const newUser = new User();

Note : Pour exécuter des modules dans le navigateur, votre balise HTML <script> doit inclure type="module".