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.

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

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

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

export default module;

module2.js

fullscreen
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.

fullscreen
for (const path in modules) {
  modules[path]().then((module) => {
    module.load();
  });
}

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

Contribución creada por: Jofay Zhan Segura