Qu'est-ce que les modules ES?

Les modules ES sont la méthode standard d'organisation du code en JavaScript, basée sur la syntaxe import et export.

Principales caractéristiques :

• Standard : Partie de la spécification ECMAScript, supportée par la majorité des navigateurs modernes et des environnements d'exécution comme Node.js.
• Gestion explicite des dépendances : Les modules indiquent clairement quelles valeurs ils exportent et quelles valeurs ils importent d'autres modules.
• Structure statique : Les dépendances des modules sont déterminées lors de la compilation (ou de l'analyse), pas à l'exécution. Cela permet aux outils d'analyse statique, comme les bundlers (Webpack, Rollup), d'optimiser le code.
• Isolation : Chaque variable, fonction ou classe déclarée à l'intérieur d'un module est, par défaut, locale à ce module. Pour qu'elles soient accessibles de l'extérieur, elles doivent être exportées explicitement.
• Support de l'asynchronie : Les modules peuvent être chargés de manière asynchrone dans les navigateurs, sans bloquer le chargement de la page.

Syntaxe :

• Exportation :

  // app.js
  export const myVariable = 123; // Export nommé
  export function myFunction() { // Export nommé
    console.log('Bonjour depuis le module !');
  }
  export default class MyClass { // Export par défaut
    constructor() {
      console.log('Instance de MyClass créée');
    }
  }
  

• Importation :

  // main.js
  import { myVariable, myFunction } from './app.js'; // Import nommé
  import MyDefaultClass from './app.js'; // Import par défaut
  
  console.log(myVariable); // 123
  myFunction(); // Bonjour depuis le module !
  const instance = new MyDefaultClass(); // Instance de MyClass créée
  

Comparaison avec CommonJS (Node.js) :

Caractéristique	Modules ES	CommonJS
Syntaxe	import, export	require, module.exports, exports
Dépendances	Statiques (définies avant l'exécution)	Dynamiques (définies lors de l'exécution)
Chargement	Asynchrone (dans le navigateur)	Synchrone
this dans la racine	undefined	module.exports
Support	Navigateurs, Node.js (par défaut depuis la version 13.2, via le drapeau --experimental-modules auparavant)	Principalement Node.js

L'utilisation des modules ES est la démarche recommandée pour le développement frontend moderne grâce à leur standardisation, leur meilleur support par les outils et leur capacité d'analyse statique.