No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Vite.js

Curso de Vite.js

Diana Martínez

Diana Martínez

Importación global

11/19
Recursos

La importación global nos permite importar archivos de forma masiva, es decir, poder tomar toda una carpeta e importarla de una sola vez para usarla dentro del código.

Creando los módulos

Primero que todo debemos crear los archivos que queremos importar, en este ejemplo crearé una carpeta con el nombre modules y dentro de esta dos archivos, module1.js y module2.js.

vite-global-import-folser.png

Los archivos tendrán un objeto que tendrá la propiedad nombre y esta será igual al nombre del módulo, después exportaremos una función (load) la cual imprimirá un mensaje con el nombre del módulo y por último exportaremos el objeto.

module1.js

``` const module = { name: "module 1", };

export function load() { console.log(${module.name} load!); }

export default module; ```

module2.js

``` const module = { name: "module 2", };

export function load() { console.log(${module.name} load!); }

export default module; ```

Global import

Ahora que tenemos los archivos de ejemplo debemos de importarlos, para esto debemos de usar la función de global import y guardarlo en una variable, de la siguiente manera:

const modules = import.meta.glob("./modules/*.js");

Como puedes ver en la constante modules estamos utilizando el import especial (import.meta.blog()) y dentro de esta indicamos en que carpeta se realizara el import (./modules) y a continuación qué archivos se traerán, en este caso estamos trayendo todos los que terminen con la extensión .js (/*.js).

Usando nuestros módulos

Si imprimimos modules veremos que estamos importando un JSON que contiene los diferentes módulos, es por esto que podemos iterarlo con un for In y ejecutar las funciones load que tiene cada archivo.

  1. Debemos crear un for In el cual itere sobre módulos: for (const path in modules) {}
  2. Después con el key de la iteración (path) accederemos a cada uno de los módulos que están en módulos, como esto es una función deberemos ejecutarla.
  3. Al ejecutarla nos estará devolviendo una promesa por lo que podremos emplear .then() para acceder al módulo.
  4. Dentro de .then() crearemos una función que tome el módulo actual y ejecute la función load() de cada módulo.
  5. Por último, si todo se ejecuta correctamente, se deberá imprimir los mensajes que teníamos en las funciones load.

``` for (const path in modules) { modulespath.then((module) => { module.load(); }); }

// module 1 load! // module 2 load! ```

Contribución creada por: Jofay Zhan Segura

Aportes 4

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Aqui el ejemplo de la clase trabajado con async await :

const modules = import.meta.glob('./modules/*.js');

for(const path in modules){
  async function fetchModule(){
    const module = await modules[path]();
    module.load();
  }
  fetchModule();
  // modules[path]().then((module)=>{
  //   module.load();
  // })
}

console.info(modules);

Si observamos el código JS que Vite nos arroja en el navegador cuando ejecutamos el servidor de desarrollo, podemos ver que:

const modules = import.meta.glob('../modules/*.ts');

Sería como hacer en JS:

const modules = Object.assign({
  "../modules/module1.ts": ()=>import("/modules/module1.ts"),
  "../modules/module2.ts": ()=>import("/modules/module2.ts")
});

Esto me permitió entender mucho mejor qué es lo que está pasando porque la verdad nunca había visto ni trabajado con dynamic imports, y puede que a alguien más también le ayude a entender mejor.
.
En resumen, Vite está creando importaciones dinámicas de todos los archivos que le especificamos como argumento de glob(), creando un objeto module cuyos keys son iguales a un import estático y los values son iguales al key pero en un import dinámico.

Está bueno porque podemos importar archivos de forma masiva utilizando JS, para no tener que importar cada elemento por separado

Aqui otro ejemplo con arrow function y async/await

for (const path in modules) {
  const fn = async () => {
    const mod = await modules[path]();
    mod.load();
  };
  fn();
}