(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210761986.9 (22)申请日 2022.06.30 (71)申请人 济南浪潮数据技 术有限公司 地址 250000 山东省济南市中国 （山 东） 自 由贸易试验区济南片区浪潮路1036号 浪潮科技园S0 5楼S311室 (72)发明人 杨浩　 (74)专利代理 机构 济南诚智商标专利事务所有 限公司 3710 5 专利代理师 李魁峰 (51)Int.Cl. G06F 21/56(2013.01) G06F 9/445(2018.01) (54)发明名称 一种微前端的组件库样式隔离方法、 装置及 存储介质 (57)摘要 本发明涉及一种微前端的组件库样式隔离 方法、 装置及存储介质。 本发明在对各微前端组 件库进行打包处理的过程中， 基于预设的组件库 文件目录和预设的文件匹配规则， 匹配并拦截所 处目录符合预设组件库文件目录且文件名符合 文件匹配规则的组件文件； 对所拦截的组件文件 所在目录和文件名进行校验； 若校验成功， 则为 所拦截的组件文件中所有样式的样式类名配置 对应组件文件 所属微前端的唯一的目标前缀， 并 将配置完目标前缀的组件文件传递到下一打包 处理流程； 若校验失败， 则将组件文件传递到下 一打包处理流程。 本发明为各个微前端的组件文 件中的样式类名分配了独立的不同的目标前缀， 可以保证不同微前端样式之间不会相互污染。 权利要求书2页 说明书6页 附图4页 CN 115080971 A 2022.09.20 CN 115080971 A 1.一种微前端的组件库样式隔离方法， 其特征在于， 包括： 对各微前端组件库进行打包 处理的过程中， 处理样式隔离流程的子文件加载器基于预设的组件库文件目录和预设的文 件匹配规则， 匹配并拦截所处目录符合预设组件库文件目录且文件名符合文件匹配规则的 组件文件； 处理样式隔离流程的子文件加载器对所拦截的组件文件所在目录和文件名进行校验； 若校验成功， 则为所拦截的组件文件中所有样式的样式类名配置对应组件文件所属微前端 的唯一的目标前缀， 再将配置完目标前缀的组件文件传递到下一打包处理流程； 若校验失 败， 则将组件文件传递到下一打包处 理流程。 2.根据权利要求1所述的微前端的组件库样式隔离方法， 其特征在于， 对应打包处理过 程的各个流程， 构建相 应的子文件加载器， 所构建的子文件加载器返回其所拦截组件文件 的组件文件完整地址， 文本处理器基于各个子文件加载器所提供的组件完整地址读取相应 的组件文件并对所读取的组件文件内容进行相应处 理， 以实现打包处 理过程。 3.根据权利要求2所述的微前端的组件库样式隔离方法， 其特征在于， 在文件目录配置 文件中， 针对每个子文件加载器分别预设其组件库文件目录， 组件库文件目录包含子文件 加载器所需要拦截的微前端的组件文件所 处的目录； 以及在文件匹配规则配置文件中针对 每个子文件加载器分别预设其所需拦截组件文件的文件匹配规则。 4.根据权利要求3所述的微前端的组件库样式隔离方法， 其特征在于， 处理样式隔离处 理流程的子文件加载器包括： 第一子文件加载器和第二子文件加载器； 在文件目录配置文 件中针对第一文件加载器配置第一组件库文件目录， 针对第二文件加载器配置第二组件库 文件目录； 在 文件匹配规则配置文件中， 针对第一文件加载器配置第一文件匹配规则， 第一 文件匹配规则为基于正则匹配形成的 “*.js”或“*.框架”， 用以匹配后缀为.js文件和.框架 的组件文件； 针对第二文件加载器配置第二文件匹配规则， 第二文件匹配规则为基于正则 匹配形成的 “*.css”或“*.less”或“*.scss”， 用以匹配后缀为.css、 .less、 和.scss的组件 文件。 5.根据权利要求1所述的微前端的组件库样式隔离方法， 其特征在于， 处理样式隔离流 程的子文件加载器对所拦截的组件文件所在目录和文件名进 行校验包括： 一处理样式隔离 流程的子文件加载器获取并校验其拦截的组件文件所处的目录是否属于对应该子文件加 载器的组件库文件目录， 不属于则校验失败， 属于则该子文件加载器获取并校验所拦截的 组件文件的文件名的后缀是否属于对应该子文件加载器的文件匹配规则中所限定的文件 名后缀， 属于则校验成功， 不属于则校验失败。 6.根据权利要求1所述的微前端的组件库样式隔离方法， 其特征在于， 所述为所拦截的 组件文件中所有样式的样式类名配置对应组件文件所属微前端的唯一的目标 前缀包括： 对于校验成功的需要进行样式隔离的组件文件， 处理样式隔离流程的子文件加载器获 取其组件文件完整地址， 将组件文件完整地址发送给文本处理器， 文本处理器利用组件文 件完整地址读取相应的组件文件内容， 并以预设的样式类名匹配规则从组件文件的内容中 匹配全部的样式类名； 为所匹配的样式类名配置对应组件文件所属微前端的唯一的目标前 缀。 7.根据权利要求6所述的微前端的组件库样式隔离方法， 其特征在于， 文本处理器为所 匹配的样式类名配置对应组件文件所属微前端的唯一目标前缀的手段包括： 检测样式类名权　利　要　求　书 1/2 页 2 CN 115080971 A 2是否存在前缀， 若样式类名不存在前缀， 则按前缀的格式为不具有前缀的样式类名新增目 标前缀， 若样式类名存在前缀， 则将 样式类名原有前缀 替换为目标 前缀。 8.根据权利要求7所述的微前端的组件库样式隔离方法， 其特征在于， 文本处理器读取 预设的前缀配置文件或文件组件中预设的目标前缀参数获取目标前缀； 其中， 前缀配置文 件中记录针对各个微前端的目标前缀， 文件组件中的目标前缀参数记录对应该文件组件所 属微前端的目标 前缀。 9.一种微前端的组件库样式隔离装置， 其特征在于， 包括： 处理模块、 存储模块和总线 模块， 所述总线模块连接所述处理模块和存储模块， 所述存储模块存储计算机指令和待打 包的微前端项目文件， 所述处理模块读取计算机指 令并执行来处理待打包的微前端项目文 件， 实现如权利要求1 ‑8任一所述的微前端的组件库样式隔离方法。 10.一种实现微前端的组件库样式隔离方法的存储介质， 所述存储介质存储计算机程 序， 其特征在于， 所述计算机程序被处理器执行时实现如权利要求 1‑8任一所述的微前端的 组件库样式隔离方法。权　利　要　求　书 2/2 页 3 CN 115080971 A 3