时间戳

首页 > 解决方案 > 如何在 webpack 中使用 env？

reactjs - 如何在 webpack 中使用 env？

问题描述

我创建了具有不同值的 .env 和 .env.production 文件：

API=http://localhost:8082/api/

创建的配置：

var config = {};
config.api = process.env.API; 
module.exports = config;

我尝试在操作中获取配置，但“api”字段未定义。

const config = require("../config/server");
console.log(config);

我认为需要在启动命令中添加一些东西

"start": "webpack-dev-server --mode development --inline --progress",
"production": "webpack-dev-server --mode production --inline --progress",

但我不确定我应该在这里添加什么。请你帮助我好吗？

标签： reactjsexpresswebpackenvironment-variables

解决方案

我使用 dotenv 包和定义插件。

我们首先解析 .env 文件，然后遍历组装对象的值。之后我们将组装好的对象传递给定义插件。定义插件将它们设置为可从您的应用程序访问的全局常量。

const dotenv = require('dotenv');

const fileEnv = dotenv.config({ path: '.env.development' }).parsed;
    
const envKeys = Object.keys(fileEnv).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(fileEnv[next]);
    return prev;
}, {});

module.exports = {
...
    plugins: [
        new webpack.DefinePlugin(envKeys),
    ],
...
}

推荐阅读