同构反应中的活环境变量
同构反应中的活环境变量
提问于 2015-09-25 02:28:28
我在这个回购中构建了一个基于初学者工具包的同构反应应用程序。它使用webpack来构建生产代码。
问题是，我需要将服务器上的几个环境变量的值公开给浏览器中的客户端代码，而无需重新生成生成代码。我希望能够更改env的值，并使它与客户端在下一页刷新时的效果相同，而无需重新构建任何内容。我不想为了做这件事而把测试复杂化。
我找到了一些解决方案，其中没有一个是很好的：
- 使用DefinePlugin对webpack进行硬编码，将某些环境变量的值转化为生产代码.类似于概述的这里
- 构建一个API，只为了将env变量拉到客户机中。
- 编写一个特殊的.js文件，该文件位于webpack系统之外。该文件将被模板化，以便在提供给客户端之前对其进行修改。可能要求env变量值存储在“窗口”或其他特定的全局变量中。
这些方法的问题：
- 被拒绝。这做不到我想做的。如果更改env变量的值，则需要重新构建代码。
- 不必要的复杂。我不需要这个API来做任何其他的事情。一个完整的API只是为了提供很少改变的2或3个值？需要复杂性以确保在加载时尽快从API中提取值。
- 最近，但有点恶心。我真的不想离开webpack/React/Flux系统，如果我能避免它的话。在窗口对象上创建特殊的全局变量是可行的，但会给测试使用这些全局变量的组件/存储/操作带来复杂性。
我过去做过第2和第3课，但在智力上从来没有对这些解决方案感到满意。
有什么建议吗？看来这应该是一个常见的/解决的问题。也许我只是想得太多了，第三条路要走了。
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);希望能帮上忙。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32773850
复制相关文章
相似问题
腾讯云开发者
