Frontend Academy · Leçon

Modules ES : import, export et import dynamique

Utilisez les exports nommés, les exports par défaut et les imports d’espace de noms, puis chargez le code à la demande avec import() pour améliorer les performances.

Modules ES : import, export et import dynamique est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Révision : notions fondamentales des modules ES

Les modules ES donnent à chaque fichier sa propre portée. Les exportations nommées partagent des valeurs précises ; les exportations par défaut partagent la valeur principale. Le regroupeur ou le navigateur résout les importations au chargement.

// Named exports
export const API_BASE = '/api/v1';
export function formatDate(d) { return d.toISOString().slice(0, 10); }

// Default export
export default class ApiClient {
  constructor(base = API_BASE) { this.base = base; }
}

Élagage de l’arbre — Pourquoi les exportations nommées sont importantes

Les regroupeurs (Rollup, esbuild, Vite) suppriment les exportations inutilisées. Si vous importez uniquement { formatDate }, le regroupeur supprime tout le reste du paquet. Les exportations nommées permettent l’élagage de l’arbre ; import * as utils peut l’empêcher.

// consumers/report.js — only needs formatDate
import { formatDate } from './utils.js';
// Bundler omits API_BASE and ApiClient from this chunk

import() dynamique — Chargement différé

L’import() dynamique renvoie une Promise. Le module n’est récupéré que lorsque le code s’exécute. Les regroupeurs répartissent automatiquement ces importations dans des blocs séparés.

// Only load the heavy charting library when needed:
const showChart = async () => {
  const { Chart } = await import('./Chart.js');
  new Chart(canvas, config);
};

btn.addEventListener('click', showChart);

import dynamique avec gestion des erreurs

Placez les importations dynamiques dans un bloc try/catch afin de gérer correctement les échecs réseau ou les modules manquants.

try {
  const module = await import('./optional-feature.js');
  module.activate();
} catch (err) {
  console.warn('Optional feature unavailable:', err.message);
}

import.meta

import.meta contient les métadonnées du module actuel. Propriétés principales : import.meta.url (URL absolue), import.meta.env (variables d’environnement de Vite), import.meta.resolve().

// Get the directory of this module:
const dir = new URL('.', import.meta.url).pathname;

// Vite env vars:
const API_URL = import.meta.env.VITE_API_URL;
const isProd = import.meta.env.PROD;

Exécution d’un module — une seule fois

Les modules ES sont évalués une seule fois, quel que soit le nombre de leurs importations. Toutes les importations d’un même module partagent la même instance. Les modules sont donc parfaits pour les instances uniques (magasins d’état, bus d’événements).

// store.js — evaluated once
const state = { count: 0 };
export const increment = () => state.count++;
export const getCount = () => state.count;

// Any file that imports from store.js gets the same state instance

Dépendances circulaires

Deux modules peuvent s’importer mutuellement. JavaScript gère cette situation, mais les valeurs peuvent être undefined lors de leur première utilisation, en raison de l’ordre d’évaluation. Dans la plupart des cas, réorganisez votre code pour éviter ces cycles.

Importations de types uniquement dans TypeScript

Utilisez import type { ... } pour importer uniquement des types. Ces importations sont supprimées lors de la compilation et n’apparaissent jamais dans le paquet de sortie. Utilisez-les pour éviter les dépendances circulaires causées par des références de types uniquement.

import type { User } from './types.js';

function greet(user: User): string {
  return `Hello, ${user.name}`;
}

Réexportations et fichiers d’agrégation

Un fichier d’agrégation réexporte plusieurs modules et crée un point d’importation unique et pratique. Soyez prudent avec ces fichiers dans les grandes applications : ils peuvent gêner l’élagage de l’arbre.

// components/index.ts
export { Button } from './Button';
export { Input } from './Input';
export type { ButtonProps } from './Button';

// Consumer:
import { Button, Input } from '@/components';

Script type=module dans le navigateur

Ajoutez type="module" à une balise script pour activer directement la syntaxe des modules ES dans le navigateur, sans regroupeur. Les modules sont différés par défaut et possèdent leur propre portée.

<script type="module">
  import { greet } from './utils.js';
  greet('World');
</script>

Interopérabilité entre CommonJS et ESM

Node.js prend les deux en charge. Les fichiers ESM utilisent .mjs ou définissent "type": "module" dans package.json. Lorsque vous utilisez des paquets CommonJS depuis ESM, l’exportation par défaut correspond à la valeur de module.exports. Les regroupeurs gèrent cela de manière transparente.

Vérification rapide

Quel est le principal avantage en termes de performances des exportations nommées par rapport à un objet unique exporté par défaut ?

Récapitulatif : approfondissement des modules ES

Les modules s’exécutent une seule fois ; tous leurs importateurs partagent la même instance. L’élagage de l’arbre supprime les exportations nommées inutilisées. L’importation dynamique permet le chargement différé et la division du code. import.meta fournit le contexte du module. Les fichiers d’agrégation sont pratiques, mais peuvent nuire à l’élagage de l’arbre. Les importations de types uniquement dans TypeScript ne produisent aucune sortie.

Questions Fréquemment Posées

La leçon « Modules ES : import, export et import dynamique » est-elle gratuite ?

Oui — le texte complet de « Modules ES : import, export et import dynamique » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Modules ES : import, export et import dynamique » ?

Utilisez les exports nommés, les exports par défaut et les imports d’espace de noms, puis chargez le code à la demande avec import() pour améliorer les performances. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Modules ES : import, export et import dynamique » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Modules ES : import, export et import dynamique
npm et package.json : dépendances et scripts
Vite : serveur de développement et compilation
Concepts de regroupement : tree shaking et division du code

← Retour à Frontend Academy