根据控制台输入定位特定环境

Question

作为问题的序言，我正在使用弹出的create-react-app 进行项目布局。

我的应用程序要部署到 5 个环境。每个环境都有相同的服务集（大部分），例如一个可能看起来像：

//environment 1
https://environment1.service1.foo.bar
https://environment1.service2.foo.bar

//environment 2
https://environment2.service1.foo.bar
https://environment2.service2.foo.bar

为了在过去的项目（Angular/Gulp）中实现这一点，我有一个 gulp 任务，它本质上是寻找传入的变量

gulp build --environment environment1

执行此操作的代码如下所示：

gulp.task('environment', ['clean-environment'], function() {
  log('Copying environment');
  var environmentFile = config.environmentSrcDir + 'env2.js';
  if (args.environment !== 'env2' ||
    args.environment === 'env3' ||
    args.environment === 'env4' ||
    args.environment === 'evn5') {
    environmentFile = config.environmentSrcDir + args.environment + '.js';
  }
  return gulp
    .src(environmentFile)
    .pipe(rename(config.environmentService))
    .pipe(gulp.dest(config.root));
});

并且基本上指向正确的文件，其中包含正确的端点以及与该环境相关的其他相关变量。

我的问题是，鉴于我使用create-react-app 作为起点，所以 webpack 和节点脚本，我将如何完成这样的事情。基本上我希望能够说yarn build env1 然后项目将常量或常量文件设置为“活动”常量。

Answer 1

如果您使用“Create-react-app”，那么您可以通过不同的 .env 文件定义开发环境变量。

链接：https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env

.env:

REACT_APP_GOOGLE_CLIENT_ID = XXX-YYY-ZZZ.apps.googleusercontent.com
REACT_APP_API_PROTOCOL = http:
REACT_APP_API_HOST = localhost:3000
NODE_PATH = src/scripts
PORT = 9001

.env.production：

REACT_APP_GOOGLE_CLIENT_ID = ZZZ-YYY-XXX.apps.googleusercontent.com
REACT_APP_API_PROTOCOL = https:
REACT_APP_API_HOST = api.my-applicaton.com
NODE_PATH = src/scripts

根据当前命令（启动/测试/构建）读取不同的 .env 配置。 dev.env 用于启动和测试。 prod.env 用于构建。如果自定义配置不存在 — 从 .env 文件中读取 env 变量。 块引用

您将告诉您的启动项目命令将使用哪个 .env 文件。

您的脚本对象下的package.json 文件中应该有这样的内容： "start-js": "react-scripts start", "start": "npm-run-all -p watch-css start-js", "build": "npm run build-css && react-scripts build", 然后您可以使用指定的命令启动您的项目。从文档来看，左侧文件的优先级高于右侧文件：

npm start: .env.development.local, .env.development, .env.local, .env npm run build: .env.production.local, .env.production, .env.local, .env npm test: .env.test.local, .env.test, .env (note .env.local is missing)

例如，如果您以npm run build 开头，您将能够访问.env.production 文件中定义的变量。

在 JavaScript 代码中，您可以使用 process.env.REACT_APP_API_HOST。

另外，请参阅 medium.com 上的此链接：https://medium.com/@tuchk4/why-i-love-create-react-app-e63b1be689a3