Node.js 基于控制台输入以特定环境为目标

Node.js 基于控制台输入以特定环境为目标,node.js,reactjs,webpack,yarnpkg,Node.js,Reactjs,Webpack,Yarnpkg,为了回答这个问题,我使用了一个弹出的create-react-app,用于我的项目布局 我有5个应用程序将要部署到的环境。每个环境都有相同的服务集(大部分),例如,其中一个可能看起来像: //environment 1 https://environment1.service1.foo.bar https://environment1.service2.foo.bar //environment 2 https://environment2.service1.foo.bar https://e

为了回答这个问题,我使用了一个弹出的
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));
});
基本上指向正确的文件,其中包含正确的端点以及与该环境相关的其他相关变量

我的问题是,如果我使用
createreact app
作为起点,那么网页和节点脚本,我将如何完成这样的任务。基本上,我希望能够说
warn build env1
,然后项目将常量或常量文件设置为“活动”常量。

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

链接:

.env:

.环境生产:

根据当前命令(启动/测试/构建)读取不同的.env配置。dev.env用于启动和测试。用于生成的prod.env。如果自定义配置不存在 — 从.env文件中读取环境变量。 大宗报价

您将知道启动项目命令将使用哪个.env文件

在脚本对象下的
package.json
文件中应该有类似的内容:
“启动js”:“反应脚本启动”,
“开始”:“npm运行所有-p观察css开始js”,
“构建”:“npm运行构建css和反应脚本构建”,
然后可以使用指定的命令启动项目。从文档中可以看出,左侧的文件比右侧的文件具有更高的优先级:

npm开始:.env.development.local、.env.development、.env.local、.env
npm运行生成:.env.production.local、.env.production、.env.local、.env
npm测试:.env.test.local、.env.test、.env(注意:缺少.env.local)

例如,如果从
npm run build
开始,您将能够访问
.env.production
文件中定义的变量

在JavaScript代码中,可以使用process.env.REACT\u APP\u API\u HOST


另外,请参阅media.com上的链接:

好的,这是有道理的。因此,我真正关心的是,我想说一些类似于
纱线构建生产
的话,并以该环境为目标。我的api调用包括其中的环境(不是
production.blah.com
,而是想想
east.myapp.com/service
),无论环境是什么,所有api调用都需要在url中包含特定于环境的字符串。那么,我怎样才能让它通过应用程序扩散到一个我可以为服务调用剔除基本uri的地方呢?你可以创建不同的
.env
文件,为每个环境定义一个定义。然后创建config文件,在其中可以存储.env变量的别名,然后在服务中使用它。根据您的npm start/test/build命令,将创建不同的.env文件,并且您将能够访问声明的变量。我仍然无法定位特定文件@TariqN。我知道您需要创建不同的
.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
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