同构反应中的实时环境变量

Question

我已经在这个回购中基于入门套件松散地构建了一个同构的React应用程序.它使用webpack来构建生产代码.

事实上,我需要将服务器上的一些环境变量的值暴露给浏览器中的客户端代码,而无需重建生产代码.我希望能够更改env变量的值,并让它在下一页刷新客户端的效果,而不必重建任何东西.我不想让测试复杂化.

我找到了一些解决方案,其中没有一个很好:

1. 使用DefinePlugin for webpack将某些环境变量的值硬编码到生产代码中.类似于此处概述的内容
2. 构建API只是为了将env变量拉入客户端.
3. 编写一个特殊的.js文件,该文件位于webpack系统之外.此文件将被模板化,以便在将其提供给客户端之前进行修改.可能要求env变量值存储在'window'或其他东西上的特殊全局变量中.

这些方法的问题:

1. 被拒绝.这不符合我的要求.如果我更改env变量的值,我需要重建代码.
2. 不必要的复杂.我不需要这个API用于其他任何事情.一个完整的API只是为了提供很少改变的2或3个值？需要复杂性来确保在加载时从API ASAP中提取值.
3. 最近,但有点粗糙.如果我可以避免它,我真的不想去webpack/React/Flux系统之外.在窗口对象上创建特殊的全局变量会起作用,但会为测试使用这些全局变量的组件/存储/操作带来复杂性.

我过去做过2和3,从来没有真正满足这些解决方案.

有什么建议？这似乎应该是一个常见/解决的问题.也许我只是在思考它,3是要走的路.

Answer 1

所以我想出的解决方案相当简单。我只是编写了一行 JavaScript 将值保存到脚本标记内的本地存储中。然后在应用程序启动时从我的通量存储中读取本地存储。

这是添加到index.html的相关标签：

<script type="text/javascript"><%= config %></script>

这是我在提供服务之前使用模板将其拼接到 index.html 中的字符串：

let configJs = 'localStorage.setItem(\'ADMIN_API\', JSON.stringify(\'' + process.env.ADMIN_API + '/v3/' + '\'));';
const html = template({config: configJs});
res.status(200).send(html);

然后，应用程序启动后，我就用这个来阅读它：

import ls from 'local-storage';
....
let api = ls.get('ADMIN_API');