[发明专利]微前端样式处理方法、装置、设备及介质

说明书

本申请公开了一种微前端样式处理方法、装置、介质及设备，方法应用于客户端，包括：将多个子项目的初始层叠样式表文件传入webpack的加载器层，在加载器层中，根据多个初始层叠样式表文件确定抽象语法树文件；在抽象语法树文件中，为子项目中的第一元素对应的样式添加数据源属性，得到修改后的抽象语法树文件，其中，数据源属性用于标识第一元素所属的子项目；将修改后的抽象语法树文件转换为目标层叠样式表文件。本申请的方法解决了现有方法中微前端的多个子项目的多份层叠样式表互相影响，导致样式显示混乱的问题。

技术领域

本申请涉及计算机技术领域，尤其是涉及到一种微前端样式处理方法、装置、设备及介质。

背景技术

微前端架构是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，将一个庞大的前端应用拆分为多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署，再将这些小型应用联合为一个完整的应用。微前端既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库倾向于更小更灵活。

在现有的微前端技术中，通过网络请求拿到不同子项目的静态资源解析，通过一系列的隔离处理后动态插入容器项目指定的DOM节点内，最终浏览器解析到的是一份包含容器项目、多个子项目整合在一起的HTML文档，由于容器与子项目共存，必然导致多个子项目的多份CSS样式表相互影响的问题。

发明内容

有鉴于此，本申请提供了一种微前端样式处理方法、装置、介质及设备，以解决现有方法中微前端的多个子项目的多份层叠样式表互相影响的问题。

本申请的第一方面，提供了一种微前端样式处理方法，所述方法包括：

将多个子项目的初始层叠样式表文件传入webpack的加载器层，在所述加载器层中，根据多个所述初始层叠样式表文件确定抽象语法树文件；

在所述抽象语法树文件中，为所述子项目中的第一元素对应的样式添加数据源属性，得到修改后的抽象语法树文件，其中，所述数据源属性用于标识所述第一元素所属的子项目；

将所述修改后的抽象语法树文件转换为目标层叠样式表文件。

本申请的第二方面，提供了一种微前端样式处理装置，所述装置包括：

转换模块，用于将多个子项目的初始层叠样式表文件传入webpack的加载器层，在所述加载器层中，根据多个所述初始层叠样式表文件确定抽象语法树文件；

样式处理模块，在所述抽象语法树文件中，为所述子项目中的第一元素对应的样式添加数据源属性，得到修改后的抽象语法树文件，其中，所述数据源属性用于标识所述第一元素所属的子项目；

所述转换模块，还用于将所述修改后的所述抽象语法树文件转换为目标层叠样式表文件。

本申请的第三方面，提供了一种电子设备，包括存储介质、处理器及存储在存储介质上并可在处理器上运行的指令或代码，所述处理器执行所述指令或代码时实现上述微前端样式处理方法。

本申请的第四方面，提供了一种存储介质，其上存储有指令或代码，所述指令或代码被处理器执行时实现上述微前端样式处理方法。

上述基于微前端样式处理方法、装置、设备及介质所实现的方案，根据多个子项目的初始层叠样式表文件生成抽象语法树文件，利用了抽象语法树文件的树状结构，使得多个子项目的第一元素之间的层级关系更加清晰。通过修改抽象语法树文件，为项目中的第一元素对应的样式添加数据源属性，以利用数据源属性消除不同子项目共存时的相互影响。其中，第一元素可为id也可为class类型。在修改抽象语法树文件后，将其转换成为目标层叠样式表文件，此时利用目标层叠样式表文件即可清晰地表明多个子项目的第一元素之间的层级关系，避免了不同子项目之间互相干扰。