Question

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

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

现在，我想构建自己的应用程序

   npm run build instanceCBA

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

Answer 1

有几种选择方法：

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

＃2 您可以从scripts文件中定义的package.json传递参数。例如，假设您的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）将其直接传递给应用程序

使用其他环境变量构建可配置的React应用

1 个答案: