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

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 文件定义开发环境变量。

Link: 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

Read different .env configs according to current command (start / test / build). dev.env for start and test. prod.env for build. If custom config does not exist — read env variables from .env file. Blockquote

您将知道哪个 .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 上的 link：https://medium.com/@tuchk4/why-i-love-create-react-app-e63b1be689a3

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

Target certain environments based on console input

node.js

reactjs

webpack

yarnpkg