Importazione ES6 con parametri

Come passare i parametri a un modulo ES6 durante l'importazione

Parametri per un'importazione ES6

Di recente mi sono chiesto se è effettivamente possibile utilizzare le istruzioni di importazione del sistema del modulo ES6 in Javascript non solo nel modo comune (importando solo un modulo locale tramite il percorso relativo o il nome del pacchetto), ma con i parametri.

Il mio caso d'uso sarebbe qualcosa del genere: fornire una sorta di parametri durante l'importazione in modo che il modulo importato possa trattare tali parametri come flag per le importazioni condizionali o la gestione speciale del codice.

A quanto pare, è assolutamente possibile!

Le importazioni ES6 sono solo URL

Prima di dare un'occhiata al codice, è importante ricordare che le istruzioni di importazione in Node.js sono praticamente solo URL. Node.js per impostazione predefinita utilizza un algoritmo per determinare l'aspetto effettivo degli URL una volta risolti completamente. Ad esempio, se fornisci solo il percorso relativo come identificatore di importazione, Node.js risolve comunque la stringa in un URL assoluto per l'importazione dietro le quinte.

Utilizzo dei parametri di query URL per un'importazione

E poiché l'importazione si risolve in un URL, possiamo utilizzare i parametri di ricerca URL comuni così come i frammenti di URL nelle nostre importazioni.

Innanzitutto, assicurati che i moduli ES6 siano supportati per testare questa funzione. Ciò richiede una piccola modifica al nostro package.json, dove il campo "type" deve essere impostato su "module". Nota che devi usare Node.js versione 12 o successiva.

{
  "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": ""
}

Quindi definire due moduli minimi per una semplice demo.

//
// 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"}`);
}

Importazioni multiple con parametri diversi

Come scritto nella documentazione di Node.js, ogni importazione viene memorizzata nella cache in fase di esecuzione per importazioni successive più rapide in altri moduli. Pertanto è importante sapere che le importazioni dallo stesso modulo ma con parametri diversi vengono memorizzate singolarmente nella cache. Ovviamente le importazioni con una firma corrispondente vengono comunque lette dalla 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();

Casi d'uso

Gli esempi in questo articolo sono intenzionalmente molto brevi, ma rende l'idea. A seconda delle tue esigenze, l'utilizzo dei parametri di query con le importazioni può essere un'opzione piuttosto elegante per impostare variabili "globali" per ciascun modulo. Ciò elimina la necessità di provider getter e setter di raggiungere lo stesso obiettivo.

Suggerimenti

Correlati

Addendum

Lingue