Movatterモバイル変換


[0]ホーム

URL:


  1. Web
  2. JavaScript
  3. Référence JavaScript
  4. Expressions et opérateurs
  5. import.meta
  6. import.meta.resolve()

Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in EnglishAlways switch to English

import.meta.resolve()

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨mars 2023⁩.

import.meta.resolve() est une fonction native, définie sur l'objetimport.meta d'un module JavaScript qui résout un spécificateur de module en une URL, en utilisant l'URL du module courant comme base.

Syntaxe

js
import.meta.resolve(nomModule)

Paramètres

nomModule

Une chaîne de caractères indiquant un module qui peut être importé. Il peut s'agir d'un chemin relatif (comme"./lib/helper.js"), d'un nom seul (par exemple"mon-module"), ou d'une URL absolue (telle que"https://example.com/lib/helper.js").

Valeur de retour

Cette fonction renvoie une chaîne de caractères correspondant au chemin qui serait importé si l'argument avait été passé àimport().

Description

import.meta.resolve() permet à un script d'accéder à l'algorithme derésolution des spécificateurs de modules pour un nom donné :

js
// Script situé à https://example.com/main.jsconst helperPath = import.meta.resolve("./lib/helper.js");console.log(helperPath); // "https://example.com/lib/helper.js"

On notera queimport.meta.resolve() effectue uniquement la résolution, elle ne tente pas de chargement ou d'import du chemin obtenu (l'explication de la spécification (en anglais) décrit le raisonnement pour ce comportement). Aussi, la valeur de retour sera la mêmequ'un fichier existe ou non à l'emplacement indiqué par le chemin obtenu et quel que soit le contenu de cet éventuel fichier (du code valide ou non pour un module).

Cette fonction est différentede l'opérateur d'import dynamique. Bien qu'ils acceptent tous les deux un spécificateur de module comme premier argument,import.meta.resolve() renvoie uniquement le chemin quiserait importé sans tenter d'accéder à ce chemin. Autrement dit, les deux approches suivantes seront équivalentes :

js
// Première approcheconsole.log(await import("./lib/helper.js"));// Deuxième approcheconst chemin = import.meta.resolve("./lib/helper.js");console.log(await import(chemin));

Toutefois, si"./lib/helper.js" ne peut pas être importé correctement, la seconde approche déclenchera une erreur au moment de tenter l'import sur la deuxième ligne.

Noms de modules seuls

Il est possible de passer un nom de module seul (bare module name) à cette fonction, tant qu'une résolution est bien définie pour ce nom. On pourra par exemple utiliser unecarte d'import dans un navigateur :

html
<!-- index.html --><script type="importmap">  {    "imports": {      "mon-module": "./modules/mon-module/index.js"    }  }</script><script type="module">  const cheminModule = import.meta.resolve("mon-module");  console.log(cheminModule);</script>

Là encore, ce fragment de code ne déclenchera pas d'import pourcheminModule (la carte ne déclenche pas d'import non plus). L'URL fournie par la résolution sera affichée dans la console, que./modules/mon-module/index.js existe ou non.

Comparaison avecnew URL()

Le constructeurURL() accepte un deuxième argument qui fournit une URL de base. Lorsque le premier argument est un chemin relatif et que l'URL de base correspond àimport.meta.url, l'effet sera similaire àimport.meta.resolve().

js
const helperPath = new URL("./lib/helper.js", import.meta.url).href;console.log(helperPath);

Cela peut aider comme remplacement lorsqu'il s'agit de cibler les anciens navigateurs. Toutefois, on notera quelques différences :

  • import.meta.resolve() renvoie une chaîne de caractères tandis quenew URL() renvoie un objetURL. Il est possible d'utiliserhref outoString() sur l'objetURL pour passer à une chaîne de caractères, mais le résultat pourra être différent selon l'environnement JavaScript ou si on utilise des outils comme des empaqueteurs de code pour de l'analyse statique.
  • import.meta.resolve() prendra en compte les configurations de résolution supplémentaires comme la résolution de noms seuls à l'aide de cartes d'import (voir ci-avant).new URL() ne prendra pas en compte les cartes d'import et considèrera les noms seuls comme des chemins relatifs (par exemplenew URL("mon-module", import.meta.url) sera équivalent ànew URL("./mon-module", import.meta.url)).

Certains outils reconnaîtrontnew URL("./lib/helper.js", import.meta.url).href comme une dépendance à"./lib/helper.js" (semblable à un import) et prendront cela en compte pour l'empaquetage, la réécriture des imports pour les fichiers déplacés, les fonctionnalités d'inspection des sources, etc. Toutefoisimport.meta.resolve() est moins ambigu et conçu spécifiquement pour indiquer une résolution de chemin de module. Aussi, mieux vaudra utiliserimport.meta.resolve(nomModule) plutôt quenew URL(nomModule, import.meta.url) pour ces cas d'usage.

Ne fait pas partie d'ECMAScript

import.meta.resolve() n'est pas spécifiée ou documentée au sein dela spécification ECMAScript pour les modules JavaScript. La spécification définitl'objetimport.meta etdélègue la définition de ses propriétés aux environnements hôtes. Le standard WHATWG HTML reprend donc là où s'arrête le standard ECMAScript etdéfinitimport.meta.resolve() avecla résolution de spécificateur de module.

Cela signifie queimport.meta.resolve() ne fait pas nécessairement partie de toutes les implémentations conformes de JavaScript. Toutefois,import.meta.resolve() peut également faire partie d'environnements qui ne sont pas des navigateurs :

  • Deno implémenteune compatibilité avec le comportement des navigateurs.
  • Node.js expose une implémentation disponible avec l'option--experimental-import-meta-resolve et qui renvoie une promesse (Promise) plutôt qu'une chaîne de caractères. Cela pourra éventuellement changer pour correspondre au comportement des navigateurs.

Exemples

Résoudre un chemin pour le passer au constructeurWorker()

import.meta.resolve() s'avère particulièrement utile pour les API qui prennent comme argument un chemin d'un fichier de script, comme le constructeurWorker() :

js
// main.jsconst workerPath = import.meta.resolve("./worker.js");const worker = new Worker(workerPath, { type: "module" });worker.addEventListener("message", console.log);
js
// worker.jsself.postMessage("coucou !");

Cette fonction peut aussi être utile pour le calcul des chemins d'autresworkers (commelesservice workers etlesworkers partagés). Toutefois, si vous utilisez un chemin relatif pour calculer l'URL d'unservice worker, il faudra garder à l'esprit que le répertoire du chemin résolu détermine saportée d'enregistrement par défaut (une portée différente pouvant être définielors de l'enregistrement).

Spécifications

Specification
HTML
# import-meta-resolve

Compatibilité des navigateurs

Voir aussi

Help improve MDN

Learn how to contribute

Cette page a été modifiée le par lescontributeurs du MDN.


[8]ページ先頭

©2009-2025 Movatter.jp