Modules JavaScript
Les modules divisent le code JavaScript entre fichiers. export expose une valeur et import l'utilise. La ligne visible est lida / tea / mint.
Exports nommés
Un export nommé garde un nom précis et un module peut en proposer plusieurs.
export const drink = "tea";
export function label(name) {
return `${name} / ${drink} / mint`;
}
drink et label traversent la frontière puisqu'ils sont exportés; le reste demeure privé au fichier.
Importer des noms
Un import nommé utilise des accolades et les mêmes noms que les exports.
import { drink, label } from "./math.js";
console.log(drink);
console.log(label("lida"));
L'import relie les valeurs exportées sans créer une copie indépendante. Dans un navigateur, utilisez HTTP ou HTTPS.
Export par défaut
L'export par défaut représente souvent la valeur principale. L'import choisit son nom local sans accolades.
export default function greet(name) {
return `Hello, ${name}!`;
}
import greet from "./greeting.js";
console.log(greet("lida"));
Les noms utilisent { drink, label }; l'import par défaut utilise greet. Un fichier ne peut avoir qu'un seul export par défaut.
Portée et import dynamique
Une déclaration au niveau supérieur ne devient pas une propriété de window. import() charge plus tard et renvoie une Promise.
const secret = "not global";
export const items = ["tea", "mint"];
import("./menu.js").then((menu) => console.log(menu.items.join(" / ")));
console.log(window.secret); // undefined
Seul items franchit la frontière. Le résultat est un objet namespace dont les exports sont des propriétés.
Démo autonome
La page crée le code en mémoire, génère une Blob URL et l'importe; aucun fichier de projet n'est nécessaire.
<p id="result"></p>
<script type="module">
const source = `export const drink = "tea"; export function label(name) { return name + " / " + drink + " / mint"; }`;
const url = URL.createObjectURL(new Blob([source], { type: "text/javascript" }));
const module = await import(url);
document.querySelector("#result").textContent = module.label("lida");
URL.revokeObjectURL(url);
</script>
La page affiche exactement lida / tea / mint. type="module" active la syntaxe et la Blob URL évite une requête réseau.
Dans un projet réel, utilisez math.js, app.js et <script type="module" src="./app.js"></script>. file:// n'est pas fiable; utilisez un serveur HTTP.
📊 Choix de module
| Syntaxe | Rôle | Exemple |
|---|---|---|
| Export/import nommé | Partager des noms précis | export const drink = "tea" / import { drink } ... |
| Export/import par défaut | Partager la valeur principale | export default function greet() / import greet ... |
| Import dynamique | Charger plus tard et recevoir une Promise | import("./menu.js").then(...) |
| Portée de module | Garder les déclarations privées | const secret = "not global" |
Exercice pratique
Créez math.js, importez drink et label dans app.js, ajoutez greet par défaut et affichez lida / tea / mint.
Erreurs fréquentes
Ne supprimez pas les accolades des imports nommés, ne créez pas deux exports par défaut et ne rendez pas global un nom non exporté.
À retenir
export choisit ce qui sort, import l'utilise, l'import par défaut choisit son nom et la portée protège le privé.
Gardez les modules ciblés et libérez les Blob URL temporaires après la démo.
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut