使用额外的环境变量构建可配置的反应应用程序答案

【问题标题】：Building configurable react app with additional environment variable使用额外的环境变量构建可配置的反应应用程序
【发布时间】：2020-08-19 00:52:49
【问题描述】：

我正在构建一个有一些变化的应用程序。应用程序的核心是相同的，但现在，我需要以不同的方式开发应用程序的某些部分，例如另一种配色方案、不同的照片等。我的问题是：是否有可能通过 env 变量构建具有指定实例的应用程序？例如，我提供了一组照片，如下所示。

[{
  "photo1":{
     "path":"my_path_to_file1",
     "instanceToDeploy":"instanceABC"
  }
},
{
  "photo2":{
     "path":"my_path_to_file2",
     "instanceToDeploy":"instanceCBA"
  }
}]

现在，我想像这样构建我的应用程序

   npm run build instanceCBA

在此操作之后，我希望仅使用照片/构建命令中包含的任何内容构建应用程序版本。如果元素没有被标记 - 我还是想构建它们。有没有办法在 React 或类似的想法中做到这一点？我之前的尝试是在几个独立的分支上构建应用程序。当然，在不影响其他实例的情况下编写了独特的更改，但是在我编写必须在所有实例上的代码的情况下 - 我必须实现所有分支。我的主要愿望是构建一些可配置的元素，这些元素取决于我的应用程序中选择的实例。感谢所有可能的帮助。

【问题讨论】：

标签： javascript node.js reactjs npm

【解决方案1】：

有几种方法可以做到这一点：

#1（最简单的方法）如果您在项目中使用create-react-app 样板文件，则可以使用“.env”文件来设置环境变量。你可以在这里找到更多信息：https://create-react-app.dev/docs/adding-custom-environment-variables/

#2 您可以从您在package.json 文件中定义的scripts 传递参数。例如，假设您的 scripts 部分如下所示：

"scripts": {
   "build": "webpack --myInstance instanceCBA",
}

在这种情况下，在 webpack.config 文件中，您可以通过 process.argv 数组读取您的参数：

const instancePrefixInd = process.argv.indexOf('--myInstance');
let instance = '';
if (instancePrefixInd >= 0) {
    instance = process.argv[instancePrefixInd + 1];
}

然后您可以在 webpack.config 中使用此值来指定构建的详细信息或通过设置“process.env”变量（例如 process.env.MY_INSTANCE）将其直接传递给应用程序

【讨论】：