如何解决使用其他环境变量构建可配置的React应用
我正在构建一个具有一些变体的应用程序。应用程序的核心是相同的,但就目前而言,我需要以不同的方式开发应用程序的某些部分,例如另一种配色方案,不同的照片等。 我的问题是:是否可以通过env变量使用指定的实例构建应用程序?例如,我提供的照片如下。
[{
"photo1":{
"path":"my_path_to_file1","instanceToDeploy":"instanceABC"
}
},{
"photo2":{
"path":"my_path_to_file2","instanceToDeploy":"instanceCBA"
}
}]
现在,我想构建自己的应用程序
npm run build instanceCBA
完成此操作后,我只想使用照片/将要包含在build命令中的任何内容获取应用程序的构建版本。 如果元素未标记-我仍然想构建它们。 有什么办法可以在React或类似的想法中做到这一点? 我之前的尝试是在几个独立的分支上构建应用程序。当然,唯一的更改是在不影响其他实例的情况下编写的,但是在我编写了必须在所有实例上的代码的情况下-我必须实现所有分支。 我的主要愿望是构建一些可配置的元素,这些元素取决于我的应用程序中选择的实例。 感谢所有可能的帮助。
解决方法
有几种选择方法:
#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
)将其直接传递给应用程序
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。