Les modules dans le navigateur et dans Node.js

Chapitre 17 — Les modules et l'organisation du code · 17.3 Les modules dans le navigateur et dans Node.js

Figure 1 — Deux environnements, deux configurations.

1. Dans le navigateur : type="module"

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Mon application</title>
  <!-- Une seule balise : le point d'entrée. Le navigateur charge lui-même les imports. -->
  <script type="module" src="src/main.js"></script>
</head>
<body>
  <h1>Bonjour</h1>
</body>
</html>

2. L'erreur CORS et le serveur local

Si vous ouvrez la page en double-cliquant sur index.html, l'adresse commence par file:/// et la console affiche :

Access to script at 'file:///…/src/main.js' from origin 'null' has been blocked by CORS policy:
Cross origin requests are only supported for protocol schemes: … http, https.

Pour des raisons de sécurité, les navigateurs ne chargent les modules que par HTTP. Il faut donc un serveur local:

• VS Code: extension Live Server, puis clic droit sur index.html › Open with Live Server;
• Node.js: npx serve . dans le dossier du projet ;
• Python: python -m http.server 8000, puis ouvrir http://localhost:8000.

3. Un module n'est exécuté qu'une fois

Même importé par plusieurs fichiers, un module est évalué une seule fois. Tous les importateurs partagent les mêmes objets :

📄 config.js

console.log("→ config.js est évalué");
export const config = { langue: "fr", theme: "clair" };

📄 a.js

import { config } from "./config.js";
export function changerTheme() {
  config.theme = "sombre";
}

📄 main.js

import { config } from "./config.js";
import { changerTheme } from "./a.js"; // a.js importe AUSSI config.js
import { config as encore } from "./config.js";

changerTheme();
console.log("Thème vu par main.js :", config.theme);
console.log("Même objet ?", config === encore);
console.log("this au niveau du module :", this);

Dans le terminal : node main.js

→ config.js est évalué
Thème vu par main.js : sombre
Même objet ? true
this au niveau du module : undefined

C'est pratique pour partager une configuration ou un état. C'est aussi un risque : un module peut modifier un objet utilisé par tous les autres.

4. Dans Node.js : modules ES et CommonJS

Node.js existait avant les modules ES. Il a son propre système, CommonJS (require / module.exports), encore très présent dans les anciens projets et dans les tutoriels. Node.js choisit le système ainsi :

• fichier .mjs → module ES ; fichier .cjs → CommonJS ;
• fichier .js → module ES si le package.json le plus proche contient "type": "module", sinon CommonJS.

📄 package.json

{ "type": "commonjs" }

📄 salutation.js

// Ancien système de Node.js : CommonJS
function saluer(nom) {
  return `Bonjour ${nom}`;
}
module.exports = { saluer };

📄 main.js

const { saluer } = require("./salutation"); // require : synchrone, extension facultative
console.log(saluer("Lina"));

Dans le terminal : node main.js

Bonjour Lina

← 17.2 Export par défaut, exports nommés et import dynamique17.4 Organiser un projet JavaScript en modules →