在webpack构建之后设置环境变量

Question

我目前正在尝试在Heroku上部署我的Webpack 2 / React / Redux应用程序，我正在尝试在本地构建然后部署到Heroku。这样做的问题是Heroku提供的PORT环境变量是在构建后设置的 - 所以当我在本地构建时，process.env.PORT值是未定义的。

我可以在Heroku服务器上构建，但速度非常慢，启动时间超过60秒。

我想知道在构建之后是否有办法设置环境变量？

Answer 1

要在Heroku上构建您的应用程序，通常在package.json中使用postinstall脚本（有关详细信息，请参阅official docs）。或者，您可以添加名为heroku-postbuild的npm脚本。

在这两种情况下，都应该设置$PORT环境变量，并且在构建期间没有60秒的超时限制。

只是为了确保我理解你的问题：在构建（afaik）之后无法在运行时读取环境变量，你必须告诉Webpack不要替换{{1}变量。但是您可以在构建期间通过定义的值设置它们（例如，可以通过DefinePlugin, the EnvironmentPlugin or an alias配置）。

更新：

在process.env / $PORT执行时间内未设置postinstall环境变量，因此不建议将其编译成前面提到的代码。但是，仍然建议使用heroku-postbuild / postinstall脚本之一在Heroku上构建您的应用。

如果您想在本地运行您的应用，则需要自行设置heroku-postbuild环境变量，如下所示：

$PORT