ice*_*y-t 7 environment node.js reactjs
我有一个我正在部署的react/node应用程序.其中一个组件尝试访问NODE_ENV以确定要使用的主机URL(localhost或heroku).
我现在意识到即使NODE_ENV被设置为生产,它在浏览器上下文中总是"未定义",因为环境不是节点.
由于我无法从反应组件访问NODE_ENV,如何动态设置主机服务器？
其中一个组件尝试访问 NODE_ENV 以确定要使用的主机 URL（localhost 或 heroku）。
是的，绝对！
在构建时和运行时使用东西是有区别的。您将NODE_ENV在构建时使用 - 比如说您运行webpack或构建一些 JSX 或其他任何东西。
NODE_ENV当用户访问您的网站时，您将不会在运行时使用。在该 Web 浏览上下文中没有环境变量的概念。
在这种情况下，我所做的是以编程方式创建一个文件，该文件将有条件地包含 Web 服务器 URL。或者甚至捕获该NODE_ENV值并将其放入应用程序中以备后用。
举一个实际的例子：在几年前我参与的一个 React 项目中，我们自动生成了 index.html 文件。这是一个愚蠢的小文件，引入了<script>我们需要的Javascript 标签，并<div>为 React 应用程序添加了一个要渲染的。在模板语言中，我们做了这样的事情：
索引.html.模板
<html><body ENVIRONMENT="$NODE_ENV"></body></html>
在该文件从我们构建管道的另一端出来后，我们的生产构建看起来像这样：
索引.html
<html><body ENVIRONMENT="PRODUCTION"></body></html>
然后我们只是使用普通的 DOM Javascript 来抓取 body 元素并检查属性（然后将它放在 Redux 存储中？我完全忘记了）。
在用户访问时，我们有一个明显的硬编码值“生产”。但你我更清楚！
更新：我忘了，实际上在 Webpack 本身中有两种方法可以做到这一点，而不使用外部模板工具并生成像我在这里描述的文件！
使用 WebPack 定义插件。这实际上将为您的转译阶段添加另一个步骤：进入并用其他一些文字字符串替换文字字符串的步骤。所以let e = "NODE_ENV"会变成let e = "production". 有一篇关于 defineplugin的很好的 Medium 博客文章，它很酷。
Webpack 本身有一些环境变量支持。显然，如果您使用webpack --env.NODE_ENV=production. 那么......也许你可以使用process.env.NODE_ENV？此功能的Webpack 文档对此并不十分清楚
NODE_ENV对于 API URL 等内容使用变量是一个很好的做法。
如果您使用create-react-app，则所有以 开头的环境变量REACT_APP_应该已经可以通过 访问process.env.REACT_APP_VARIABLE_NAME。那
你可以试试。REACT_APP_TEST=5 npm startconsole.log(process.env.REACT_APP_TEST)
如果您不使用create-react-app，则必须将它们导入到您的 webpack 配置中。
您还可以选择使用dotenvprocess.env通过文件定义应用程序的变量。.env
| 归档时间： |
|
| 查看次数： |
2310 次 |
| 最近记录： |