L'utilisation du mot-clé import pour les modules en ES6

En JavaScript, ES6 (ECMAScript 2015) a introduit une approche standardisée pour importer et exporter des modules avec l'aide du mot-clé import. Avant ES6, les développeurs devaient s'appuyer sur des solutions de contournement non standardisées pour implémenter les modules, tels que CommonJS (qui utilise require) et AMD.

Le mot-clé import nous permet d'inclure les fonctionnalités de différents modules dans notre code. En termes simples, un module est un fichier contenant du code JavaScript, qui est isolé du reste du code dans un propre scope, ce qui aide à éviter les collisions de variables, et rend notre code plus lisible et gérable.

Voici un exemple simple d'utilisation du mot-clé import :

// monModule.js
let maVariable = 'Bonjour le monde !';
export default maVariable;

// app.js
import maVariable from './monModule.js';
console.log(maVariable); // Bonjour le monde !

Dans cet exemple, nous avons un fichier monModule.js avec une variable appelée maVariable. En utilisant export nous permet de le rendre accessible à d'autres fichiers. Ensuite, dans le fichier app.js, nous utilisons le mot-clé import pour importer maVariable du module précédent.

Il est également possible d'importer plusieurs éléments depuis un module en les plaçant entre des accolades {}:

// utils.js
export function fonctionA() {...}
export function fonctionB() {...}

// app.js
import { fonctionA, fonctionB } from './utils.js';

Il est important de noter que les modules JavaScript sont importés de façon statique, c'est-à-dire qu'ils sont résolus pendant la phase de compilation et non à l'exécution. Cela diffère d'autres systèmes de modules, tels que CommonJS, permettant des importations plus dynamiques mais moins optimisables.

Le système de modules ES6, avec le mot-clé import, offre une manière robuste et flexible de structurer vos projets JavaScript, facilitant la gestion des dépendances et l'organisation du code.