![](/img/trans.png)
[英]how to share environment variables between react app and express js server hosting it as static site
[英]How to share constants between client and server in Express, React, Webpack, SSR app
在執行通用的服務器端呈現的Javascript Web應用程序時,如何在客戶端和服務器之間共享公共常量?
使用Webpack的DefinePlugin
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify("5fa3b9"),
})
請注意,此插件會將這些值從字面上注入到頁面中。 這意味着如果您執行以下操作:
new webpack.DefinePlugin({ FOO: "BAR" });
然后,Webpack將從字面上插入:
var FOO = BAR;
這將出錯,因為裸字符串BAR
看起來像一個不存在的變量。 這就是為什么該示例顯示了大多數包裝在JSON.stringify中的東西的原因,它返回帶引號的值,因此插入
new webpack.DefinePlugin({ FOO: JSON.stringify("BAR") });
將正確插入:
var FOO = "BAR";
是的,這是很糟糕的設計。 Webpack的API是一個雷區。
您可以將它們設置為環境變量-可以在后端無問題地訪問它們,也可以使用webpack.DefinePlugin
將它們注入客戶端js文件中webpack.DefinePlugin
這是一個非常模糊的問題,但是您可以使用define插件:
在Webpack配置中使用Define Plugin。
plugins: [new webpack.DefinePlugin({__SERVER_RENDERING__: false})]
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.