如果与DefinePlugin一起使用，将应用程序部署到Heroku不起作用(Deploying app to Heroku doesnt work if used together with Def

如果与DefinePlugin一起使用，将应用程序部署到Heroku不起作用(Deploying app to Heroku doesnt work if used together with DefinePlugin)

到现在为止，我一直在构建我的webpack包，像这个webpack -p并部署到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"

Until now I have been building my webpack bundle like this webpack -p and deploying to Heroku. Everything worked great. I wanted to have a little more control so instead of using -p I used UglifyJsPlugin and DefinePlugin inside my webpack config since that is exactly what -p is doing. This is where the problem started.

If I use -p without DefinePlugin this is how my build file looks at the end.

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

process.env.PORT is keept and deployment to Heroku is working.

If I use DefinePlugin

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

My process.env.PORT is not here anymore and deployment to Heroku fails.

How can I use DefinePlugin but still keep process.env.PORT intact?

This is my webpack config

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

and my start script

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

最满意答案

如果你想让process.env.PORT从env中获得，只需改变你使用插件的方式。

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

DefinePlugin会翻译你在构造函数中放置的所有东西。 这发生在你身上，因为你刚刚在顶层有process.env。 你必须具体说明你想要翻译的内容。

If you want to keep process.env.PORT getting from env, just change the way that you use the plugin.

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

DefinePlugin will translate everything you put in the constructor. That happened with you because you just had process.env at the top level. You have to be specific to what you want it to translate.