你的提案是否与问题相关？
"create-react-app"创建的React应用并没有提供关于如何处理环境特定配置的意见。
在最近几年，我参与了3个不同的React项目，发现它们处理环境特定配置的方式并不是最好的。
当我们构建应用程序时，我们经常需要部署到多个环境中，如开发、暂存和生产环境。有时，我们可能有prod-cust1、prod-cust2等不同的生产环境。
React没有提供任何关于如何管理环境特定配置文件的建议。
Angular提供了这个建议https://angular.io/guide/build。
Angular提供的这个建议并不理想。
许多开发者采用类似于Angular的方法来处理配置。
Angular方法的问题在于：
- 代码和配置没有分离(这违背了12因素应用的原则)
- 当我们决定将应用程序部署到新环境时，我们需要创建一个新的环境文件。
- 它也不能帮助“一次构建，部署到任意地方”
描述你希望的解决方案
修改"create-react-app",当使用--with-config调用时：
- 在公共文件夹中有一个名为environmentConfig.js的配置文件，并将其作为index.html中的脚本添加
- 有一个名为Config.js的文件，通过评估window.config导出配置
- 这将使外部化配置变得容易，并使应用程序能够进行容器化
参考：https://github.com/ZeroWasteTeam/SampleReact
描述你考虑过的替代方案
应用程序可以通过调用API从后端获取环境特定的配置。
- 这种方法的优势是配置不需要在后端和前端重复。
- 缺点是在浏览器加载时，应用程序总是需要进行此调用以获取配置。
其他上下文
随着容器化的流行，如果能有参数提供Dockerfile和.dockerignore会很好。
这将加快初始开发环境的设置速度。
6条答案
按热度按时间l5tcr1uw1#
我总是设法用这个来完成所有需要：
https://create-react-app.dev/docs/adding-custom-environment-variables#adding-development-environment-variables-in-env
结合一段逻辑，根据服务器上的当前环境加载配置文件，在必要时。
jutyujz02#
@julienberubebnc ,感谢提出这个问题。这个方法确实有效，但也存在一些限制。
一旦构建完成，指定在.env.production或.env.local.production文件中的值就不能更改了。所以如果这些值被更改，那么应用程序就需要重新构建。
这种方法的问题：
6qqygrtg3#
CRA通常用于创建一个SPA(单页应用程序),这通常是相当静态的。这确实符合以下要求：
config.js的文件，该文件由服务器放置在那里。然后您的代码可以在执行其他代码之前执行简单的<script src='/config.js'></script>。这似乎满足了您的所有要求。正如@julienberubebnc所说，
.env是前进的方向。我发现它几乎涵盖了我曾经遇到的所有情况，而任何缺失的部分都将通过我上面提到的方法来处理。ep6jt1vc4#
嘿，@eddiemonge ,我同意CRA在构建整个应用程序和配置作为构件方面做得很好。然而，有很多项目正在将React应用程序推广到不同的质量水平，如开发、暂存、生产1、生产2等。
当许多项目有这种需求时，如果CRA能引导开发者这样做会很有帮助。
你能看一下下面的项目吗？
https://github.com/ZeroWasteTeam/SampleReact
这也将使容器化变得更加容易
gg0vcinb5#
这正是我所说的，所以我很困惑。你是反对这种方法还是认为这是应该这样做的？
mm9b1k5b6#
我不反对这种方法。然而，我认为CRA的方法可以得到改进。