ReactJs - Webpack 和环境变量答案

【问题标题】：ReactJs - Webpack and environment variableReactJs - Webpack 和环境变量
【发布时间】：2018-09-25 13:38:20
【问题描述】：

我正在尝试使用环境变量系统构建我的 ReactApp。按照在线指南，我创建了两个不同的文件

.env.developtment and .env.production

使用变量的语法：

REACT_APP_BASE_SERVER_URL=myapp/

在开发过程中（使用 npm start 启动服务器），开发文件被完美加载，所有变量都存储在 process.env 全局中。

不幸的是，用 webpack 编译后，process.env 是空的。

我正在编译我的代码：

./node_modules/.bin/webpack --config webpack.config.js --env.production --progress --env.NODE_ENV=production --colors

在我的 webpack 中没有 process.env 覆盖（使用 DefinePlugin 是常见的错误）。

在此站点上出现类似问题后，我尝试将此命令放入配置中以避免任何进程覆盖：

node: {process: false}

但是有了这个 process.env 将完全未定义而不是空（ {} ）。

是否可以使用这种环境系统或.env文件仅支持npm build？

【问题讨论】：

标签： reactjs

【解决方案1】：

将 env 作为参数发送不会设置应用程序环境。这么说，我考虑你是在你的配置中做的。设置几个 env 值的是选项模式作为开发或生产，这在 webpack4 上可用（您可以在以前的版本中使用 -p 或 -d）。

我不知道你为什么说使用 webpack.DefinePlugin 是一个常见的错误。我一直在用，效果很好。

在最后一种情况下，如果您确定 process.env 不应该为空，我建议您使用语法 process.env["expected_attr"]。

【讨论】：