Importación ES6 con parámetros

Cómo pasar parámetros a un módulo ES6 al importarlo

Parámetros para una importación de ES6

Recientemente me pregunté si es realmente posible usar declaraciones de importación del sistema del módulo ES6 en Javascript no solo de la manera común (importando solo un módulo local a través de la ruta relativa o el nombre del paquete), sino con parámetros.

Mi caso de uso sería algo como esto: proporcione algún tipo de parámetros durante la importación para que el módulo importado pueda tratar esos parámetros como una bandera para importaciones condicionales o manejo de código especial.

¡Resulta que eso es totalmente posible!

Las importaciones de ES6 son solo URL

Antes de echar un vistazo al código, es importante recordar que las declaraciones de importación en Node.js son prácticamente solo URL. Node.js utiliza de forma predeterminada un algoritmo para determinar cómo se ven realmente las URL cuando se resuelven por completo. Por ejemplo, si solo proporciona la ruta relativa como especificador de importación, Node.js aún resuelve la cadena en una URL absoluta para la importación entre bastidores.

Usar parámetros de consulta de URL para una importación

Y debido a que la importación se resuelve en una URL, podemos usar los parámetros de búsqueda de URL comunes, así como los fragmentos de URL en nuestras importaciones.

Primero, asegúrese de que los módulos ES6 sean compatibles para probar esta función. Esto requiere un pequeño cambio en nuestro package.json, donde el campo "tipo" debe establecerse en "módulo". Tenga en cuenta que debe usar Node.js versión 12 o superior.

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

A continuación, defina dos módulos mínimos para una demostración 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"}`);
}

Varias importaciones con diferentes parámetros

Como está escrito en la documentación de Node.js, cada importación se almacena en caché en tiempo de ejecución para importaciones posteriores más rápidas en otros módulos. Por lo tanto, es importante saber que las importaciones desde el mismo módulo pero con diferentes parámetros se almacenan en caché individualmente. Por supuesto, las importaciones con una firma coincidente se leen del caché.

// 
// 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();

Casos de uso

Los ejemplos de este artículo son intencionalmente muy breves, pero entiendes la idea. Dependiendo de sus requisitos, el uso de parámetros de consulta con importaciones puede ser una opción bastante elegante para configurar variables "globales" para cada módulo. Esto elimina la necesidad de obtener proveedores y establecedores para lograr el mismo objetivo.

Sugerencias

Relacionados

Adenda

Idiomas