Avant les modules ES, organiser du JavaScript en plusieurs fichiers reliés entre eux relevait du bricolage : variables globales, ordre de chargement des balises <script> à respecter à la main. Le standard ES modules, stabilisé avec ES6, apporte une syntaxe native pour découper et relier le code.
Utilisation dans l’écosystème WordPress
Les blocs Gutenberg modernes s’écrivent avec des modules ES, compilés ensuite par @wordpress/scripts (basé sur webpack) en un fichier unique compatible avec les navigateurs. Un navigateur peut aussi charger un module directement, sans étape de compilation, via <script type="module" src="...">, ce que wp_enqueue_script permet en précisant l’argument strategy ou en filtrant les attributs de la balise.
Exemple
// utils.js
export function slugifier(texte) {
return texte.toLowerCase().replace(/\s+/g, '-');
}
// script-principal.js
import { slugifier } from './utils.js';
console.log(slugifier('Mon Article'));À ne pas confondre avec CommonJS
- Node.js utilisait historiquement CommonJS (
require/module.exports) ; les modules ES (import/export) sont désormais également pris en charge nativement, mais les deux syntaxes ne se mélangent pas sans précaution. - Un module ES est chargé en mode strict par défaut et exécuté une seule fois même s’il est importé depuis plusieurs fichiers.
- Les imports d’un module ES sont analysés statiquement, ce qui permet à un empaqueteur de modules d’éliminer le code jamais utilisé, une optimisation appelée « tree shaking ».