一种react脚手架动态配置实现方法及系统与流程

专利2025-12-30  10


本发明涉及计算机,具体涉及一种react脚手架动态代理实现方法。


背景技术:

1、react是一种前端开发框架,其提供的脚手架工具能够帮助用户快速生成项目的工程化结构。在前端服务器与后台联调接口的业务场景中,为了解决本机调用后台服务器接口的跨域问题,业内通常会在脚手架本地增加一个代理配置,从而实现对后台服务器的跨域访问。目前,常见的代理配置方式主要有以下几种:

2、1、如图1所示,使用默认配置src/setupproxy.js代理。但是,当一个前端与多名后台联调时就需要切换连接的服务器域名,修改代理配置,按照react脚手架的机制,每当修改代理配置时就需要重启服务器才能使代理配置生效,大量重启工程会耗费很多时间。

3、2、如图2所示,在本地安装nginx服务器做为中转代理服务器。这种方式中,使用nginx再中转一层,node服务器只需要访问本地的nginx服务器即可,因为nginx服务器重启不用编译前端文件,所以重启会快很多,但仍然是需要重启的。此外,使用nginx服务器会产生一个副作用:热更新会失效,另外nginx的配置语言对于前端人员来说可能需要额外的学习成本。

4、3、使用webpack.devserver.config.js做动态代理,然而,该方案需要在react脚手架里运行或者用户自行重新构建一个脚手架才能使用。但是这样的方法对react脚手架的默认配置侵入性太强,导致一旦react官方脚手架升级,该方法就无法使用。

5、4、专利cn115242874a提供一种应用开发阶段的网络请求代理优化方法,该方法使用流量拦截插件(比如switchyomega等),拦截流量再转发到服务器上,这样做需要开发人员装一个插件,这些插件,大多需要翻墙,并且这些流量拦截插件功能弱小,只能转发资源,其它配置功能则无法实现,比如自动cookie登录等,并没有真正意义上做到动态服务器配置。

6、综上所述,现有的前端服务器动态配置方法主要存在以下问题:

7、1、需要重启:修改代理配置,需要重启。

8、2、代码过于耦合:在服务器中修改代码,导致脚手脚一升级就要重写代码。

9、3、学习成本高:配置过于复杂。

10、4、功能弱小:只能做到资源转发,并没有真正意义上的前端服务器动态配置。


技术实现思路

1、发明目的:本发明旨在提出一种react脚手架动态配置实现方法及系统,以至少部分地克服上述现有技术的技术缺陷。

2、
技术实现要素:
为实现上述目的,本发明第一方面提供了一种react脚手架动态配置实现方法,该方法包括步骤:

3、在react脚手架中构建动态的网络配置文件;

4、将所述网络配置文件挂载到网络上;

5、在react项目中引入预先构建的动态配置工具,通过所述动态配置工具监听用户对所述网络配置文件的修改操作,并读取修改后的所述网络配置文件中的配置信息;

6、通过预设的触发事件触发前端服务器根据所述动态配置工具读取到的配置信息更新网络配置,并启用更新后的网络配置。

7、作为第一方面所述方法的一种可选实施方式,将所述网络配置文件挂载到网络上,具体包括:

8、将所述网络配置文件投射到本地资源库中,以使用户能够基于所述网络配置文件的网址访问并修改所述网络配置文件。

9、作为第一方面所述方法的一种可选实施方式,通过所述动态配置工具监听用户对所述网络配置文件的修改操作,并读取修改后的所述网络配置文件中的配置信息,具体包括:

10、通过所述动态配置工具监听用户对所述网络配置文件的网址的访问事件;

11、响应于所述访问事件,通过所述动态配置工具重新读取所述网络配置文件中的配置信息。

12、作为第一方面所述方法的一种可选实施方式,所述触发事件为用户通过浏览器对所述前端服务器发起的刷新请求。

13、第二方面,提供了一种react脚手架动态配置实现系统,该系统包括:

14、网络配置模块,用于在react脚手架中构建动态的网络配置文件,并将所述网络配置文件挂载到网络上;

