¿Es posible importar algo en el módulo que proporcione el nombre de la variable mientras se usa la importación ES6?
Es decir, quiero importar algún módulo en tiempo de ejecución según los valores proporcionados en una configuración:
import something from './utils/' + variableName;No con la declaración de import . import y export se definen de tal manera que son analizables estáticamente, por lo que no pueden depender de la información de tiempo de ejecución.
Está buscando la API del cargador (polyfill) , pero no tengo claro el estado de la especificación:
System.import('./utils/' + variableName).then(function(m) { console.log(m); });Si bien esto no es realmente una importación dinámica (por ejemplo, en mi caso, todos los archivos que estoy importando a continuación serán importados y agrupados por webpack, no seleccionados en tiempo de ejecución), un patrón que he estado usando que puede ayudar en algunas circunstancias es :
import Template1 from './Template1.js'; import Template2 from './Template2.js'; const templates = { Template1, Template2 }; export function getTemplate (name) { return templates[name]; }o alternativamente:
// index.js export { default as Template1 } from './Template1'; export { default as Template2 } from './Template2'; // OtherComponent.js import * as templates from './index.js' ... // handy to be able to fall back to a default! return templates[name] || templates.Template1; No creo que pueda volver a un valor predeterminado tan fácilmente con require() , que arroja un error si intento importar una ruta de plantilla construida que no existe.
Se pueden encontrar buenos ejemplos y comparaciones entre require e import aquí: http://www.2ality.com/2014/09/es6-modules-final.html
Excelente documentación sobre reexportación de @iainastacio: http://exploringjs.com/es6/ch_modules.html#sec_all-exporting-styles
Me interesa escuchar comentarios sobre este enfoque :)
Hay una nueva especificación que se llama importación dinámica para módulos ES. Básicamente, solo llama a import('./path/file.js') y está listo para comenzar. La función devuelve una promesa, que resuelve con el módulo si la importación fue exitosa.
async function importModule() { try { const module = await import('./path/module.js'); } catch (error) { console.error('import failed'); } }Los casos de uso incluyen la importación de componentes basados en rutas para React, Vue, etc. y la capacidad de cargar módulos de forma diferida , una vez que se requieren durante el tiempo de ejecución.
Aquí hay una explicación en Google Developers .
Según MDN , es compatible con todos los principales navegadores actuales (excepto IE) y caniuse.com muestra un 87 % de compatibilidad en toda la cuota de mercado global. Nuevamente, no hay soporte en IE o Edge sin cromo.