Les modules JavaScript peuvent sembler complexes au début. Beaucoup de développeurs, comme je l'ai été, tentent diverses méthodes sans vraiment comprendre les mécanismes sous-jacents. Par exemple, on essaie import variable from 'fichier.js' sans succès, puis on tente import {variable} from 'fichier.js'. Cette approche par essai-erreur est inefficace et mène souvent à des confusions, notamment lors de l'intégration de bibliothèques tierces.

Cet article a pour but de clarifier ces concepts afin de servir de référence future et d'aider d'autres développeurs. Nous nous concentrerons ici sur le système de modules ES6.

Les bases : export et import

En JavaScript, la gestion des modules repose sur deux mots-clés fondamentaux :

• export : permet de rendre des éléments disponibles en dehors d'un module
• import : permet d'utiliser des éléments provenant d'autres modules

En résumé, un module exporté via export peut être importé dans d'autres fichiers grâce à import.

1. Exportation d'une seule variable

// fichier.js : Exportation d'une variable
export const domaine = "www.example.fr"

// main.js : Importation de la variable
import { domaine } from "./fichier.js" // Adaptez le chemin selon votre structure
console.log(domaine) // Affiche : www.example.fr

2. Exportation de plusieurs variables

Pour exporter plusieurs variables depuis un même module :

// fichier.js : Définition et exportation de plusieurs variables
const siteUrl = "www.example.fr"
const siteNom = "Communauté de développeurs"

// Exportation des variables
export { siteUrl, siteNom }

// main.js : Importation des variables
import { siteUrl, siteNom } from "./fichier.js"

console.log(siteUrl) // Affiche : www.example.fr
console.log(siteNom) // Affiche : Communauté de développeurs

3. Exportation de fonctions

L'exportation de fonctions suit un principe similaire :

// fichier.js : Définition et exportation d'une fonction
function additionner(a, b) {
    return a + b
}

export { additionner }

// main.js : Importation et utilisation de la fonction
import { additionner } from "./fichier.js"
console.log(additionner(5, 7)) // Affiche : 12

4. Exportation d'objets

JavaScript étant orienté objet, il est possible d'exporter des objets de deux manières différentes.

4.1 Première approche

Utilisation de export default :

// fichier.js : Définition et exportation directe d'un objet
export default {
    siteUrl: 'www.example.fr',
    siteNom: 'Communauté de développeurs'
}

// main.js : Importation et utilisation
const objetSite = './fichier.js'
console.log(objetSite.siteUrl) // Affiche : www.example.fr
console.log(objetSite.siteNom) // Affiche : Communauté de développeurs

4.2 Deuxième approche

Définition préalable de l'objet puis exportation :

// fichier.js : Définition de l'objet
const configSite = {
    siteUrl: 'www.example.fr',
    siteNom: 'Communauté de développeurs'
}

export default configSite // Exportation de l'objet

// main.js : Importation et utilisation
const config = './fichier.js'
console.log(config.siteUrl) // Affiche : www.example.fr
console.log(config.siteNom) // Affiche : Communauté de développeurs

5. Exportation de classes

L'exportation de classes suit des princieps similaires à ceux des objets.

5.1 Première approche

Définition et exportation directes :

// fichier.js : Définition et exportation directes d'une classe
export default class Utilisateur {
    nom = "John Doe"
    
    afficherNom() {
        console.log(this.nom)
    }
}

// main.js : Importation et utilisation
import Utilisateur from './fichier.js'
const utilisateur = new Utilisateur()
utilisateur.afficherNom() // Affiche : John Doe

5.2 Deuxième approche

Définition préalable de la classe puis exportation :

// fichier.js : Définition de la classe
class Client {
    email = "contact@example.fr"
    
    contacter() {
        console.log("Email envoyé à : " + this.email)
    }
}

export default Client

// main.js : Importation et utilisation
import Client from './fichier.js'
const client = new Client()
client.contacter() // Affiche : Email envoyé à : contact@example.fr

Résumé : différences entre export et export default

• Les deux export et export default permettent d'exporter des constantes, fonctions, fichiers ou modules
• Dans d'autres fichiers, on peut utiliser import pour accéder à ces éléments
• export default ne peut pas être suivi des mots-clés const ou let
• Un module peut contenir plusieurs export mais un seul export default
• Avec export, l'importation nécessite des accolades {}, tandis que export default n'en nécessite pas
• export est une exportation nommée, tandis que export default est anonyme
• Un fichier JavaScript correspond à un module, export peut exporter plusieurs éléments, tandis que export default ne peut exporter qu'un seul élément prinicpal

Les exemples ci-desus devraient vous aider à maîtriser les mécanismes d'importation et d'exportation en JavaScript. La compréhension profonde de ces concepts est essentielle pour une structuration efficace de vos applications.