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，然后项目将常量或常量文件设置为＆＃39; active`常量可以这么说。

Answer 1

如果您正在使用＆＃34; Create-react-app＆＃34;然后，您就可以通过不同的.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

根据当前命令（start / test / build）读取不同的.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

根据控制台输入定位某些环境

1 个答案: