Hay dos conceptos que necesitamos entender que pueden llegar a ser bastante útiles:
1. Variables de entorno, son variables externas a nuestro proyecto y no son más que un nombre asignado a un valor.
2. Modos, que como lo hemos visto en clases anteriores, existen dos, el modo de desarrollo (dev) y el modo de producción (build).
Modos
Continuemos editando nuestro archivo vite.config.js, pero primero debemos entender que en nuestra función estamos recibiendo algunos argumentos, entre los que destacan command y mode, command es el comando que utilizamos para ejecutar este archivo y mode nos dice si estamos en modo producción o modo desarrollo.
```
import { defineConfig } from "vite";
export default defineConfig(({ command, mode }) => {
const port = 8080;
console.log(comando: ${command} y modo: ${mode});
return {
server: { port },
};
});
```
Si ejecutamos con dev (npm run dev) veremos que está usando el comando serve y el modo de desarrollo:
comando: serve y modo: development
Pero si ejecutamos con build (npm run build) el comando seria build y el modo seria producción:
comando: build y modo: production
Esto puede llegar a ser útil porque podemos implementar una lógica dependiendo del modo en que estemos, en el siguiente ejemplo muy básico se imprimirá un mensaje dependiendo del modo.
```
import { defineConfig, loadEnv } from "vite";
export default defineConfig(({ command, mode }) => {
const port = 8080;
console.log(comando: ${command} y modo: ${mode});
if (command === "development") {
console.log("Modo desarrollo");
} else {
console.log("Modo produccion");
}
return {
server: { port },
};
});
```
Variables de entorno
Para acceder a nuestras variables de entorno debemos de primero crear en la raíz del proyecto un archivo con el nombre .env y dentro de este podremos crear las variables de entorno que necesitemos.
Estructura de una variable de entorno
La estructura de las variables de entorno es la siguiente: VITE_NOMBRE_DE_VARIABLE=valor, como podrás ver es necesario que empiece con la palabra VITE, para que después pueda ser reconocida.
VITE_NAME="vite demo"
Usando variables de entorno
En el anterior ejemplo cree una variable de entorno con el nombre de VITE_NAME, que guardara el nombre de nuestro proyecto. Ahora, para utilizarla dentro de vite.config.js debemos de emplear loadEnv, una función que se importa desde vite y nos entrega todas las variables en el archivo .env.
Tener en cuenta que solo entregara las variables que empiezen con VITE
Acerca de loadEnv
loadEnv recibe dos parámetros, que son:
1. El modo en el que estamos (modo desarrollo o modo producción). Esto debido a que nuestro archivo .env también puede tener el nombre de .env.development o .env.production, si estamos en modo producción se traerán las variables que estén en .env.development, si estamos en modo producción se traerán las variables de .env.production y si no existen ninguno de estos archivos se traerá por defecto las de .env.
2. Ubicación por la cual se accede vía Nodejs para leer el archivo. Para acceder a la ubicación podemos usar process.cwd(), una función de Nodejs que nos entrega la dirección del proyecto.
Ejemplo
A continuación vamos a importar loadEnv, crear una variable con el nombre de env y dentro de esta utilizar la función loadEnv, entregándole los parámetros necesarios.
```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");
} else {
console.log("Modo produccion");
}
return {
server: { port },
};
});
```
Por último imprimiremos la variable env y veremos que nos entrega en un formato JSON las variables del archivo .env
Variables de entorno: { VITE_NAME: 'vite demo' }
Recapitulación
Ahora eres capaz de acceder a las variables de entorno, algo muy útil para tu vida profesional, además también puedes saber en qué modo estas y que comando estás utilizando. Te recuerdo que puedes revisar este apartado de la documentación de Vite por si quieres profundizar en el tema.
Contribución creada por: Jofay Zhan Segura
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?