使用Webpack构建的Heroku上的Angular应用程序 - 环境变量？

Question

我试图找出将环境变量加载到我的AngularJS应用程序的最佳方法。 我目前正在使用常量，它们从Webpack definePlugin定义的值中获取它们的definePlugin 。 但是，这会导致Heroku出现问题，因为代码是在推送到暂存时构建的，当它被提升为生产时，它不会重建，因此webpack definePlugin常量是暂存环境变量。

我已经看过在运行时从我的API请求环境变量，然后将它们设置为在我的前端使用的常量，但我无法弄清楚如何在初始.constant(..)之外以编程方式设置常量.constant(..)机会。

如果有人知道在使用Webpack（而不是Grunt）时将环境变量加载到前端的任何其他更好的做法，请告诉我。

Answer 1

如果您在服务器中使用node.js（和npm），则可以考虑在“npm prestart”脚本中运行webpack，而不是在“npm postinstall”中运行。

这样webpack就会在每次你的heroku dynos启动或回收时运行，因此会从适当的Heroku管道阶段中获取你的env var定义。 因此，当你的staging dynos开始时，webpack将获取你的staging env var定义，当你的生产dynos开始时，webpack将获取你的生产env var定义。

然而，这种方法的缺点是，在回收时会增加你的dynos停止服务的时间，因为他们现在需要在启动之前运行webpack。