时间戳

首页 > 解决方案 > 如果与 DefinePlugin 一起使用，将应用程序部署到 Heroku 不起作用

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

问题描述

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

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

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"

标签： reactjsherokuwebpackenvironment-variablesproduction-environment

解决方案

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

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

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

推荐阅读