15、动态配置工具,用于监听用户对所述网络配置文件的修改操作,并读取修改后的所述网络配置文件中的配置信息;

16、前端服务器,用于响应于预设的触发事件,根据所述动态配置工具读取到的配置信息更新网络配置,并启用更新后的网络配置。

17、作为第二方面所述系统的一种可选实施方式,所述网络配置模块具体用于将所述网络配置文件投射到本地资源库中,以使用户能够基于所述网络配置文件的网址访问并修改所述网络配置文件。

18、作为第二方面所述系统的一种可选实施方式,所述动态配置工具包括监听组件和更新组件;

19、所述监听组件用于监听用户对所述网络配置文件的网址的访问事件;

20、所述更新组件用于响应于所述访问事件,重新读取所述网络配置文件中的配置信息。

21、作为第二方面所述系统的一种可选实施方式,所述触发事件为用户通过浏览器对所述前端服务器发起的刷新请求。

22、第三方面,提供了一种计算机可读存储介质,所述存储介质存储有计算机程序,所述计算机程序被处理器执行时实现上述的react脚手架动态配置实现方法。

23、第四方面,提供了一种电子设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,所述处理器执行所述程序时实现上述的react脚手架动态配置实现方法。

24、有益效果:与现有技术相比,本发明具有以下优势:

25、1、无需重启:本发明所述的react脚手架动态配置实现方法,采用外接的动态配置工具来修改前端服务器的网络配置,无需重启react项目,节省了重启的时间。

26、2、侵入性弱:网络配置文件与react项目的代码分离,通过使用动态配置工具来读取网络配置文件的配置信息,当脚手架升级时,也只需改动动态配置工具,而无需对react项目的整体代码进行修改。

27、3、功能强大:可以配置前端服务器所支持的各种配置。



技术特征:

1.一种react脚手架动态配置实现方法,其特征在于,包括步骤:

2.根据权利要求1所述的方法,其特征在于,将所述网络配置文件挂载到网络上,具体包括:

3.根据权利要求1所述的方法,其特征在于,通过所述动态配置工具监听用户对所述网络配置文件的修改操作,并读取修改后的所述网络配置文件中的配置信息,具体包括:

4.根据权利要求1所述的方法,其特征在于,所述触发事件为用户通过浏览器对所述前端服务器发起的刷新请求。

5.一种react脚手架动态配置实现系统,其特征在于,包括:

6.根据权利要求5所述的系统,其特征在于,所述网络配置模块具体用于将所述网络配置文件投射到本地资源库中,以使用户能够基于所述网络配置文件的网址访问并修改所述网络配置文件。

7.根据权利要求5所述的系统,其特征在于,所述动态配置工具包括监听组件和更新组件;

8.根据权利要求5所述的系统,其特征在于,所述触发事件为用户通过浏览器对所述前端服务器发起的刷新请求。

9.一种计算机可读存储介质,所述存储介质存储有计算机程序,所述计算机程序被处理器执行时实现上述权利要求1~4任一项所述的方法。

10.一种电子设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,所述处理器执行所述程序时实现上述权利要求1~4任一项所述的方法。


技术总结
本发明提出一种react脚手架动态配置实现方法,包括步骤:在react脚手架中构建动态的网络配置文件;将所述网络配置文件挂载到网络上;在react项目中引入预先构建的动态配置工具,通过所述动态配置工具监听用户对所述网络配置文件的修改操作,并读取修改后的所述网络配置文件中的配置信息;通过预设的触发事件触发前端服务器根据所述动态配置工具读取到的配置信息更新网络配置,并启用更新后的网络配置。本发明所述的react脚手架动态配置实现方法,采用外接的动态配置工具来修改前端服务器的网络配置,无需重启react项目,节省了重启的时间。

技术研发人员:王明柱,高健健,戈业龙,李晓宇,刘国俭
受保护的技术使用者:南京掌控网络科技有限公司
技术研发日:
技术公布日:2024/12/17
转载请注明原文地址:https://xbbs.6miu.com/read-28741.html