Import et Export

Les mots-clés import et export permettent de partager du code entre plusieurs fichiers.

Ils font partie du système :

ES Modules

Cette approche est utilisée dans le JavaScript moderne.

1. Pourquoi utiliser import/export

Dans un vrai projet, le code est séparé dans plusieurs fichiers.

project/
│
├── math.js
├── user.js
└── main.js

Chaque fichier possède une responsabilité précise.

2. export

Le mot-clé export rend une valeur accessible depuis un autre fichier.

// math.js

export function add(a, b) {

    return a + b;

}

Ici, la fonction add() devient exportée.

3. import

Le mot-clé import permet d’utiliser une valeur exportée.

// main.js

import { add } from "./math.js";

console.log(add(2, 3));

4. Comment lire import

import { add } from "./math.js";

5. Exporter plusieurs fonctions

// math.js

export function add(a, b) {

    return a + b;

}

export function multiply(a, b) {

    return a * b;

}

Puis :

// main.js

import { add, multiply } from "./math.js";

console.log(add(2, 3));

console.log(multiply(2, 3));

6. export default

Un fichier peut posséder un export principal.

// user.js

export default function login() {

    console.log("Connexion");

}

7. Importer un export default

// main.js

import login from "./user.js";

login();

Ici, les accolades ne sont pas nécessaires.

8. Différence importante

9. Renommer un import

Un import peut être renommé avec :

as

import { add as addition } from "./math.js";

console.log(addition(2, 3));

10. Importer tout un module

import * as math from "./math.js";

console.log(math.add(2, 3));

console.log(math.multiply(2, 3));

Tous les exports sont regroupés dans un objet.

11. Les chemins relatifs

Les imports utilisent souvent des chemins relatifs.

./

Signifie :

"dossier actuel"

../

Signifie :

"remonter d’un dossier"

12. Exemple de structure réelle

src/
│
├── math/
│   └── add.js
│
├── user/
│   └── login.js
│
└── main.js

Cette séparation améliore énormément l’organisation du projet.

13. type="module"

Dans le navigateur, les modules nécessitent :

<script type="module" src="main.js"></script>

Sinon, import et export ne fonctionneront pas.

14. Erreur fréquente

Oublier les accolades avec un export classique.

// Mauvais

import add from "./math.js";

// Correct

import { add } from "./math.js";

15. CommonJS vs ES Modules

16. Pourquoi c’est important

import/export est utilisé partout dans les projets modernes :

• React
• Vite
• Node.js
• Vue
• Tests
• Applications web modernes

17. Bonnes pratiques

• Créer un fichier par responsabilité
• Utiliser des noms clairs
• Exporter seulement ce qui est nécessaire
• Éviter les fichiers géants
• Utiliser ES Modules dans les projets modernes

Résumé rapide