一种渐进迁移遗留项目的微前端方法技术

本发明专利技术公开一种渐进迁移遗留项目的微前端方法。本发明专利技术通过壳应用可几乎无影响的混入遗留项目的部署方案中，并提供加载应用、并实现应用间通讯的功能，使得开发人员可逐步以子应用的方式迁移遗留项目的局部视图或功能模块。块。块。

【技术实现步骤摘要】
一种渐进迁移遗留项目的微前端方法


[0001]本专利技术涉及web前端开发
，尤其涉及一种渐进迁移遗留项目的微前端方法。

技术介绍

[0002]通常同一域名下仅部署一个前端项目。当维护大型或项目生命周期较长的项目时，通常有以下几种方式拆分功能模块：
[0003](1)、公共的部分抽象为新的仓库打包为NPM模块提供业务无关的依赖。
[0004](2)、以全新的设计当成独立的项目开发使用子路径/子域名部署新的项目或者界面模块。
[0005](3)、使用iframe在页面局部视图单独加载运行一个新的应用。
[0006]常用的方式存在以下不足与缺陷：
[0007]抽象公用模块使用多仓库进行开发虽然能划分边界迭代新功能，但开发心智负担较高，调试过程繁琐，且需要额外的成本管理版本与依赖以及开发发布流程。
[0008]子域名/子路径单独运行一般是能单独运行的业务，范围有限。
[0009]遗留项目的历史包裹一般比较严重，维护成本较高，且部署方案涉及历史业务，诸如客户端内嵌页面、外部引用的静态资源、三方服务的回调逻辑等，一次性全量替换实现的成本过高。
[0010]因此，现有技术存在缺陷，需要改进。

技术实现思路

