一种前端项目嵌套方法、装置、存储介质及计算机设备与流程

专利检索2024-11-25  25


本发明涉及计算机,尤其是涉及一种前端项目嵌套方法、装置、存储介质及计算机设备。


背景技术:

1、前端项目嵌套是将一个前端项目的页面或模块嵌入到另一个前端项目中,以实现不同项目或模块的集成。在前端项目的开发中,通过将不同的前端项目进行嵌套,可以扩展页面或应用的功能,提供更好的用户体验,还可以实现代码的复用,提高开发效率,便于项目维护。

2、传统的解决前端项目嵌套通常使用微前端框架来实现,这种方法需要前端项目支持npm(node package manager,节点包管理器)安装微前端框架包,对于使用cdn(contentdelivery network,内容分发网络)引入包的旧前端框架很不友好,但是多数有微前端使用需求的都是在新项目和旧项目之间切换过度或者不同技术框架并行使用等,因此亟需提供一种新的前端项目嵌套方法,以使无法使用npm引入包的前端项目也可以实现项目嵌套。


技术实现思路

1、有鉴于此,本申请提供了一种前端项目嵌套方法、装置、存储介质及计算机设备,主要目的在于解决通过微前端框架进行前端项目嵌套不支持无法使用npm引入包的项目的技术问题。

2、根据本发明的第一个方面,提供了一种前端项目嵌套方法,该方法包括:

3、对第一项目进行打包,得到第一项目的打包文件;

4、获取第一项目的打包文件中的js文件的地址信息;

5、基于js文件的地址信息在第二项目中引入js文件;

6、在第二项目中通过js文件加载第一项目中的目标资源。

7、可选的,基于地址信息在第二项目中引入js文件,包括:

8、在第二项目中创建script标签;

9、基于地址信息,通过script标签在第二项目中引入js文件。

10、可选的,基于地址信息在第二项目中引入js文件,还包括:

11、在第二项目中调用目标函数,通过目标函数引入js文件,其中,目标函数用于创建script标签,并将js文件的地址信息添加到script标签中。

12、可选的,在第二项目中通过js文件加载第一项目中的目标资源,包括:

13、在第二项目的目标页面中调用目标函数,加载js文件;

14、通过js文件读取目标页面对应的目标路由;

15、根据目标路由执行js文件中的与目标路由对应的目标程序;

16、通过目标程序加载第一项目中与目标页面对应的目标资源。

17、可选的,所述方法还包括:

18、在第一项目中创建与第二项目中的目标页面相对应的第一页面;

19、为第一页面和目标页面设置相同的路由,得到目标路由,以通过目标路由在目标页面中加载第一页面对应的目标资源。

20、可选的,所述方法还包括:

21、获取第二项目中的公共资源,将公共资源注册为第二项目的window对象中的公共函数;

22、在第一项目中通过调用公共函数加载第二项目中的公共资源。

23、可选的,在获取第一项目的js文件的地址信息之前,所述方法还包括:

24、通过webpack打包工具将第一项目打包得到打包文件;

25、将打包文件上传至服务器的指定路径中,以根据服务器的指定路径获取打包文件中的js文件的地址信息。

26、根据本发明的第二个方面,提供了一种前端项目嵌套装置,该装置包括:

27、项目打包模块,用于对第一项目进行打包,得到第一项目的打包文件;

28、数据获取模块,用于获取第一项目的打包文件中的js文件的地址信息;

29、项目引入模块,用于基于js文件的地址信息在第二项目中引入js文件;

30、资源加载模块,用于在第二项目中通过js文件加载第一项目中的目标资源。

31、根据本发明的第三个方面,提供了一种存储介质,其上存储有计算机程序,所述程序被处理器执行时实现上述前端项目嵌套方法。

32、根据本发明的第四个方面,提供了一种计算机设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,所述处理器执行所述程序时实现上述前端项目嵌套方法。

33、本发明提供的一种前端项目嵌套方法、装置、存储介质及计算机设备,首先对第一项目进行打包,得到第一项目的打包文件,获取第一项目的打包文件中的js文件的地址信息,然后基于所述js文件的地址信息在第二项目中引入所述js文件,最后在所述第二项目中通过所述js文件加载所述第一项目中的目标资源。本申请通过在第二项目中加载第一项目的js文件,无需通过微前端框架即可实现在第二项目中嵌套第一项目,使无法使用npm引入包的前端项目也可以实现项目嵌套。

34、上述说明仅是本申请技术方案的概述,为了能够更清楚了解本申请的技术手段,而可依照说明书的内容予以实施,并且为了让本申请的上述和其它目的、特征和优点能够更明显易懂,以下特举本申请的具体实施方式。



技术特征:

1.一种前端项目嵌套方法,其特征在于,所述方法包括:

2.根据权利要求1所述的方法,其特征在于,所述基于所述地址信息在第二项目中引入所述js文件,包括:

3.根据权利要求2所述的方法,其特征在于,所述基于所述地址信息在所述第二项目中引入所述js文件,还包括:

4.根据权利要求3所述的方法,其特征在于,所述在所述第二项目中通过所述js文件加载所述第一项目中的目标资源,包括:

5.根据权利要求1至4任一项所述的方法,其特征在于,所述方法还包括:

6.根据权利要求1所述的方法,其特征在于,所述方法还包括:

7.根据权利要求1所述的方法,其特征在于,在所述获取第一项目的js文件的地址信息之前,所述方法还包括:

8.一种前端项目嵌套装置,其特征在于,所述装置包括:

9.一种存储介质,其上存储有计算机程序,其特征在于,所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的方法的步骤。

10.一种计算机设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,其特征在于,所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的方法的步骤。


技术总结
本发明公开了的一种前端项目嵌套方法、装置、存储介质及计算机设备,涉及计算机技术领域。其中方法包括:首先对第一项目进行打包,得到第一项目的打包文件,获取第一项目的打包文件中的js文件的地址信息,然后基于所述js文件的地址信息在第二项目中引入所述js文件,最后在所述第二项目中通过所述js文件加载所述第一项目中的目标资源。上述方法通过在第二项目中加载第一项目的js文件,无需通过微前端框架即可实现在第二项目中嵌套第一项目,使无法使用npm引入包的前端项目也可以实现项目嵌套。

技术研发人员:孙万浩
受保护的技术使用者:康键信息技术(深圳)有限公司
技术研发日:
技术公布日:2024/5/29
转载请注明原文地址:https://win.8miu.com/read-1146491.html

最新回复(0)