Tengo un requisito relativamente simple para empezar.

Quiero poder cargar un componente de UI en particular, basado en algún contexto dinámico. Estaba pensando que las importaciones dinámicas podrían usarse para este propósito. Las importaciones dinámicas deben cargarse a través del navegador web (sin nodeJS).

Los detalles sobre lo que es posible con las importaciones dinámicas son muy incompletos para mí; en el mejor de los casos, probablemente también porque no soy un experto en el campo de JavaScript/TypeScript (todavía).

Estoy usando Vanilla JS en este momento y vitejs como herramienta de compilación.

Esto es lo que tengo hasta ahora.

Este es mi archivo main.ts :

 const getPath = () => { if (import.meta.env.MODE === 'development') { return 'http://127.0.0.1:3000/one.js'; } else { return 'http://127.0.0.1:5000/one.js'; } }; import(getPath()).then((Module) => { Module.default(); });

Esto ya hace que vitejs vomite, quejándose de que no puede analizar las cosas, pero lo estoy ignorando por ahora. El archivo one.js se ve así:

 const hello = () => { console.log('Hello from one'); }; export default hello;

Tanto run dev como run serve funcionan con esta configuración, ya que el mensaje se imprime en la consola del navegador.

Lo siguiente que quiero ver funcionando es cómo one.js podría importar un módulo y trabajar con eso. He intentado esto con un momento así:

 import moment from "moment"; const hello = () => { console.log('Hello from one ', moment().format()); }; export default hello;

Este error con:

 Uncaught (in promise) TypeError: Error resolving module specifier “moment”. Relative module specifiers must start with “./”, “../” or “/”.

Ahora no sé si lo que quiero hacer no es apoyo o simplemente no lo estoy haciendo de la manera correcta. Cualquier indicador sería apreciada.