Importaciones de ES6 con reconocimiento de variables

En ES6, la declaración de importación proporciona una manera conveniente de importar módulos a su código. Sin embargo, ¿qué sucede si necesita importar un módulo basado en un nombre de variable en tiempo de ejecución? Esto puede surgir en escenarios en los que carga módulos dinámicamente según los ajustes de configuración.

Importaciones estáticas

Desafortunadamente, la declaración de importación en ES6 se analiza estáticamente. Esto significa que los módulos que se importan deben conocerse en el momento de la compilación. Por lo tanto, no puede usar nombres de variables para especificar módulos a importar.

API del cargador

Para cargar módulos dinámicamente, necesita usar la API del cargador. Esta API proporciona una función llamada System.import() que acepta una cadena que especifica el módulo que se va a cargar. El siguiente ejemplo muestra cómo puede usarlo para cargar un módulo basado en un nombre de variable:

System.import('./utils/'   variableName).then(function(module) {
  console.log(module);
});

La función System.import() devuelve una promesa que se resuelve en el módulo cargado. Luego puede acceder a los miembros exportados del módulo utilizando el objeto del módulo.

Consideraciones de compatibilidad

La API Loader es compatible con navegadores modernos y Node.js. Sin embargo, es posible que necesites utilizar un polyfill para lograr compatibilidad con navegadores más antiguos.