Scripts de modules ES : `type=module`
Chargez JavaScript comme modules ES avec `type=module`.
Scripts de modules ES : `type=module` est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.
Que sont les modules ES ?
Un module ES est un fichier JavaScript qui utilise les déclarations import et export. Les modules ont leur propre portée (sans pollution de l’espace global), le mode strict par défaut et des dépendances explicites — ce qui résout des décennies de problèmes liés à l’ordre des balises de script.
La balise de script de module
<script type="module" src="app.js"> indique au navigateur que le fichier est un module. Le navigateur analyse les importations, récupère les dépendances en parallèle et n’exécute le point d’entrée qu’une fois que tout le graphe de dépendances est téléchargé et compilé.
<script type="module" src="app.js"></script>Les modules sont différés
Les scripts de module se comportent comme s’ils avaient defer : ils sont téléchargés en parallèle de l’analyse du HTML et s’exécutent après l’analyse, dans l’ordre de déclaration. Vous pouvez placer <script type="module"> n’importe où (même dans <head>) sans bloquer la page.
Les importations utilisent des spécificateurs
Une déclaration d’importation utilise un spécificateur — soit une URL relative (./utils.js), une URL absolue (https://cdn.example.com/lib.js) ou un nom nu (lodash). Les noms nus nécessitent une carte d’importation (présentée ensuite), car le navigateur ne sait pas à quel fichier ils correspondent.
// app.js
import { sum } from "./utils.js";
import { render } from "https://esm.sh/preact";
console.log(sum(1, 2));Les extensions de fichier sont obligatoires
Les navigateurs n’ajoutent pas automatiquement .js aux spécificateurs d’importation. import "./utils" échoue ; import "./utils.js" fonctionne. Les outils de regroupement et Node sont parfois plus permissifs ; le navigateur est strict, alors écrivez explicitement l’extension.
CORS est requis
Les modules sont toujours récupérés avec CORS, même lorsqu’ils sont de même origine. Les fichiers de module interorigines doivent envoyer l’en-tête Access-Control-Allow-Origin approprié, sinon l’importation échoue. La plupart des CDN (esm.sh, jsdelivr, unpkg) le configurent correctement dès le départ.
await au niveau supérieur
Les modules prennent en charge await au niveau supérieur — aucun encapsulage dans une fonction asynchrone n’est requis : const data = await fetch("/api").then(r => r.json()). Les consommateurs du module attendent que l’await au niveau supérieur soit résolu avant de s’exécuter.
// data.js
export const config = await fetch("/config.json").then(r => r.json());
// app.js (waits for data.js)
import { config } from "./data.js";
console.log(config);Les modules sont des singletons
Un module est évalué exactement une fois par session, quel que soit le nombre de modules qui l’importent. L’objet des exportations est partagé — chaque consommateur voit la même instance, ce qui fait des modules un moyen clair de partager des singletons comme un objet de configuration ou un magasin d’état.
Modules en ligne
Vous pouvez également écrire des modules en ligne : <script type="module">import x from "./y.js"; ...</script>. C’est utile pour le code d’amorçage ou les expérimentations, même si les fichiers externes sont plus faciles à déboguer et à mettre en cache.
nomodule pour la solution de repli des anciens navigateurs
Associez un <script type="module"> à un <script nomodule src="legacy.js">. Les navigateurs modernes exécutent le module et ignorent le script nomodule ; les anciens navigateurs exécutent le script nomodule et ignorent le module. Cette technique est utilisée lors de la migration vers des applications entièrement en ESM.
Erreurs et échecs d’importation
Une importation qui échoue (404, CORS, erreur de syntaxe) déclenche une exception et empêche l’exécution de l’ensemble du graphe de modules. Utilisez le panneau Réseau pour repérer les requêtes de module échouées et la Console pour lire le véritable message d’erreur d’importation.
Vérification des connaissances
Pourquoi les scripts de module se comportent-ils comme si defer était défini sans que vous l’ayez spécifié ?
Résumé
<script type="module"> charge les modules ES — des fichiers en mode strict contenant des déclarations import/export qui résolvent un graphe de dépendances. Les modules sont différés par défaut, nécessitent des extensions de fichier explicites, sont récupérés via CORS, sont évalués comme des singletons et prennent en charge await au niveau supérieur. Utilisez nomodule pour la solution de repli des anciens navigateurs et surveillez les extensions de fichier manquantes lorsque les importations échouent silencieusement.
Questions Fréquemment Posées
La leçon « Scripts de modules ES : `type=module` » est-elle gratuite ?
Oui — le texte complet de « Scripts de modules ES : `type=module` » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Scripts de modules ES : `type=module` » ?
Chargez JavaScript comme modules ES avec `type=module`. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML Academy ?
Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Scripts de modules ES : `type=module` » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?
Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Scripts de modules ES : `type=module`
- Cartes d’importation : `importmap`
- `import()` dynamique dans les modules
- Notions fondamentales de la fédération de modules