# Module ES

> Standard officiel de JavaScript permettant de découper du code en fichiers séparés qui s'importent et s'exportent explicitement avec import et export.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/module-es/

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 ».