同构反应中的活环境变量
我在这个回购中构建了一个基于初学者工具包的同构反应应用程序。它使用webpack来构建生产代码。
问题是，我需要将服务器上的几个环境变量的值公开给浏览器中的客户端代码，而无需重新生成生成代码。我希望能够更改env的值，并使它与客户端在下一页刷新时的效果相同，而无需重新构建任何内容。我不想为了做这件事而把测试复杂化。
我找到了一些解决方案，其中没有一个是很好的：
- 使用DefinePlugin对webpack进行硬编码，将某些环境变量的值转化为生产代码.类似于概述的这里
- 构建一个API，只为了将env变量拉到客户机中。
- 编写一个特殊的.js文件，该文件位于webpack系统之外。该文件将被模板化，以便在提供给客户端之前对其进行修改。可能要求env变量值存储在“窗口”或其他特定的全局变量中。
这些方法的问题：
- 被拒绝。这做不到我想做的。如果更改env变量的值，则需要重新构建代码。
- 不必要的复杂。我不需要这个API来做任何其他的事情。一个完整的API只是为了提供很少改变的2或3个值？需要复杂性以确保在加载时尽快从API中提取值。
- 最近，但有点恶心。我真的不想离开webpack/React/Flux系统，如果我能避免它的话。在窗口对象上创建特殊的全局变量是可行的，但会给测试使用这些全局变量的组件/存储/操作带来复杂性。
我过去做过第2和第3课，但在智力上从来没有对这些解决方案感到满意。
有什么建议吗？看来这应该是一个常见的/解决的问题。也许我只是想得太多了，第三条路要走了。
回答 3
Stack Overflow用户
发布于 2015-09-28 17:07:32
所以我想出的解决方案很简单。我只需编写一行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');Stack Overflow用户
发布于 2015-09-25 12:48:52
锅炉板使用express，您可以使用express‘local向客户端公开服务器env变量。
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-数据源由客户端操作库来选择，您不需要为falcor本地快递，您可以使用falcor-express和falcor-路由器构建它。
Stack Overflow用户
发布于 2017-01-20 00:58:46
这使用window中的一个窗口全局变量来传递值，但是给您一个通用的接口来访问浏览器和节点上的值。
在publicEnv.js中
// Env variable to push to the client. Careful on what you put here!
const publicEnv = [
'API_URL',
'FACEBOOK_APP_ID',
'GA_ID'
];
// These 2 lines make sure we pick the value in the right place on node and the browser
const isBrowser = typeof window !== 'undefined';
const base = (isBrowser ? window.__ENV__ : process.env) || {};
const env = {};
for (const v of publicEnv) {
env[v] = base[v];
}
export default env;在页面的HTML模板文件中，我有：
import publicEnv from 'publicEnv.js';
...
<script>
window.__ENV__ = ${stringify(publicEnv)};
// Other things you need here...
window.__INITIAL_STATE__ = ${stringify(initialState)};
</script>因此，现在我可以在前端和后端获得env变量的值：
import publicEnv from 'publicEnv.js';
...
console.log("Google Analytic code is", publicEnv.GA_ID);希望能帮上忙。
https://stackoverflow.com/questions/32773850
复制相似问题
腾讯云开发者
