Con Vite podremos ser capaces de generar proyectos con múltiples páginas de inicio, esto quiere decir que además del index.html (por lo general entrada de un proyecto en Vite), podremos tener más archivos que se comporten como una página separada a este, con sus propias dependencias, sus propios elementos y completamente individuales.
Configurando Vite
Para poder lograr esto vamos a hacer uso de la configuración de Vite, pero también vamos a hacer uso de la configuración de rollup, con el cual podremos hacer múltiples archivos de entrada.
Creando otra página inicial
Antes de empezar con la configuración vamos a crear una carpeta con el nombre de help y dentro de este un archivo html con el nombre de help.html, con un código bastante básico.
```
Help
Help!
```
Ahora vamos a generar una configuración que nos permita retornar diferentes cosas dependiendo del modo. Es así que si estamos en modo desarrollo retornaremos el puerto donde queremos que se ejecute la aplicación.
```
import { defineConfig, loadEnv } from "vite";
export default defineConfig(({ command, mode }) => {
const port = 8080;
const env = loadEnv(mode, process.cwd());
console.log(comando: ${command} y modo: ${mode});
console.log("Variables de entorno:", env);
if (command === "development") {
console.log("Modo desarrollo");
return {
server: { port },
};
} else {
console.log("Modo produccion");
}
});
```
Configurando rollup
En modo producción retornaremos una configuración para el proceso de build, dentro de este acceder a la configuración de rollup e indicarle cuáles son los diferentes archivos de entrada con la opción input.
```
import { defineConfig, loadEnv } from "vite";
import { resolve } from "path";
export default defineConfig(({ command, mode }) => {
const port = 8080;
const env = loadEnv(mode, process.cwd());
console.log(comando: ${command} y modo: ${mode});
console.log("Variables de entorno:", env);
if (command === "development") {
console.log("Modo desarrollo");
return {
server: { port },
};
} else {
console.log("Modo produccion");
return {
build: {
rollupOptions: {
input: {},
},
},
};
}
});
```
Opción input
La opción input recibe las diferentes entradas que queremos para nuestro proyecto, que consisten en un nombre para el archivo y al frente su ubicación. Para la ubicación estamos usando resolve, una función de nodejs que se importa desde path.
resolve recibe como primer parámetro el nombre del directorio donde se ejecuta nuestro proyecto, el cual puede ser obtenido a través de la variable __dirname y después tendríamos que escribir la dirección del archivo a referenciar.
Ejemplo
Ahora debemos de definir las diferentes entradas para nuestro proyecto.
- El index.html, que se encuentra en la raíz del proyecto. Esta la podemos nombrar main y a continuación utilizar la función resolve con los parámetros que ya conocemos.
main: resolve(__dirname, "index.html")
- Crearemos una entrada para el archivo help.html, que se encuentra en la carpeta help.
help: resolve(__dirname, "help/help.html"),
```
import { defineConfig, loadEnv } from "vite";
import { resolve } from "path";
export default defineConfig(({ command, mode }) => {
const port = 8080;
const env = loadEnv(mode, process.cwd());
console.log(comando: ${command} y modo: ${mode});
console.log("Variables de entorno:", env);
if (command === "development") {
console.log("Modo desarrollo");
return {
server: { port },
};
} else {
console.log("Modo produccion");
return {
build: {
rollupOptions: {
input: {
main: resolve(__dirname, "index.html"),
help: resolve(__dirname, "help/help.html"),
},
},
},
};
}
});
```
Una vez tenemos esta configuración a la hora de hacer el build rollup va a partir desde ambos proyectos y tratarlos por separado. Si ejecutamos el proyecto con el comando dev y vamos al navegador podremos ver que ahora en la ruta /help/help.html se encuentra nuestro otro proyecto.
Por el contrario, si ejecutamos el comando build podremos ver en la consola un mensaje parecido al siguiente:
El cual nos dice que se generó un trozo para help y que en la carpeta dist encontraremos la carpeta help con el archivo help.html.
Micro Frontends
Lo que vimos anteriormente es una característica en específico de Vite que puede llegar a ser muy útil para la tendencia de Mircro Frontends, una forma de pensar el frontend de manera que tengas múltiples frameworks coexistiendo en el mismo proyecto.
Contribución creada por: Jofay Zhan Segura
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?