Intro aux modules et import/export (ES6)

9 janvier, 2023

Développement Javascript Tutoriels

Table des matières Masquer

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

1.1 Principe des modules et avantages

1.2 Création d'un module avec l'instruction "export"

2 Comment importer un module en javascript (ES6) ?

2.1 Utilisation de l'instruction "import"

3 Comment utiliser des modules avec le navigateur ?"

3.1 Utilisation de l'attribut "type=module" dans les balises "script"

3.2 Utilisation de bundlers tels que Webpack

4 Conclusion

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.

Il est important de noter que les modules et les importations/exportations font partie de la spécification ECMAScript 6 (ES6) qui a été introduite en 2015. Bien que cette spécification ne soit pas encore prise en charge par tous les navigateurs, il est possible de l’utiliser aujourd’hui grâce à des transpileurs tels que Babel. Nous verrons comment utiliser ces outils au cours de ce chapitre.

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');
}

À savoir Notez que vous ne pouvez avoir qu'un seul élément par défaut dans un module, mais vous pouvez exporter autant d'éléments que vous le souhaitez avec l'instruction "export".

Attention Il est impossible d'utiliser des méthodes statiques avec l'instruction export default, car celles-ci ne sont pas associées à une instance de la classe, mais directement à la classe elle-même. Si vous souhaitez utiliser des méthodes statiques, vous devez donc utiliser l'instruction export seul.

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';

À savoir Il est recommandé d'utiliser des alias lorsque les noms des éléments importés sont trop longs ou lorsqu'il y a risque de conflits avec d'autres éléments du projet. Les alias permettent de renommer les éléments importés de manière à ce qu'ils soient plus lisibles et à éviter les conflits de noms.

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

export

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

import

import MonnModule 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 = 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, afin de 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, il est important de noter 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>

module.js

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

script.js

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

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

Attention Il est important de noter que les modules ne peuvent être chargés que de manière asynchrone. Cela signifie que le code qui suit la balise "script" ne sera pas exécuté avant que le module ne soit complètement chargé.

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 !