访问 NODE_ENV 在前端代码中有意义吗？

Question

我有一个正在部署的 react/node 应用程序。其中一个组件尝试访问 NODE_ENV 以确定要使用哪个主机 URL（localhost 或 heroku）。

我现在意识到即使 NODE_ENV 被设置为生产环境，它在浏览器上下文中始终是 'undefined'，因为环境不是节点。

由于我无法从我的 React 组件访问 NODE_ENV，我该如何动态设置主机服务器？

Answer 1

对 API URL.

这样的事情使用 NODE_ENV 变量是个好习惯

如果您使用 create-react-app，所有以 REACT_APP_ 开头的环境变量应该已经可以通过 process.env.REACT_APP_VARIABLE_NAME 访问。
您可以尝试 REACT_APP_TEST=5 npm start 然后 console.log(process.env.REACT_APP_TEST).

如果你没有使用 create-react-app，你必须在你的 webpack 配置中导入它们。

您还可以选择使用 dotenv.

通过 .env 文件为应用程序定义 process.env 变量

Answer 2

我认为您误解了这里的范围。 Node 是一个 javascript 运行时，它作为服务器运行以处理后端内容。 NODE_ENV是node中用来设置环境变量的变量，因此只能在node环境中访问，不能在客户端访问。

无论如何，首先，您没有理由想要将您的配置变量暴露给您的客户端（这是一个漏洞问题）。如果它与某些依赖于您的服务器端变量的配置有关，您必须在客户端独立设置它。我可以想象的一个用例是定义套接字主机和端口以从客户端侦听服务器端。希望一切都解决了:)

想象一下生命周期：

客户请求
节点服务器处理并响应请求
响应通过浏览器提供

Answer 3

One of the components attempts to access NODE_ENV in order to determine which host URL to use (localhost or heroku).

是的，绝对！

在构建时和运行时有一些东西是有区别的。在构建时你会有 NODE_ENV - 比如说你运行 webpack 或者构建一些 JSX 的东西，或者其他什么。

当用户访问您的网站时，您不会在运行时出现 NODE_ENV。在该 Web 浏览上下文中没有环境变量的概念。

我在这种情况下所做的是以编程方式创建一个文件，该文件将有条件地拥有 Web 服务器 URL。或者甚至捕获 NODE_ENV 并将值放入应用程序中以备后用。

作为一个实际的例子：在我几年前的一个 React 项目中，我们自动生成了 index.html 文件。这是一个愚蠢的小文件，引入了我们需要的 <script> Javascript 标签，并添加了 <div> 以便 React 应用程序呈现。在模板语言中，我们做了这样的事情：

index.html.templ

<html><body ENVIRONMENT="$NODE_ENV"></body></html>

在该文件从构建管道的另一端出来后，我们的生产构建看起来像这样：

index.html

<html><body ENVIRONMENT="PRODUCTION"></body></html>

然后我们就用普通的DOM Javascript抓取body元素并检查属性（然后放到Redux store中？具体忘记了）

在用户访问时，我们有一个明显的硬编码值 "production"。但你我更清楚！

更新：我忘了，实际上有两种方法可以做到这一点 在 Webpack 本身 中，无需使用外部模板工具并生成文件就像我在这里描述的那样！

使用 WebPack 定义插件。这实际上会为您的转译阶段添加另一个步骤：进入并用其他一些文字字符串替换文字字符串。所以 let e = "NODE_ENV" 会变成 let e = "production"。有一个good Medium blog post about defineplugin，有点酷
Webpack 本身有一些环境变量支持。显然，如果你运行带有 webpack --env.NODE_ENV=production 的 webpack。那么......也许你可以使用 process.env.NODE_ENV ？ Webpack documentation for this feature 在这个

Answer 4

您可以使用以下方法检查 index.html 中的 NODE_ENV：

if ("%NODE_ENV%" === "production") {
  // ...do production stuff
} else {
  // ...do development stuff
}

在生产环境中编译 index.html 时，它看起来像这样

if ("production" === "production") {
  // ...do production stuff
} else {
  // ...do development stuff
}

访问 NODE_ENV 在前端代码中有意义吗？

Does accessing NODE_ENV make sense in front end code?

environment

node.js

reactjs