如何在Express，React，Webpack，SSR應用程序中的客戶端和服務器之間共享常量

Question

在執行通用的服務器端呈現的Javascript Web應用程序時，如何在客戶端和服務器之間共享公共常量？

Answer 1

使用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是一個雷區。

Answer 2

您可以將它們設置為環境變量-可以在后端無問題地訪問它們，也可以使用webpack.DefinePlugin將它們注入客戶端js文件中webpack.DefinePlugin

Answer 3

這是一個非常模糊的問題，但是您可以使用define插件：

在Webpack配置中使用Define Plugin。

   plugins: [new webpack.DefinePlugin({__SERVER_RENDERING__: false})]