Modules ES : import/export, organisation d'un projet

Structurez vos projets avec les modules ES en tirant parti de leur analyse statique et en évitant barrels toxiques et dépendances circulaires.

8 min · 3 questions

Les modules ES sont statiques : les import et export sont résolus à l'analyse du fichier, avant toute exécution. C'est ce qui permet le tree-shaking (élimination du code non importé) et la détection d'erreurs de nommage au build. Exports nommés ou export par défaut ? Les nommés gagnent sur presque tous les plans : renommage refactorable, autocomplétion fiable, impossibilité d'importer la même chose sous dix noms différents. Réservez le défaut au cas où le module n'exporte qu'une chose évidente.

export const TAX_RATE = 0.2;

export function applyTax(price) {
  return price * (1 + TAX_RATE);
}

export default class Cart {
  items = [];
  add(item) {
    this.items.push(item);
    return this;
  }
}

Côté consommation, quatre formes : import nommé (avec alias possible via as), import du défaut, import d'espace de noms (* as), et import dynamique import(), qui retourne une promesse d'espace de noms. Ce dernier est la brique du code splitting : ne chargez un module lourd (éditeur, graphique, PDF) qu'au moment où l'utilisateur en a besoin.

import Cart, { applyTax, TAX_RATE } from "./cart.js";
import * as cartModule from "./cart.js";

console.log(applyTax(100), TAX_RATE); // 120 0.2
console.log(cartModule.TAX_RATE); // 0.2

const lazy = await import("./cart.js");
const cart = new lazy.default();
console.log(cart instanceof Cart); // true

Pour l'organisation, préférez un découpage par fonctionnalité (features/cart/, features/auth/) plutôt que par type technique (controllers/, helpers/) : le code qui change ensemble vit ensemble, et la suppression d'une fonctionnalité se fait en supprimant un dossier. Exposez chaque fonctionnalité par un point d'entrée restreint et considérez tout import qui contourne ce point d'entrée comme une violation de frontière.

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

1. Qu'est-ce qui rend le tree-shaking possible avec les modules ES ?
   • Les bundlers exécutent le code pour voir ce qui est utilisé
   • Les import/export sont statiques et analysables sans exécuter le code
   • Les modules ES compressent automatiquement le code mort
2. Que retourne l'expression import("./module.js") ?
   • L'espace de noms du module, de façon synchrone
   • Une promesse résolue avec l'espace de noms du module
   • Une fonction qui charge le module à l'appel
   • Le seul export par défaut du module
3. Quel risque principal posent les barrel files (index qui ré-exporte tout un dossier) ?
   • Ils rendent les exports nommés impossibles
   • Ils peuvent charger tout le dossier pour un seul import et gêner le tree-shaking
   • Ils empêchent l'import dynamique du dossier