Introducción
¿Qué es Vite?
Historia del Ecosistema de JavaScript
Características de Vite
Setup inicial
¿Cómo instalar Vite?
Boilerplate de Vite
Estilos CSS
Importar CSS
Pre-procesadores CSS
CSS Modules
Archivos estáticos
Importar imágenes
Importar JSON
Importación global
Configuración
Uso con TypeScript
Vite Config
Construir para producción
Variables de entorno y modos
Sitios multi-página
Construir librerías
Frameworks
Soporte para React
Soporte para Vue
Cierre del curso
Despedida
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.
Antes: $249
Paga en 4 cuotas sin intereses
Termina en:
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.
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.
``` const module = { name: "module 1", };
export function load() {
console.log(${module.name} load!);
}
export default module; ```
``` const module = { name: "module 2", };
export function load() {
console.log(${module.name} load!);
}
export default module; ```
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).
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.
for (const path in modules) {}``` for (const path in modules) { modulespath.then((module) => { module.load(); }); }
// module 1 load! // module 2 load! ```
Contribución creada por: Jofay Zhan Segura
Aportes 5
Preguntas 5
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();
}
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?