Estoy usando Webpack para el desarrollo.
Cuando ejecuto el proyecto usando el archivo .env , funciona como se esperaba.
Pero cuando cambio el nombre del archivo a .env.development , el process.env se vuelve undefined .
¿Cómo puedo arreglarlo?
paquete.json
"scripts": { "start": "webpack-dev-server --config ./webpack.config.js"webpack.config.js
const webpack = require("webpack"); const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const Dotenv = require("dotenv-webpack"); module.exports = { mode: "development", entry: path.resolve(__dirname, "./src/index.jsx"), devtool: "source-map", output: { path: path.join(__dirname, "/dist"), filename: "bundle.js", }, devServer: { port: 3000, static: true, historyApiFallback: true, open: true, }, resolve: {...}, module: {...}, plugins: [ new Dotenv(), new HtmlWebpackPlugin({ template: "public/index.html", filename: "index.html", favicon: "public/favicon.ico", }), new webpack.ProvidePlugin({ Buffer: ["buffer", "Buffer"], }), new webpack.ProvidePlugin({ process: "process/browser", }), ], };dotenv por defecto solo busca un archivo .env . Esto es deliberado, ya que un archivo env debe ser solo local y específico para el entorno en el que se ejecuta la aplicación. No debe mantener diferentes versiones del env para diferentes entornos.
Citaré de los documentos de dotenv :
¿Debo tener varios archivos .env?
No. Recomendamos enfáticamente no tener un archivo
.env.test"principal" y un archivo.envde "entorno" como.env. Su configuración debe variar entre implementaciones y no debe compartir valores entre entornos.En una aplicación de doce factores, las variables de entorno son controles granulares, cada uno completamente ortogonal a otras variables de entorno. Nunca se agrupan como "entornos", sino que se administran de forma independiente para cada implementación. Este es un modelo que se amplía sin problemas a medida que la aplicación se expande naturalmente en más implementaciones durante su vida útil.
Sin embargo, puede decirle a dotenv-webpack dónde buscar su archivo si lo desea:
plugins: [ new Dotenv({ path: './.env.development', }),