import

Syntaxe

import exportParDefaut from "nom-module";
import * as nom from "nom-module";
import { export } from "nom-module";
import { export as alias } from "nom-module";
import { export1 , export2 } from "nom-module";
import { export1 , export2 as alias2 , [...] } from "nom-module";
import exportParDefaut, { export [ , [...] ] } from "nom-module";
import exportParDefaut, * as nom from "nom-module";
import "nom-module";
import { toto , truc } from "nom-module/chemin/vers/fichier-non-exporte";
let promesse = import("nom-module");

exportParDefaut

Nom qui fera rfrence l'export par dfaut du module.

nom-module

Le module depuis lequel importer. C'est souvent un chemin absolu ou relatif vers le fichier .js contenant le module. Certains empaqueteurs peuvent permettre ou requrir l'utilisation de l'extension ; vrifier votre environnement. Seules les String apostrophes simples ou doubles sont autorises.

nom

Nom de l'objet module qui sera utilis comme un genre d'espace de noms lors de rfrences aux imports.

export, exportN

Nom des exports importer.

alias, aliasN

Noms qui feront rfrence aux imports nomms.

Description

Le paramtre nom est le nom de l'"objet module" qui sera utilis comme un genre d'espace de noms lors de rfrences aux exports. Les paramtres export indiquent les exports nomms individuellement, tandis que la syntaxe import * as nom les importe tous. Ci-dessous d'autres exemples pour clarifier la syntaxe.

Importer l'intgralit du contenu d'un module

Ce qui suit insre monModule dans la porte courante, contenant tous les exports du module dans le fichier situ dans /modules/mon-module.js.

import * as monModule from "/modules/mon-module.js";

Ici, accder aux exports signifie utiliser le nom du module (ici monModule) comme un espace de noms. Par exemple, si le module import ci-dessus incluait un export faireToutesLesChosesIncroyables(), vous l'cririez comme ceci :

monModule.faireToutesLesChosesIncroyables();

Importer un seul export depuis un module

tant donn un objet ou une valeur nomm(e) monExport qui est export(e) depuis le module mon-module, soit implicitement (parce que l'intgralit du module est exporte), soit explicitement (en utilisant l'instruction export), ce qui suit insre monExport dans la porte courante.

import { monExport } from "/modules/mon-module.js";

Importer plusieurs lments exports depuis un module

Ce qui suit insre la fois machin et truc dans la porte courante.

import { machin, truc } from "/modules/mon-module.js";

Importer un lment export avec un alias

Vous pouvez renommer un export lors de l'importation. Par exemple, ce qui suit insre nomCourt dans la porte courante.

import { nomDExportDeModuleVraimentVraimentLong as nomCourt } from "/modules/mon-module.js";

Renommer plusieurs exports pendant l'import

Importe des exports multiples depuis un module avec des alias commodes :

import {
  nomDExportDeModuleVraimentVraimentLong as nomCourt,
  unAutreNomDeModuleLong as court,
} from "/modules/mon-module.js";

Importer un module uniquement pour ses effets de bord

Importe un module complet pour ses effets de bord seulement, sans importer quoi que ce soit. Ce qui suit excute le code global du module, mais n'importe en fait aucune valeur.

import "/modules/mon-module.js";

Importation des dfauts

Il est possible d'avoir un export par dfaut (que ce soit un objet, une fonction, une classe, etc.). L'instruction import peut alors tre utilise pour importer ces dfauts.

La version la plus simple importe directement le dfaut :

import monDefaut from "/modules/mon-module.js";

Il est galement possible d'utiliser la syntaxe de dfaut avec celles vues ci-dessus (imports d'espaces de noms ou imports nomms). Dans de tels cas, l'import par dfaut devra tre dclar en premier. Par exemple :

import monDefaut, * as monModule from "/modules/mon-module.js";
// monModule utilis comme un espace de noms

ou

import monDefaut, { machin, truc } from "/modules/mon-module.js";
// imports nomms spcifiques

Imports dynamiques

Le mot-cl import peut tre utilis comme une fonction afin d'importer dynamiquement un module (utile lorsqu'on souhaite charger un module selon une condition donne ou faire du chargement la demande). Lorsqu'il est utilis de cette faon, il renvoie une promesse :

import("/modules/mon-module.js").then((module) => {
  // Faire quelque chose avec le module
});

On peut utiliser cette forme avec le mot-cl await :

let module = await import("/modules/mon-module.js");

Exemples

Importation depuis un module secondaire pour aider le traitement d'une requte AJAX JSON.

Le module : fichier.js

function getJSON(url, rappel) {
  let xhr = new XMLHttpRequest();
  xhr.onload = function () {
    rappel(this.responseText);
  };
  xhr.open("GET", url, true);
  xhr.send();
}

export function recupererContenuUtile(url, rappel) {
  getJSON(url, (donnees) => rappel(JSON.parse(donnees)));
}

Le programme principal : principal.js

import { recupererContenuUtile } from "/modules/fichier.js";

recupererContenuUtile("http://www.example.com", (donnees) => {
  faireQuelqueChoseDUtile(donnees);
});

Import dynamique

Dans cet exemple, on voit comment charger une fonctionnalit sur une page lorsqu'un utilisateur effectue une certaine action. Ici, lorsque l'utilisateur clique sur un bouton, cela dclenche l'appel d'une fonction dans le module.

const main = document.querySelector("main");
for (const link of document.querySelectorAll("nav > a")) {
  link.addEventListener("click", (e) => {
    e.preventDefault();

    import("/modules/mon-module.js")
      .then((module) => {
        module.loadPageInto(main);
      })
      .catch((err) => {
        main.textContent = err.message;
      });
  });
}

Spcifications

Compatibilit des navigateurs

Voir aussi

• export
• import.meta
• Limin Zhu, Brian Terlson et l'quipe Microsoft Edge : Previewing ES6 Modules and more from ES2015, ES2016 and beyond
• Jason Orendorff : ES6 en dtails : les modules
• Le livre d'Axel Rauschmayer : Exploring JS: Modules
• Un billet illustr de Lin Clark, traduit en franais, sur les modules
• Tutoriel JavaScript sur export et import