React 中的配置文件

Question

我正在尝试弄清楚如何运行具有不同配置文件的 React 应用程序（通过 create-react-app 创建）。

也就是说，假设我有多个环境（本地、开发、生产）并且我有一个引用后端（部署在另一台服务器上）的提取。

后端对于每个环境都有自己的地址。我需要以某种方式为不同的启动设置全局变量。

例如，在 Springboot 中，这可以通过 application-"profile".properties.

完成

我运行应用程序通过 npm install -g serve & serve -s build。怎么做？

Answer 1

使用 create-react-app 时，您可以使用环境变量配置您的应用程序。

这里的文档中有详细解释：https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables

所有环境变量都需要加上REACT_APP_前缀。

您可以使用 .env 文件定义具有不同环境变量的配置文件。

例如，要在生产环境中设置 API URL，请创建一个包含以下内容的文件 .env.production：

REACT_APP_API_URL=https://my.beautiful.api/

…默认情况下（对于本地开发），创建一个文件 .env:

REACT_APP_API_URL=http://localhost:3001/

当您使用 npm run build

.env.production

当您使用 npm start

.env

在应用代码中使用环境变量的示例：

fetch(process.env.REACT_APP_API_URL)
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
});

Answer 2

我处理这种情况的方法是使用包 react-native-config 并且我创建了 .env 文件 (.env.dev, .env.staging, .env.prod) 和我在 package.json 中定义了一些脚本。不过，我正在使用 react-native init 项目。如下

"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "postinstall": "sed -i '' 's/#import <RCTAnimation\/RCTValueAnimatedNode.h>/#import \"RCTValueAnimatedNode.h\"/' ./node_modules/react-native/Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.h",
    "clean": "cd android && gradlew clean",
    "feature": "node scripts/createfeature.js",
    "component": "node scripts/createcomponent.js",
    "android": "cd android && gradlew app:assembleDebug && gradlew installDebug",
    "storybook": "storybook start -p 7007",
    "prestorybook": "rnstl",
    "android-dev": "SET ENVFILE=.env.dev && react-native run-android",
    "android-staging": "SET ENVFILE=.env.staging && react-native run-android",
    "android-prod": "SET ENVFILE=.env.prod && react-native run-android",
    "ios-dev": "ENVFILE=.env.dev react-native run-ios",
    "ios-staging": "ENVFILE=.env.staging react-native run-ios",
    "ios-prod": "ENVFILE=.env.prod react-native run-ios",
    "build-android-prod": "SET ENVFILE=.env.prod && cd android && gradlew assembleRelease"
  },

React 中的配置文件

Profiles in React

reactjs

create-react-app