[英]ReactJS + Environment Variables
只是另一个反应问题。 我想在全局存储一些URL信息,并按环境(开发,生产等)划分。
在网上搜索,通常的方法是反应自然支持的.env文件。
我创建了一个.env和一个.env.development,所以第一个是生产,第二个是开发文件。
在文件中,我把我的配置如下:
# .env.development
REACT_APP_TEST=newyork
我尝试用以下方法打印值:
console.log(process.env);
console.log(process.env.REACT_APP_TEST);
我得到的是:
Object
NODE_ENV:"development"
PUBLIC_URL:""
第二个是未定义的。
问题出在哪儿?
如果您使用的是create-react-app,则需要更新env.js
以在构建中包含新的环境变量。
函数getClientEnvironment(publicUrl)
设置注入构建的环境变量供您使用。 在这里,您可以添加自定义env变量,如下所示:
{
// Useful for determining whether we’re running in production mode.
// Most importantly, it switches React into the correct mode.
NODE_ENV: process.env.NODE_ENV || 'development',
// Useful for resolving the correct path to static assets in `public`.
// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
// This should only be used as an escape hatch. Normally you would put
// images into the `src` and `import` them in code to get their paths.
PUBLIC_URL: publicUrl,
CUSTOM: process.env.CUSTOM || 'fallback'
}
更新:
如果您不使用CRA,则可以使用webpack DefinePlugin执行相同的操作。
更新2:
@DimitarChristoff指出你应该使用REACT_APP_*
格式来声明env变量。 如果您使用REACT_APP_
前缀您的env变量,CRA将自动获取它并将其添加到Webpack DefinePlugin:
// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
// injected into the application via DefinePlugin in Webpack configuration.
const REACT_APP = /^REACT_APP_/i;
它比预期的更简单。 .env文件必须放在项目的根目录中而不是SRC文件夹中。
就这样!
在一般的Webpack案例中,您可以使用webpack的DefinePlugin
来定义可在app上访问的变量。
在CRA(Create-React-App)中,您可以在env.js
文件中添加环境变量。
使用env.js
与创建自己的config.js
文件相同,在该文件中使用process.env
创建配置变量或使用默认值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.