javascript - 同构 React 中的实时环境变量

Question

我基于 this repo 中的初学者工具包构建了一个同构 React 应用程序.它使用 webpack 构建生产代码。

问题是，我需要将服务器上的一些环境变量的值暴露给浏览器中的客户端代码，而无需重建生产代码。我希望能够更改 env vars 的值，并让它在下一页刷新时影响客户端，而无需重建任何东西。而且我不想为了做到这一点而使测试复杂化。

我找到了一些解决方案，但都不是很好:

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

这些方法的问题:

1. 拒绝。这只是不做我想要的。如果更改环境变量的值，则需要重新构建代码。
2. 不必要的复杂。我不需要这个 API 来做任何其他事情。一个完整的 API 只是为了提供 2 或 3 个很少改变的值？需要复杂性来确保在加载时尽快从 API 中提取值。
3. 最接近，但有点恶心。如果可以避免，我真的不想走出 webpack/React/Flux 系统。在窗口对象上创建特殊的全局变量是可行的，但会增加测试使用这些全局变量的组件/存储/操作的复杂性。

我过去做过 2 和 3，但从未对这些解决方案在智力上真正满意。

有什么建议吗？看起来这应该是一个常见/已解决的问题。也许我只是想得太多了，3 是可行的方法。

Answer 1

样板使用 express，你可以使用 express 的本地将服务器环境变量暴露给客户端。

var serverVariable = 'this is a server variable'
app.get('/somelink', function (req, res, next) {
    res.locals.data = {
      FluxStore: { serverlocal: serverVariable  }
   }
   next()
})

然后您通过 React.renderToString 传递本地，这将由客户端上的 FluxStore 选择。另一种方法，您可以使用像 falcor 这样的数据获取 api，它可以通过 falcor-http-datasource 由客户端 Action Store 选择，您不需要使用 falcor-express 和 falcor-router 构建它的 falcor express local