Comment importer une fonction depuis un autre fichier JS

Pour appeler une fonction définie dans un autre fichier JavaScript, choisissez la méthode adaptée à l’environnement : les balises <script> classiques exposent une fonction dans l’espace global du navigateur, les modules ECMAScript utilisent export et import, et Node.js avec CommonJS utilise module.exports et require. Les exemples ci-dessous montrent comment relier les fichiers et dans quel environnement chaque méthode s’exécute.

Appeler une fonction d’un autre fichier JavaScript dans un navigateur

Avec des scripts classiques, définissez la fonction dans un fichier et chargez celui-ci avant le script qui l’appelle. Les scripts classiques partagent l’espace global de la page : le premier fichier peut donc ajouter une fonction à window :

• Dans greeting.js, écrivez window.showGreeting = function () { document.querySelector("#message").textContent = "Hello from greeting.js"; };. Le message affiché par cet exemple reste en anglais.
• Dans app.js, écrivez document.querySelector("#show").addEventListener("click", window.showGreeting);.

Enregistrez ces fichiers à côté de index.html. Cette page les charge dans l’ordre requis et contient le bouton ainsi que l’élément où le message s’affiche :

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <title>Call a function from another file</title>
  <p id="message">Click the button to show the message.</p>
  <button id="show" type="button">Show greeting</button>
  <script src="greeting.js"></script>
  <script src="app.js"></script>
</html>

Au clic sur le bouton, le gestionnaire d’événement de app.js appelle la fonction chargée depuis greeting.js. Placez le script qui définit la fonction en premier ; sinon, la page risque d’essayer d’ajouter le gestionnaire avant que window.showGreeting existe. Le bloc html montre une page de navigateur, et non une transcription de sortie à l’exécution.

Partager des fonctions avec les modules ECMAScript

Utilisez les modules ECMAScript pour importer explicitement des fonctions au lieu de partager une variable globale. Enregistrez ces trois fichiers complets dans le même répertoire. Le premier exporte une fonction ; le second l’importe et met à jour la page :

• greeting.js : export function makeGreeting(name) { return \Hello, ${name}!`; }`
• app.js : import { makeGreeting } from "./greeting.js"; document.querySelector("#message").textContent = makeGreeting("Ada");

Enregistrez cette page complète sous le nom index.html, à côté des deux fichiers. Son élément de message existe avant l’exécution du module :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Share a function with a module</title>
  </head>
  <body>
    <p id="message">The greeting will appear here.</p>
    <script type="module" src="app.js"></script>
  </body>
</html>

Veillez à ce que le chemin d’importation relatif corresponde à l’emplacement des fichiers. Les navigateurs chargent les modules avec leur propre sémantique et ne placent pas leurs déclarations sur window.

Servez la page en HTTP à l’aide d’un serveur de développement local ; une ouverture directe avec une URL file: empêche souvent le chargement des modules. Il s’agit d’une exigence d’hébergement dans le navigateur, et non d’une obligation d’exécuter Node.js. Node.js prend également en charge les modules ECMAScript, avec ses propres règles de paquet et d’extension de fichier. La syntaxe d’exportation des modules ECMAScript utilise le même mécanisme export pour les fonctions et d’autres valeurs. L’inventaire fourni ne recense pas de cible française pour cette page ; le lien conserve donc sa cible anglaise.

Importer des fonctions avec CommonJS dans Node.js

CommonJS est le système de modules traditionnel de Node.js. Un module peut affecter une fonction à module.exports, puis un autre fichier la récupérer avec require. La comparaison entre import et require en JavaScript explique les différences entre ces systèmes de modules.

Cet exemple autonome pour Node.js crée un fichier utilitaire, importe sa fonction et l’appelle. Enregistrez le code sous main.cjs, puis exécutez node main.cjs dans un terminal où Node.js est installé :

const fs = require("node:fs");
const os = require("node:os");
const path = require("node:path");

const folder = fs.mkdtempSync(path.join(os.tmpdir(), "function-demo-"));
try {
  const helperPath = path.join(folder, "math.cjs");
  fs.writeFileSync(helperPath, "module.exports = (a, b) => a + b;\n");
  const add = require(helperPath);
  console.log(`Result: ${add(5, 3)}`);
} finally {
  fs.rmSync(folder, { recursive: true, force: true });
}

Result: 8

Le fichier utilitaire exporte une fonction, que le fichier appelant reçoit comme valeur de retour de require ; le dernier appel à console.log utilise cette fonction. L’extension .cjs indique explicitement que le fichier utilitaire utilise le format CommonJS, même si le reste du projet utilise des modules ECMAScript. Cet exemple est conçu pour Node.js et ne s’exécute pas dans une page de navigateur.

Charger un fichier JavaScript avec jQuery

$.getScript() de jQuery peut charger un script à la demande. C’est une solution héritée, utile pour les pages qui utilisent déjà jQuery ; dans du nouveau code, les modules de navigateur ou les balises de script classiques sont généralement plus simples. Chargez jQuery avant le code appelant, puis attendez le rappel de chargement avant d’utiliser la fonction du fichier téléchargé.

Par exemple, mathUtils.js peut exposer une variable globale dans le navigateur avec window.mathUtils = { add: (a, b) => a + b };. Dans la page, chargez d’abord jQuery et utilisez le rappel pour appeler la fonction une fois le script chargé :

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
  $.getScript("mathUtils.js")
    .done(function () {
      const result = window.mathUtils.add(5, 3);
      $("body").append(`<p>Result: ${result}</p>`);
    })
    .fail(function () {
      $("body").append("<p>The script could not be loaded.</p>");
    });
</script>

La requête est asynchrone : le code qui dépend de mathUtils doit donc se trouver dans .done() (ou dans un autre gestionnaire de fin), et non juste après $.getScript(). Pour une URL d’une autre origine, jQuery peut charger le script au moyen d’un élément script ; en général, les navigateurs n’exigent pas CORS pour ce type de chargement. En revanche, une requête fetch() ou XHR vers une autre origine exige que le serveur l’autorise avec CORS. Des politiques du navigateur, comme Content Security Policy, peuvent tout de même bloquer le chargement ; celui-ci peut aussi échouer si l’URL est inaccessible. Consultez la documentation de $.getScript() de jQuery pour en savoir plus sur son comportement de chargement.