如果与 DefinePlugin 一起使用，将应用程序部署到 Heroku 不起作用答案

【问题标题】：Deploying app to Heroku doesnt work if used together with DefinePlugin如果与 DefinePlugin 一起使用，将应用程序部署到 Heroku 不起作用
【发布时间】：2018-10-23 11:09:20
【问题描述】：

到目前为止，我一直在构建像 webpack -p 这样的 webpack 包并部署到 Heroku。一切都很好。我想有更多的控制权，所以我没有使用-p，而是在我的 webpack 配置中使用了 UglifyJsPlugin 和 DefinePlugin，因为这正是 -p 正在做的事情。这就是问题开始的地方。

如果我在没有 DefinePlugin 的情况下使用 -p，这就是我的构建文件最后的样子。

var PORT = process.env.NGINX_PORT ? '/tmp/nginx.socket' : process.env.PORT;

process.env.PORT 被保留，并且部署到 Heroku 正在运行。

如果我使用 DefinePlugin

var PORT = Object({"NODE_ENV":"production"}).NGINX_PORT ? '/tmp/nginx.socket' : Object({"NODE_ENV":"production"}).PORT;

我的 process.env.PORT 不再存在，部署到 Heroku 失败。

如何使用 DefinePlugin 但仍保持 process.env.PORT 不变？

这是我的 webpack 配置

new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      },
    }),

还有我的启动脚本

"start": "cross-env NODE_ENV=production node ./src/build/bundle.js"

【问题讨论】：

没有。定义插件会将您放在那里的所有内容转换为 Object({"NODE_ENV":"production"})

标签： reactjs heroku webpack environment-variables production-environment

【解决方案1】：

如果您想保持 process.env.PORT 从 env 获取，只需更改您使用插件的方式。

new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})

DefinePlugin 将翻译您放入构造函数中的所有内容。这发生在您身上，因为您刚刚在顶层拥有 process.env。您必须具体说明您希望它翻译的内容。

【讨论】：