Acabo de encontrarme con la idea de usar variables de entorno en una base de código de React front-end que estoy viendo. Cuando ejecuto la aplicación React localmente, puedo ver que cuando console.log process.env.VALUE, este valor se cerrará en la consola del navegador.
Sin embargo, si hago console.log(process.env) solo veo un objeto vacío. He visto otras respuestas para esto en Stack Overflow pero no pude entenderlas. No tiene sentido para mí cómo puedo acceder a las propiedades en process.env pero no puedo cerrar sesión en process.env. ¿No es solo un objeto que contiene todas las variables de entorno que están configuradas?
Si alguien puede explicar esto simplemente, sería apreciado. Gracias.
La razón de esto es que React usa naturalmente webpack.DefinePlugin cuando está construyendo su compilación de producción. Esa biblioteca básicamente hace que su variable process.env sea esencialmente 'marcadores de posición', lo que significa que todos los valores se reemplazan durante el tiempo de compilación . Es por eso que process.env devuelve {} , mientras que process.env.NODE_ENV devuelve el correcto, por ejemplo.
Ligeramente fuera de tema, pero en Next.js (un marco de React), todas las variables de entorno también se reemplazan durante el tiempo de compilación (por motivos de seguridad). Eso significa que process.env no es un objeto JavaScript normal en Next.js. Internamente, también usan webpack.DefinePlugin .
Como adición a la respuesta, el navegador no tiene acceso a process.env . React está básicamente compilado en HTML/CSS/JS, lo que significa que la aplicación es solo un sitio estático. process.env es una cosa de Node.js.
Ejemplo:
FOO con valor BAR en cualquier entorno que desee cuando cree su aplicación.webpack.DefinePlugin para transformar su FOO en process.env.FOO . Es literalmente process.env.FOO . El compilador no crea un objeto llamado process.env con un atributo FOO . Literalmente, el process.env.FOO se adjunta en el objeto de window de su aplicación.process.env.FOO y que existe en su aplicación durante el tiempo de ejecución.process.env (no es y nunca ha sido un objeto) desde el comienzo de la compilación, y es por eso que devuelve un objeto vacío; simplemente nunca es un objeto para empezar por las razones que Lo he explicado en lo anterior.Referencias: