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），并且我在软件包中定义了一些脚本.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中的配置文件

2 个答案: