Importation ES6 avec paramètres

Paramètres pour une importation ES6

Je me suis récemment demandé s'il était réellement possible d'utiliser les instructions d'importation du système du module ES6 en Javascript non seulement de la manière courante (en important simplement un module local via le chemin relatif ou le nom du package), mais avec des paramètres.

Mon cas d'utilisation ressemblerait à ceci : fournir une sorte de paramètres lors de l'importation afin que le module importé puisse lui-même traiter ces paramètres comme un indicateur pour les importations conditionnelles ou la gestion de code spécial.

Il s'avère que c'est tout à fait possible !

Les importations ES6 ne sont que des URL

Avant d'examiner le code, il est important de se rappeler que les déclarations d'importation dans Node.js ne sont pratiquement que des URL. Node.js utilise par défaut un algorithme pour déterminer à quoi ressemblent réellement les URL une fois entièrement résolues. Par exemple, si vous fournissez uniquement le chemin relatif en tant que spécificateur d'importation, Node.js résout toujours la chaîne en une URL absolue pour l'importation en coulisse.

Utilisation des paramètres de requête d'URL pour une importation

Et comme l'importation se résout en une URL, nous pouvons utiliser les paramètres de recherche d'URL communs ainsi que des fragments d'URL dans nos importations.

Tout d'abord, assurez-vous que les modules ES6 sont pris en charge pour tester cette fonctionnalité. Cela nécessite une petite modification de notre package.json, où le champ "type" doit être défini sur "module". Notez que vous devez utiliser Node.js version 12 ou supérieure.

{
  "name": "es6-import-params",
  "version": "1.0.0",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

Définissez ensuite deux modules minimaux pour une démo simple.

//
// index.js
//

import {greet} from "./lib.js?name=Tom";

// This will print "Hello Tom".
greet();

//
// lib.js
//

// We're using Node's native 'URL'-module
// to transform the provided string into
// a usable representation.
//
// Note that 'import' here isn't part of
// an acutal import, but rather resolved
// to a global variable.
const url = new URL(import.meta.url);

// A simple greeter for demo purposes.
// We just access the map 'searchParams'
// from our usable 'url'-object and use
// a fallback if no params are provided.
export function greet() {
  console.log(`Hello ${url.searchParams.get("name") || "World"}`);
}

Importations multiples avec différents paramètres

Comme écrit dans la documentation Node.js, chaque importation est mise en cache au moment de l'exécution pour des importations ultérieures plus rapides dans d'autres modules. Par conséquent, il est important de savoir que les importations du même module mais avec des paramètres différents sont mises en cache individuellement. Bien sûr, les importations avec une signature correspondante sont toujours lues à partir du cache.

// 
// index.js
//

// A small adaptation for the index.js
// file, this time importing the same 
// module twice w/ different params. Each
// module gets cached twice, too.
import * as tomLib from "./lib.js?name=Tom";
import * as lukeLib from "./lib.js?name=Luke";

// 'Hello Tom'.
tomLib.greet();
// 'Hello Luke'.
lukeLib.greet();

// Still 'Hello Tom', as it's
// its own module.
tomLib.greet();

Cas d'utilisation

Les exemples de cet article sont intentionnellement très courts, mais vous voyez l'idée. Selon vos besoins, l'utilisation de paramètres de requête avec des importations peut être une option assez élégante pour définir des variables « globales » pour chaque module. Cela élimine le besoin des fournisseurs d'obtenir et de définir pour atteindre le même objectif.