import

L'instruction import est utilisée pour importer des liens qui sont exportés par un autre module. Les modules importés sont interprétés en mode strict dans tous les cas. L'instruction import ne peut pas être utilisée dans les scripts embarqués sauf si ceux-ci proviennent de ressources avec type="module".

Note : Il existe également une forme fonctionnelle, import() (cf. ci-après) qui permet d'avoir des chargements dynamiques. La compatibilité ascendante peut être atteinte en utilisant l'attribut nomodule sur la balise <script>.

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 référence à l'export par défaut 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 requérir l'utilisation de l'extension ; vérifier votre environnement. Seules les String à apostrophes simples ou doubles sont autorisées.
nom
Nom de l'objet module qui sera utilisé comme un genre d'espace de noms lors de références aux imports.
export, exportN
Nom des exports à importer.
alias, aliasN
Noms qui feront référence aux imports nommés.

Description

Le paramètre nom est le nom de l'"objet module" qui sera utilisé comme un genre d'espace de noms lors de références aux exports. Les paramètres export indiquent les exports nommés individuellement, tandis que la syntaxe import * as nom les importe tous. Ci-dessous d'autres exemples pour clarifier la syntaxe.

Importer l'intégralité du contenu d'un module

Ce qui suit insère monModule dans la portée 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, accéder 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'intégralité du module est exportée), soit explicitement (en utilisant l'instruction export), ce qui suit insére monExport dans la portée courante.

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

Importer plusieurs éléments exportés depuis un module

Ce qui suit insère à la fois machin et truc dans la portée courante.

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

Importer un élément exporté avec un alias

Vous pouvez renommer un export lors de l'importation. Par exemple, ce qui suit insére nomCourt dans la portée 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 exécute le code global du module, mais n'importe en fait aucune valeur.

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

Importation des défauts

Il est possible d'avoir un export par défaut (que ce soit un objet, une fonction, une classe, etc.). L'instruction import peut alors être utilisée pour importer ces défauts.

La version la plus simple importe directement le défaut :

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

Il est également possible d'utiliser la syntaxe de défaut avec celles vues ci-dessus (imports d'espaces de noms ou imports nommés). Dans de tels cas, l'import par défaut devra être déclaré 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 nommés spécifiques

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 donnée ou faire du chargement à la demande). Lorsqu'il est utilisé de cette façon, 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 requête 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 déclenche 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;
      });
  });
}

;

Spécifications

Spécification État Commentaires
Proposition pour les imports dynamiques « fonctionnels » Proposition de niveau 4 Fera partie de ECMAScript 2020
ECMAScript (ECMA-262)
La définition de 'Imports' dans cette spécification.
Standard évolutif
ECMAScript 2018 (ECMA-262)
La définition de 'Imports' dans cette spécification.
Standard
ECMAScript 2017 (ECMA-262)
La définition de 'Imports' dans cette spécification.
Standard
ECMAScript 2016 (ECMA-262)
La définition de 'Imports' dans cette spécification.
Standard
ECMAScript 2015 (6th Edition, ECMA-262)
La définition de 'Imports' dans cette spécification.
Standard Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobileServeur
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung InternetNode.js
importChrome Support complet 61Edge Support complet 16
Support complet 16
Support complet 15
Désactivée
Désactivée From version 15: this feature is behind the Experimental JavaScript Features preference.
Firefox Support complet 60
Support complet 60
Aucun support 54 — 60
Désactivée
Désactivée From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 47Safari Support complet 10.1WebView Android Support complet 61Chrome Android Support complet 61Firefox Android Support complet 60
Support complet 60
Aucun support 54 — 60
Désactivée
Désactivée From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android Support complet 44Safari iOS Support complet 10.3Samsung Internet Android Support complet 8.0nodejs Support complet 13.2.0
Notes
Support complet 13.2.0
Notes
Notes Modules must either have a filename ending in .mjs, or the nearest parent package.json file must contain "type": "module". See Node's ECMAScript Modules documentation for more details.
Support complet 12.0.0
Notes Désactivée
Notes Modules must either have a filename ending in .mjs, or the nearest parent package.json file must contain "type": "module". See Node's ECMAScript Modules documentation for more details.
Désactivée From version 12.0.0: this feature is behind the --experimental-modules runtime flag.
Support complet 8.5.0
Notes Désactivée
Notes Module filenames must end with .mjs, not .js. See Node's ECMAScript Modules documentation for more details.
Désactivée From version 8.5.0: this feature is behind the --experimental-modules runtime flag.
Dynamic importChrome Support complet 63Edge Support complet 79Firefox Support complet 67
Support complet 67
Aucun support 66 — 67
Désactivée
Désactivée From version 66 until version 67 (exclusive): this feature is behind the javascript.options.dynamicImport preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 50Safari Support complet 11.1WebView Android Support complet 63Chrome Android Support complet 63Firefox Android Support complet 67
Support complet 67
Aucun support 66 — 67
Désactivée
Désactivée From version 66 until version 67 (exclusive): this feature is behind the javascript.options.dynamicImport preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 46Safari iOS Support complet 11.3Samsung Internet Android Support complet 8.0nodejs Support complet 13.2.0
Notes
Support complet 13.2.0
Notes
Notes Dynamic import can be used in either CommonJS or ES module files, to import either CommonJS or ES module files. See Node's ECMAScript Modules documentation for more details.
Support complet 12.0.0
Notes Désactivée
Notes Dynamic import can be used in either CommonJS or ES module files, to import either CommonJS or ES module files. See Node's ECMAScript Modules documentation for more details.
Désactivée From version 12.0.0: this feature is behind the --experimental-modules runtime flag.
Available in workersChrome Support complet 80
Support complet 80
Support complet 67
Désactivée
Désactivée From version 67: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge Support complet 80
Support complet 80
Support complet 79
Désactivée
Désactivée From version 79: this feature is behind the Experimental Web Platform Features preference.
Firefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Support complet 80Chrome Android Support complet 80
Support complet 80
Support complet 67
Désactivée
Désactivée From version 67: this feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Nonnodejs Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Suivi de l'implémentation

Le tableau qui suit fournit un statut journalier de l'implémentation de cette fonctionnalité car celle-ci n'a pas encore atteint une stabilité sur l'ensemble des navigateurs. Les données sont générées à partir des tests de la fonctionnalité dans Test262 (la suite de tests standard pour JavaScript), exécutée pour les versions nightly ou release des moteurs JavaScript des navigateurs.

Voir aussi