如何在Express，React，Webpack，SSR应用程序中共享客户端和服务器之间的常量

Question

在执行通用的，服务器端呈现的Javascript Web应用程序时，如何在客户端和服务器之间共享公共常量？

Answer 1

使用Webpack＆＃39; 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文件中

Answer 3

这是一个非常模糊的问题，但您可以使用define plugin：

在webpack配置中使用Define Plugin。

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