gpt4 book ai didi

node.js - 在前端代码中访问 NODE_ENV 是否有意义?

转载 作者:搜寻专家 更新时间:2023-10-31 22:23:43 24 4
gpt4 key购买 nike

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

我现在意识到,即使 NODE_ENV 被设置为生产环境,它在浏览器上下文中始终是“未定义”的,因为环境不是 Node 。

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

最佳答案

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 浏览上下文中没有环境变量的概念。

在这种情况下,我所做的是以编程方式创建一个文件,该文件将有条件地具有网络服务器 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 存储中?我忘记了)。

在用户访问时,我们有一个明显的硬编码值“production”。但你我都知道!

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

  1. 使用 WebPack 定义插件。这实际上会为您的转译阶段添加另一个步骤:进入并用其他一些文字字符串替换文字字符串。所以let e = "NODE_ENV"会变成let e = "production" .有一个 good Medium blog post about defineplugin ,这有点酷。

  2. Webpack 本身有一些环境变量支持。显然,如果你用 webpack --env.NODE_ENV=production 运行 webpack .那么...也许你可以使用process.env.NODE_ENVWebpack documentation for this feature对此不是很清楚

关于node.js - 在前端代码中访问 NODE_ENV 是否有意义?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50244473/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com