羡慕客户端库有什么意义？

Question

为了解决来自 Redux 的警告背后的问题，我偶然发现了 the advice，它解释说，在使用 React 或 Redux 时，为了生成针对生产使用而优化的构建，envifying 是必要的步骤。 Envifying 被解释为将特定于节点的环境变量（例如 process.env.NODE_ENV）替换为实际值（例如 'production'）的过程。

接受 envifying 是必要的并且上述解释是正确的，这让我感到困惑，因为它似乎假设客户端库（如 React 和 Redux）将包含节点特定的环境变量。是的，我知道这些库特别适用于构建同构/通用 JavaScript 应用程序，但会令人惊讶。我理解正确吗？如果是这样，我需要注意在节点之外在何处使用 process.env.NODE_ENV 的模式的解释？

如果我正确理解该建议，则建议如果我使用 Webpack，我可能想要使用诸如 DefinePlugin 之类的插件。

  new webpack.DefinePlugin({
    "process.env.NODE_ENV": process.env.NODE_ENV,
  }),

这似乎还需要我将 NODE_ENV 变量设置为我想为我的客户端代码生成的构建的目标环境。这很奇怪，因为我在构建服务器上设置了一个环境变量，以反映实际代码在部署到的服务器上运行的环境应该是什么。

所有这一切让我觉得我在一般模式方面遗漏了一些东西。

相关信息：

• https://github.com/reactjs/redux/issues/1029
• https://github.com/reactjs/redux/issues/1298

Answer 1

您也可以拥有网络应用程序的生产和开发版本/条件！正如您所提到的，许多同构 JS 框架都使用了它。

envify 以两种主要方式帮助使用process.env 的代码

1. 无需 shim 来支持它 - Browserify 有一个自动的，大约 2kb 的时钟，这很重要。
2. 更好地缩小代码- 当代码变成if ("development" === "production") 之类的东西时，一个好的缩小器可以将其完全删除

请记住，Webpack 就是要转换您的（通常是客户端）代码。添加一些东西以查找-替换process.env 的所有实例完全在其用例范围内，并且允许您在不引入新 API 的情况下创建基于环境的行为。在你的webpack.config 中设置它的值与在你的操作系统上设置一个环境变量没有什么不同。