0Pricing
Frontend Academy · Leçon

Modules : import et export

分isez le code en modules ES avec des exports nommés et par défaut, importez uniquement ce dont vous avez besoin et comprenez comment les regroupeurs de modules résolvent le graphe des dépendances.

Modules : import et export est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 4 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.

Pourquoi utiliser des modules ?

Avant les modules, tout le code JavaScript s'exécutait dans la portée globale. Les variables entraient en conflit. L'ordre du code était important. Les fichiers devaient être chargés dans un ordre précis. Les modules ES donnent à chaque fichier sa propre portée, des imports explicites et des exports compatibles avec l'élimination du code inutilisé.

Exports nommés

Exportez des valeurs précises avec le mot-clé export. Un fichier peut contenir plusieurs exports nommés. Les utilisateurs importent exactement ce dont ils ont besoin.

// utils.js
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export class Vector {
  constructor(x, y) { this.x = x; this.y = y; }
}

Imports nommés

Importez des exports nommés avec des accolades. Vous pouvez importer plusieurs exports d'un même module dans une seule instruction.

import { PI, add, Vector } from './utils.js';

console.log(PI);        // 3.14159
console.log(add(2, 3)); // 5

Exports par défaut

Chaque module peut avoir un export par défaut — généralement l'élément principal qu'il fournit. Importez-le sans accolades et donnez-lui le nom de votre choix.

// Button.js
export default function Button({ label }) {
  return `<button>${label}</button>`;
}

// Importing:
import Button from './Button.js';
import MyButton from './Button.js'; // any name works

Réexportation

Un module peut réexporter des éléments provenant d'autres modules pour créer un fichier agrégateur — un point d'entrée unique qui réexporte plusieurs éléments.

// components/index.js
export { default as Button } from './Button.js';
export { default as Input } from './Input.js';
export { default as Modal } from './Modal.js';

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

Imports d'espace de noms

Importez tout le contenu d'un module dans un objet espace de noms avec import * as name. Cette méthode est utile lorsque vous avez besoin de nombreux exports ou que vous souhaitez rendre leur origine explicite.

import * as utils from './utils.js';

console.log(utils.PI);        // 3.14159
console.log(utils.add(1, 2)); // 3

Imports réservés aux effets secondaires

Certains modules sont importés uniquement pour leurs effets secondaires (polyfills, enregistrement de gestionnaires d'événements). Importez-les sans créer de liaison.

import './polyfills.js'; // runs the code, imports nothing

import() dynamique — Découpage du code

La fonction import() dynamique renvoie une Promise. Utilisez-la pour charger un module de manière différée, uniquement lorsque cela est nécessaire. Les outils de regroupement créent automatiquement un bloc séparé pour les modules importés dynamiquement.

// Load a heavy module only when the button is clicked:
button.addEventListener('click', async () => {
  const { processFile } = await import('./fileProcessor.js');
  processFile(data);
});

import.meta

import.meta est un objet spécial disponible dans les modules. import.meta.url est l'URL du module. Vite utilise import.meta.env pour les variables d'environnement.

// Vite environment variables:
console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.MODE); // 'development' or 'production'

Résolution des modules

Les outils de regroupement comme Vite résolvent les modules à partir du système de fichiers (chemins relatifs comme './utils'), de node_modules ('lodash') ou d'alias de chemins ('@/components' configurés dans vite.config.js).

CommonJS et modules ES

Node.js utilisait à l'origine CommonJS (require / module.exports). Le navigateur utilise les modules ES (import / export). Les versions modernes de Node.js prennent également en charge les modules ES avec type: "module" dans package.json.

// CommonJS (Node.js, older tooling):
const fs = require('fs');
module.exports = { myFunc };

// ES Modules (modern):
import fs from 'fs';
export { myFunc };

Vérification rapide

Quel est le principal avantage d'utiliser dynamic import() plutôt qu'un import statique ?

Récapitulatif : modules ES

Les exports et imports nommés servent à gérer plusieurs valeurs. L'export et l'import par défaut servent à gérer l'élément principal. Les réexports créent des fichiers agrégateurs. import() dynamique permet le chargement différé et le découpage du code. import.meta fournit les métadonnées du module. Les outils de regroupement résolvent les alias, node_modules et les chemins relatifs.

Questions Fréquemment Posées

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

Oui — le texte complet de « Modules : import et export » 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 : import et export » ?

分isez le code en modules ES avec des exports nommés et par défaut, importez uniquement ce dont vous avez besoin et comprenez comment les regroupeurs de modules résolvent le graphe des dépendances. 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 4 sur 4.

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

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

  1. Méthodes de tableau : map, filter, reduce et find
  2. Déstructuration et opérateur spread des objets
  3. Littéraux de modèle et chaînage optionnel
  4. Modules : import et export
← Retour à Frontend Academy