Comment inclure un fichier JS dans un autre : 5 méthodes fonctionnelles

« Assemblez votre code par morceaux » : pourquoi ne peut-on pas simplement insérer un fichier JS dans un autre

Quiconque a écrit en JavaScript pendant plus de deux semaines finit tôt ou tard par se heurter à un mur : « Comment puis-je utiliser les fonctions d'un autre fichier ? Je ne vais pas les copier d'un endroit à l'autre ?! » Le bon vieux Stack Overflow le sait bien — la question "How do I include a JavaScript file in another JavaScript file?" recueille des milliers de vues chaque mois. Et c'est logique : dans les projets réels, le code se développe rapidement, et tout garder dans un seul fichier mène au chaos.

Dans cet article, nous allons examiner 5 méthodes éprouvées pour inclure un fichier JS dans un autre. Des méthodes anciennes aux normes modernes. C'est parti !

Méthode 1 : La balise <script> classique dans le HTML

La méthode la plus simple et la plus ancienne consiste simplement à ajouter plusieurs balises <script> dans votre fichier HTML. Mais il y a un détail : les fichiers sont chargés séquentiellement. Si votre main.js dépend de utils.js, alors utils.js doit être placé avant.

<!DOCTYPE html>\n<html>\n<head>\n    <script src="utils.js"></script>\n    <script src="main.js"></script>\n</head>\n<body>\n    ...\n</body>\n</html>

Problème : Ce n'est pas une inclusion d'un fichier JS dans un autre fichier JS, mais simplement un ordre de chargement. Si vous avez 20 scripts, vous risquez de vous perdre dans les dépendances. De plus, toutes les variables et fonctions deviennent globales — bonjour les conflits de noms !

Méthode 2 : Modules ES6 (norme moderne)

Depuis ES6 (ECMAScript 2015), JavaScript dispose d'un système de modules intégré. C'est la meilleure façon d'inclure un fichier JS dans un autre dans les projets modernes.

Exportation depuis un fichier (math.js)

// math.js\nexport function add(a, b) {\n    return a + b;\n}\n\nexport const PI = 3.14159;\n\nexport default function multiply(a, b) {\n    return a * b;\n}

Importation dans un autre fichier (app.js)

// app.js\nimport multiply, { add, PI } from './math.js';\n\nconsole.log(add(2, 3));      // 5\nconsole.log(PI);             // 3.14159\nconsole.log(multiply(4, 5)); // 20

Important : Pour que cela fonctionne dans le navigateur, vous devez ajouter l'attribut type="module" dans le HTML :

<script type="module" src="app.js"></script>

Cette méthode résout tous les problèmes : isolation du code, dépendances claires, absence de variables globales. Idéal pour les applications web modernes.

Méthode 3 : Node.js require (CommonJS)

Si vous écrivez pour Node.js, la norme est CommonJS avec la fonction require(). Cette méthode pour inclure un fichier JS dans un autre fichier JS est encore utilisée dans le développement côté serveur (bien que les modules ES6 y soient déjà arrivés).

Exportation (utils.js)

// utils.js\nfunction greet(name) {\n    return `Bonjour, ${name}!`;\n}\n\nconst secret = 'myPassword123';\n\nmodule.exports = {\n    greet,\n    secret\n};

Importation (server.js)

// server.js\nconst utils = require('./utils.js');\n\nconsole.log(utils.greet('Alexis')); // Bonjour, Alexis !\nconsole.log(utils.secret);          // myPassword123

Simple, fiable, fonctionne partout où Node.js est présent. Pour les navigateurs — non, uniquement via des bundlers (Webpack, Vite).

Méthode 4 : Chargement dynamique de scripts (création d'une balise script)

Parfois, vous devez inclure un fichier JS à partir d'un autre fichier JS directement pendant l'exécution. Par exemple, lorsque vous chargez des analytics ou un plugin uniquement en cas de besoin. Pour cela, vous pouvez créer dynamiquement une balise <script>.

// loadScript.js\nfunction loadScript(src, callback) {\n    const script = document.createElement('script');\n    script.src = src;\n    script.onload =