如何在cra(createreactapp)中的运行时传递环境或配置变量

Question

如何在cra(createreactapp(中的运行时传递环境或配置变量。我不想为不同的环境构建，而是在不同的环境中使用一个具有不同配置的构建

Answer 1

您可以将2个环境变量文件添加到项目的根目录中，用于开发和生产版本。它们应该被命名；

.env.development-这将使用npm启动(dev-stage(.env.production-这将用于构建(生产阶段(

可以如下添加属性，请注意前缀REACT_APP_

REACT_APP_PROPERTY1=some_value

这个属性可以读作，

<p>{process.env.REACT_APP_PROPERTY1}</p>

Answer 2

我们将create-react应用程序构建为静态网站，并将它们直接推送到一个简单的web服务器。这就是为什么不能在那里使用env变量的原因。我们找到了一个很好的解决方法，我们计划写一篇关于它的短文：

1.使用(一个(环境变量启动应用程序

让我们假设您有一个开发、阶段和生产环境，就像我们的大多数项目一样。

我们在启动脚本中只设置了一个ENV变量REACT_APP_ENV。每个环境都有自己的启动和构建脚本。

# package.json
# ...
"scripts": {
"start": "REACT_APP_ENV=development react-scripts start",
"start:staging": "REACT_APP_ENV=staging react-scripts start",
"start:prod": "REACT_APP_ENV=production react-scripts start",
"build:staging": "REACT_APP_ENV=staging react-scripts build",
"build:prod": "REACT_APP_ENV=production react-scripts build"
},

2.设置配置文件

在您的create-rect应用程序中，您将在src/config/index.js下存储一个配置文件。在这个配置文件中，您可以根据环境定义值。

# src/config/index.js
const env = process.env.REACT_APP_ENV
export const appConfig = {
api: {
networkInterface: ({
development: 'http://localhost:5000/graphql',
staging: 'https://project-staging.herokuapp.com/graphql',
production: 'https://project.herokuapp.com/graphql',
})[env],
// add more here
},
}
export default appConfig

3.用法

在应用程序中，您可以访问如下简单的配置：

import config from './src/config'
# usage
config.api.networkInterface 

Answer 3

几天前我也遇到了同样的问题，并找到了一个棘手但潜在的解决方案。基本上，您在/build/public目录中使用config.js。config.js可以是这样一个简单的代码：-

window.DYNAMIC_PROPERTIES = {
"ENV": "UAT",
"API_ENDPOINT": "UAT"
}

您希望这个特定的文件是动态生成的(基于您的环境(。如果你对我是如何做到这一点感兴趣，请一直读到最后。

现在，要在react应用程序中访问此脚本，请将此脚本包含在index.html(head标记(中。

<script src="%PUBLIC_URL%/configs.js"></script>

完成后，您应该能够像这样在应用程序中动态访问env变量。

const envValue = window.DYNAMIC_PROPERTIES.ENV
const apiEndpoint = window.DYNAMIC_PROPERTIES.API_ENDPOINT

这里的基本思想是HTML将在构建/公共文件夹中执行脚本。此脚本将属性附加到窗口作用域，并使它们可用于您的应用程序。

现在，做这一切的全部目的是能够动态地注入环境变量。以下是我如何做到的：-

我们使用nodejs(express(服务器来为UI提供服务，所以我设法在/build/public/文件夹中动态创建了这个简单的js文件。服务器的示例代码js:-

const path = require("path");
const express = require("express");
const fs = require('fs');
const app = express(); // create express app
fs.copyFile(`config.${process.env.ENVIRONMENT}.js`, "./build/config.js", (err) => {
if(err){console.log("Something went wrong while setting env variables", err)}
else{console.log("Env variables set for ",process.env.ENVIRONMENT )}
}); 
// add middlewares
app.use(express.static(path.join(__dirname, ".", "build")));
app.use(express.static("public"));
app.use((req, res, next) => {
res.sendFile(path.join(__dirname, ".", "build", "index.html"));
});
// start express server on port 5000
app.listen(5000, () => {
console.log("server started on port 5000");
});

基本上，我有单独的配置文件，比如config.dev.js、config.uat.js等等；"环境"；作为dev或uat或prod，此节点服务器将在应用程序启动时在build/public中放置正确的配置文件(请注意fs.copyFile命令(。

好的，希望这能有所帮助。如果你找到了更好的方法，一定要评论你的解决方案。