一种基于single-spa的微前端技术制造技术

本发明专利技术公开了一种基于single‑spa的微前端技术，其技术方案要点是：包括用户，所述用户控制Nginx，所述Nginx数据连接有底层路由，所述底层路由数据连接有模块加载器，所述模块加载器通讯连接有main前端基础模块和至少三组APP软件，至少三组所述APP软件中包括有APP1、APP2和APP3，所述APP1通讯连接有server1，所述APP2通讯连接有server2，所述APP3通讯连接有url；利用装置可以在不同框架下的前端代码和应用的复用；实现了中大型应用的依赖升级和新技术的引入的平滑引入；将微服务的理念应用于浏览器端，即将Web应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。

【技术实现步骤摘要】
一种基于single-spa的微前端技术
本专利技术涉及软件开发领域，特别涉及一种基于single-spa的微前端技术。
技术介绍
随着前端技术的发展，伴随而来的是各种前端框架的出现和发展，其中有代表性的是React,Vue和Angular。参照现有公开号为CN111008015A的中国专利，其公开了一种基于前端技术实现的微前端应用框架，所述基于前端技术实现的微前端应用框架包括：通用微前端应用以及业务微前端应用；其中，所述基于前端技术实现的微前端应用框架用于使通用微前端应用以及业务微前端应用无缝衔接；对于通用微前端应用以及业务微前端应用的标准接口包括如下字段：编码、名称、图符、连接、Js代码、样式代码。上述的这种基于前端技术实现的微前端应用框架实现用户在界面级的业务流程和业务逻辑的变更需求；应用之间的业务协同需求；频繁的加入新业务，并与现有业务模块的无缝集成；局部应用模块的动态更新(开发和部署可以独立进行)；租户应用配置实时修改更新。但是上述的这种基于前端技术实现的微前端应用框架依旧存在着一些缺点，如：一、不同的技术团队以及不同本文档来自技高网...

【技术保护点】
1.一种基于single-spa的微前端技术，包括用户，其特征在于：所述用户控制Nginx，所述Nginx数据连接有底层路由，所述底层路由数据连接有模块加载器，所述模块加载器通讯连接有main前端基础模块和至少三组APP软件，至少三组所述APP软件中包括有APP1、APP2和APP3，所述APP1通讯连接有server1，所述APP2通讯连接有server2，所述APP3通讯连接有url，所述main前端基础模块通过webpack对不同框架下的代码进行打包，将前端相关的文件，如javascript、typescript、css和less文件通过loaders进行相应的处理，同时引入plugin...

【技术特征摘要】
1.一种基于single-spa的微前端技术，包括用户，其特征在于：所述用户控制Nginx，所述Nginx数据连接有底层路由，所述底层路由数据连接有模块加载器，所述模块加载器通讯连接有main前端基础模块和至少三组APP软件，至少三组所述APP软件中包括有APP1、APP2和APP3，所述APP1通讯连接有server1，所述APP2通讯连接有server2，所述APP3通讯连接有url，所述main前端基础模块通过webpack对不同框架下的代码进行打包，将前端相关的文件，如javascript、typescript、css和less文件通过loaders进行相应的处理，同时引入plugins针对打包过程中的不同阶段处理相应的内容，所述main前端基础模块通过single-spa的微前端实现新应用的注册和使用。


2.根据权利要求1所述的一种基于single-spa的微前端技术，其特征在于：所述webpack对不同框架下的代码进行打包时的每个应用需要实现并导出相应的三个应用生命周期。


3.根据权利要求2所述的一种基于single-spa的微前端技术，其特征在于：所述三个应用生命周期分别为bootstrap：应用的初始化，启动方法，mount：应用挂载到真实DOM上的方法，unmount：应用从真实DOM上卸载的方法。


4.根据权利要求1所述的一种基于single-spa的微前端技术，其特征在于：所述main前端基础模块通过single-spa的微前端实现新应用的注册和使用的步骤如下：
S1、引入single-spa相关代码；
S2、通过ES6的import()语法动态引入第一步生成的应用代码；
S3、注册不同应用相应的...

【专利技术属性】
技术研发人员：孙志远，
申请(专利权)人：杭州玳数科技有限公司，
类型：发明
国别省市：浙江;33