[发明专利]基于umi的微前端框架的动态分包和合包方法

权利要求书

1.基于umi的微前端框架的动态分包和合包方法，其特征在于，该方法包括以下步骤：

S1、配置统一脚手架，并通过简单命令搭建子模块项目及页面；

S2、通过脚手架生成的子模块中自带插件对脚手架搬迁过来的代码进行处理，并动态生成submodule.js；

S3、配置主模块中自带插件；

S4、配置脚手架底座，并将子模块的版本信息从配置项目拉取到本地，同时根据子模块的版本信息动态拉取git远程仓库对应的版本到本地编译；

S5、运行态中，主模块在打开菜单时候去动态加载资源，若为分包模式，则远程加载路由url对应子模块的静态资源，且动态加载后，解析静态资源携带的增量国际化、路由及models数据并注入到主模块中；

所述S2中通过脚手架生成的子模块中自带插件对脚手架搬迁过来的代码进行处理，并动态生成submodule.js还包括以下步骤：

S21、通过umi-plugin-bdpcloud插件处理脚手架搬迁过来的代码，且代码搬迁过程为利用nodejs的fsExtra的同步搬迁文件和文件夹功能；

S22、若变量@/与当前项目自己的冲突，则替换全局变量为合包的方式；

S23、若目录降低了一级，则进行国际化文件的补充；

S24、通过umi-plugin-monorepo插件在子模块打包时，将国际化文件、路由文件及models以json的方式动态生成submodule.js。

2.根据权利要求1所述的基于umi的微前端框架的动态分包和合包方法，其特征在于，所述统一脚手架包括：快速生成项目、快速生成模块及快速生成页面。

3.根据权利要求1所述的基于umi的微前端框架的动态分包和合包方法，其特征在于，所述S24中通过umi-plugin-monorepo插件在子模块打包时，将国际化文件、路由文件及models以json的方式动态生成submodule.js时，umi框架基于此调用webpack编译。

4.根据权利要求1所述的基于umi的微前端框架的动态分包和合包方法，其特征在于，所述S3中主模块中自带插件包括umi-plugin-increment、umi-plugin-build及umi-plugin-monorepo；

其中，umi-plugin-increment使用时还包括以下步骤：

在合包模式下，校验分包是否缺少模块，若异常则退出；

umi-plugin-build使用时还包括以下步骤：

为第三方组件利用umi提供的webpack打包能力进行打包成dist；

umi-plugin-monorepo使用时还包括以下步骤：

在主模块注入webpack的externals，并抽出公共依赖到内容分发网络。

5.根据权利要求1所述的基于umi的微前端框架的动态分包和合包方法，其特征在于，所述S4中配置脚手架底座，并将子模块的版本信息从配置项目拉取到本地，同时根据子模块的版本信息动态拉取git远程仓库对应的版本到本地编译还包括以下步骤：

S41、脚手架底座基于nodejs编写封装命令npm run clone env=develop module=dap，同时根据env参数将子模块的版本信息从配置项目拉取到本地，并根据子模块的版本信息动态拉取git远程仓库对应的版本到本地编译；

S42、若为合包模式，则把子模块/src/pages下面搬迁到主模块对应的/src/pages，并调用S3中的插件编译。

6.根据权利要求5所述的基于umi的微前端框架的动态分包和合包方法，其特征在于，所述合包编译时还包括以下步骤：

脚手架底座，利用nodejs高效的异步编程特性，并行地主动去git远程仓库拉取各个模块到本地编译；

若为合包模式，则把子模块/src/pages下面搬迁到主模块对应的/src/pages，完成搬迁后则做相应操作；

umi通过网页包构建生成前端包dist。