Intro aux modules et import/export (ES6)

Dans ce chapitre, nous allons aborder les modules et les importations/exportations en Javascript. Nous verrons comment utiliser ces outils pour organiser et partager notre code de manière plus efficace, ainsi que comment importer et exporter des données entre différents fichiers de manière sécurisée. Nous verrons également comment utiliser ces fonctionnalités dans notre code grâce à des exemples concrets et pratiques.

Les modules et les importations/exportations font partie de la spécification ECMAScript 6 (ES6), introduite en 2015. Tous les navigateurs actuels les prennent en charge nativement : un transpileur comme Babel ou un bundler comme Webpack ne sert plus qu’à viser des navigateurs très anciens, ou à regrouper les fichiers.

Qu’est-ce qu’un module en javascript (ES6) ?

Les modules sont un moyen de structurer et d’organiser le code en le découpant en différents fichiers indépendants. Cela permet de mieux comprendre et maintenir le code à long terme en offrant une meilleure lisibilité et une meilleure réutilisabilité des différentes parties du code.

Principe des modules et avantages

Le principe des modules repose sur l’utilisation de l’instruction « export » pour rendre certaines parties du code accessibles depuis l’extérieur du module. Cela permet de masquer certaines parties du code qui ne sont pas nécessaires pour l’utilisateur final et de n’exporter que les éléments pertinents.

Les avantages de l’utilisation de modules sont nombreux. Tout d’abord, cela permet d’éviter les conflits de noms en isolant les différentes parties du code. Cela peut être particulièrement utile lorsque l’on travaille en équipe sur un projet de grande envergure. Ensuite, cela permet de mieux organiser et structurer le code en le découpant en différents fichiers plus faciles à maintenir. Enfin, cela permet de réutiliser facilement le code en l’important dans d’autres projets.

Création d’un module avec l’instruction « export »

Pour créer un module en javascript, il suffit d’utiliser l’instruction « export » devant les éléments que l’on souhaite rendre accessibles depuis l’extérieur du module. Par exemple, si l’on souhaite exporter une fonction « saluer » définie dans un fichier module.js, on peut écrire :

export function saluer() {
  console.log("Bonjour !");
}

il est également possible d’exporter plusieurs éléments d’un module en utilisant l’instruction « export » suivie des éléments à exporter. Par exemple :

export const maVariable = 'ma variable';
export function maFonction() {
  console.log('Je suis une fonction');
}
export class MaClasse {
  constructor() {
    console.log('Je suis une classe');
  }
}

Il est également possible d’utiliser l’instruction « export default » pour spécifier un élément par défaut de votre module. Cela signifie que si vous n’importez pas explicitement un élément d’un module, l’élément par défaut sera importé à la place. Par exemple :

export default function maFonctionParDefaut() {
  console.log('Je suis la fonction par défaut');
}

Comment importer un module en javascript (ES6) ?

La gestion des modules en javascript permet de séparer notre code en différents fichiers et d’organiser notre projet de manière plus efficace. Nous avons vu dans le chapitre précédent comment exporter un module en javascript avec l’instruction export. Mais comment faire pour importer un module dans notre code ? C’est ce que nous allons voir dans cette section.

Utilisation de l’instruction « import »

Pour importer un module en javascript, nous utilisons l’instruction import. Voici un exemple d’utilisation :

import * as monModule from '/chemin/vers/mon/module';

Cette syntaxe permet d’importer tous les éléments du module monModule et de les stocker dans un objet du même nom. Nous pouvons également spécifier quels éléments du module nous voulons importer en utilisant l’instruction import suivi de la liste des éléments à importer entre accolades :

import { maFonction, maVariable } from '/chemin/vers/mon/module';

Il est également possible d’importer des éléments nommés d’un module en utilisant l’instruction « import » suivie de la syntaxe « { nom1 as alias1, nom2 as alias2 } » comme ceci :

import { nom1 as alias1, nom2 as alias2 } from 'module';

Pour importer une classe ou une fonction qui est en export default comme ceci :

export default class MonModule {
  constructor() {
    console.log('Je suis une classe');
  }
}

import MonModule from 'module';

Lorsqu’on utilise l’importation par défaut et l’importation nommée dans le même module, il est recommandé d’utiliser l’importation par défaut en premier, comme ceci :

import MonModule, { maFonction } from './monModule';

// utilisation de l'importation par défaut
const monModule = new MonModule();

// utilisation de l'importation nommée
maFonction();

Enfin, il est également possible d’utiliser l’importation dynamique avec la méthode « import()« , qui permet de charger un module de manière asynchrone. Cela peut être utile dans le cas où l’on souhaite charger un module uniquement lorsque cela est nécessaire, pour ne pas surcharger inutilement le navigateur.

import('./monModule').then(monModule => {
  // utilisation des éléments importés
  monModule.maFonction();
  monModule.maVariable;
});

Comment utiliser des modules avec le navigateur ? »

Nous avons vu comment créer et exporter des modules en utilisant l’instruction « export » ainsi que comment importer ces modules en utilisant l’instruction « import« . Cependant, notez que ces instructions ne sont pas encore prises en charge par tous les navigateurs. Pour pouvoir utiliser les modules dans un navigateur, il existe plusieurs solutions qui seront présentées dans cette section.

Utilisation de l’attribut « type=module » dans les balises « script »

Pour utiliser des modules avec le navigateur, il est nécessaire de spécifier l’attribut « type=module » dans la balise « script » de notre fichier JavaScript. Cela indique au navigateur que le fichier est un module et qu’il doit être traité de manière différente des scripts standards. Voici un exemple de code :

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

export const maVariable = 'ma variable';
export function maFonction() {
  console.log('Je suis une fonction');
}
export class MaClasse {
  constructor() {
    console.log('Je suis une classe');
  }
}

import { maVariable, maFonction, MaClasse } from './module.js';

console.log(maVariable); // Affiche 'ma variable'

Utilisation de bundlers tels que Webpack

Un autre moyen de charger des modules avec le navigateur est d’utiliser un bundler. Un bundler est un outil qui permet de regrouper plusieurs modules et fichiers JavaScript en un seul fichier, plus facile à charger par le navigateur. Webpack est un bundler populaire qui offre de nombreuses fonctionnalités avancées pour la gestion des modules. Si vous souhaitez apprendre à utiliser Webpack, j’ai fais un tutoriel à ce sujet.

Conclusion

Nous avons vu comment créer un module en utilisant l’instruction « export » et comment importer un module en utilisant l’instruction « import« . Nous avons également vu comment gérer les chemins et l’environnement lors de l’importation de modules, ainsi que l’utilisation des importations/exportations par défaut et nommées. Enfin, nous avons vu comment utiliser des modules avec le navigateur en utilisant l’attribut « type=module » dans les balises « script ».

Ce tutoriel vous a fourni les bases pour débuter en programmation Javascript et vous a permis de comprendre les concepts clés de cette langue. Il vous sera maintenant possible de poursuivre votre apprentissage et de vous spécialiser dans différents domaines, tels que le développement web. Je vous souhaite de poursuivre votre apprentissage avec motivation et de réussir dans vos projets futurs !