[0011]本专利技术要解决的技术问题是：提供一种渐进迁移遗留项目的微前端方法，以解决
技术介绍
所提到的问题。
[0012]本专利技术的技术方案如下：提供一种渐进迁移遗留项目的微前端方法，包括以下步骤。
[0013]S1：在遗留项目中将构建结果的模块类型修改为UMD或IIFE；遗留项目的构建结果带有的index.html作为新应用的入口。
[0014]S2：以monorepo作为仓库结构创建新项目。
[0015]S3：在新项目的仓库中创建壳应用，调整其dev
‑
server以支持联合开发；所述壳项目为替换某个遗留项目入口的项目，其带有加载其他应用以及处理应用间通讯的逻辑代码的html文件。
[0016]S4：按照以下步骤变更部署结构以支持后续模块引入；S41：创建的壳应用混入遗留项目的部署目录中；S42：按照“Web路径与部署路径的映射”修改nginx的配置将入口应用变更为壳应用；S43：按照“Web路径与部署路径的映射”修改遗留项目构建输出的入口文件名，以供壳应用加载。
[0017]S5：在新项目的仓库中创建子应用项目，子应用项目均以子路径部署作为目标，预
分配一个路由path；该path为代表完整页面的路由或者局部视图的路由；子应用项目指以模块化构建工具创建的带有局部视图的项目，可以独立运行完成某项业务功能；子应用项目的构建结果带有index.html文件且能单独运行，但最终只以一个局部视图展现而不是页面。
[0018]S6：子应用项目部署至单独的目录，由nginx的alias命令路由在S5中分配的path。
[0019]S7：新应用在需要子应用项目的时候由壳应用通过分配的子路径加载并实例化子应用项目。
[0020]进一步地，重复步骤S5
‑
S7，实现后续的渐进替换遗留项目。
[0021]进一步地，所述壳应用的特征包括：1)、实例化事件总线服务，即一个简易的事件发布订阅服务；2)、通过fetch API分别加载指定URL的子应用项目和遗留项目的index.html文件；3)、解析2)获得的内容，提取脚本标签的URL与样式标签的URL；4)、遍历URL并通过fetch API加载其内容，脚本标签的URL通过eval执行，样式标签的URL通过创建内联的style标签插入head元素；5)、执行完脚本后通过指定的全局命名空间访问其export的class实例化界面实例；全局命名空间的配置依据项目配置修改；6)、调用export的provideEventBus方法向子应用项目提供事件总线服务实例。
[0022]进一步地，在遗留项目中依据项目配置修改将构建结果的模块类型修改为UMD或IIFE。
[0023]进一步地，所述项目配置修改具体包括：[1]、所有项目均将构建的结果均改为IIFE或者UMD，并指定不冲突的全局命名空间；所述全局命名空间，采用package.json的name字段；[2]、子应用项目需指定构建工具的publicPath字段为其部署的子路径；[3]、应用实例化不再是本身加载后自执行，改由export可实例化的class供壳应用调用。
[0024]进一步地，在步骤S3中，以“多项目联合开发方案”调整其dev
‑
server以支持联合开发，所述多项目联合开发方案包括：(1)、所有项目均启动dev
‑
server以模拟生产环境的运作情况；(2)、所有子应用项目以及遗留项目均需要配置开发服务器允许所有域访问，即添加响应头"Access
‑
Control
‑
Allow
‑
Origin:*"；(3)、将所有依赖到的子应用项目以及遗留项目的开发服务的地址均通过.env文件添加到壳应用开发服务启动的环境变量；(4)、基于(3)，在运行时通过EnvironmentPlugin替换子应用的URL加载不同应用的入口文件；(5)、壳应用的构建工具配置所有子应用项目以及遗留项目的接口代理。
[0025]进一步地，在步骤S4中，依据项目部署方案来实现，所述项目部署方案构建以下资源文件：index.html：应用的入口文件，包含所需静态文件的URL，由浏览器加载；bundle.[hash].js：打包后的脚本文件，由上述入口文件引入；[static
‑
entry].html：其他纯静态页面的文件；静态资源文件。
[0026]进一步地，所述静态资源文件包括：遗留项目构建时将入口文件由index.html修改为legacy
‑
index.html，其余保持不变；壳应用构建时通过环境变量读取所有子应用项目的路径，生成加载URL；遗留项目的加载URL为/legacy
‑
index.html，子应用项目的加载URL为/sub
‑
app/index.html；子应用项目构建时通过指定构建工具的publicPath将所有静态资源的加载路径由/替换为/sub
‑
app/，并且在部署时使用nginx的alias指令路由该子路径到其文件目录。
[0027]进一步地，在步骤S1中，非由模块化构建工具创建的项目通过UI实例化方法挂载
至window对象，然后再将构建结果的模块类型修改为UMD或IIFE。
[0028]本技术方案实现壳应用混入遗留项目部署，可在几乎不影响当前业务的情况下使用全新的技术栈实现的Web应用替换部分模块视图。本技术方案通过解析入口文件资源直接引入应用并且在同一页面并行运行多个应用的方式进行开发，简单实现联合开发调试。本技术方案以monorepo本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种渐进迁移遗留项目的微前端方法，其特征在于，包括以下步骤：S1：在遗留项目中将构建结果的模块类型修改为UMD或IIFE；遗留项目的构建结果带有的index.html作为新应用的入口；S2：以monorepo作为仓库结构创建新项目；S3：在新项目的仓库中创建壳应用，调整其dev
‑
server以支持联合开发；所述壳项目为替换某个遗留项目入口的项目，其带有加载其他应用以及处理应用间通讯的逻辑代码的html文件；S4：按照以下步骤变更部署结构以支持后续模块引入；S41：创建的壳应用混入遗留项目的部署目录中；S42：按照“Web路径与部署路径的映射”修改nginx的配置将入口应用变更为壳应用；S43：按照“Web路径与部署路径的映射”修改遗留项目构建输出的入口文件名，以供壳应用加载；S5：在新项目的仓库中创建子应用项目，子应用项目均以子路径部署作为目标，预分配一个路由path；该path为代表完整页面的路由或者局部视图的路由；子应用项目指以模块化构建工具创建的带有局部视图的项目，可以独立运行完成某项业务功能；子应用项目的构建结果带有index.html文件且能单独运行，但最终只以一个局部视图展现而不是页面；S6：子应用项目部署至单独的目录，由nginx的alias命令路由在S5中分配的path；S7：新应用在需要子应用项目的时候由壳应用通过分配的子路径加载并实例化子应用项目。2.根据权利要求1所述的一种渐进迁移遗留项目的微前端方法，其特征在于，重复步骤S5
‑
S7，实现后续的渐进替换遗留项目。3.根据权利要求1所述的一种渐进迁移遗留项目的微前端方法，其特征在于，所述壳应用的特征包括：1)、实例化事件总线服务，即一个简易的事件发布订阅服务；2)、通过fetch API分别加载指定URL的子应用项目和遗留项目的index.html文件；3)、解析2)获得的内容，提取脚本标签的URL与样式标签的URL；4)、遍历URL并通过fetch API加载其内容，脚本标签的URL通过eval执行，样式标签的URL通过创建内联的style标签插入head元素；5)、执行完脚本后通过指定的全局命名空间访问其export的class实例化界面实例；全局命名空间的配置依据项目配置修改；6)、调用export的provideEventBus方法向子应用项目提供事件总线服务实例。4.根据权利要求1所述的一种渐进迁移遗留项目的微前端方法，其特征在于，在遗留项目中依据项目配置修改将构建结果的模块类型修改为UMD或IIFE；所述项目配置修改具体包括：[1]、所有项目均将构建的结果均改为IIFE或者UMD，并指定不冲突的全局命名空间；[2]、子应用项目需指定构建工具的publicPath字段为其部署...

【专利技术属性】
技术研发人员：王曦超，高斌，邹琼，周双全，
申请(专利权)人：深圳市瑞云科技股份有限公司，
类型：发明
国别省市：