一种基于webpack的UI主题切换插件的方法及系统与流程

一种基于webpack的ui主题切换插件的方法及系统
技术领域
1.本发明涉及计算机技术领域，一种基于webpack打包构建工具的ui(用户界面)主题切换插件的方法及系统。


背景技术：

2.软件系统往往是要面向持续性的迭代，在开发之初很难把所有需要支持的功能都想清楚，这就需要软件系统具备一定的可扩展性。为了避免在系统中“过度设计”，需要引入插件化的设计理念，插件化不是一门具体的技术，而是整合了技术、策略和方法，甚至包括脚手架、规范约束等辅助工具，是一种项目架构的实现方案，从输出的产物来看是由原来的单体应用转变为多个聚合为一的前端插件。
3.随着互联网的快速发展，用户的需求也在不断的加深，除了关注网站功能和内容的变化，也更加注重视觉效果。ui主题的切换可以为用户提高舒适和友好的界面，增强用户的体验和满意度，增强用户对平台的粘性。在目前激烈的环境市场上，ui主题的切换可以为平台提供差异化的视觉体验，增强平台的吸引力和竞争力，从而赢得更多的用户和市场份额。
4.如果没有使用成熟的ui主题切换插件，可能需要手动编写大量样式代码来实现主题的切换。不仅费时费力易出错，还会增加开发成本。且传统的ui主题切换方案中，主题设置逻辑会写在业务代码中，常常会导致代码和结构混乱，很难独立成模块，耦合度高，不利于后续维护与功能迭代。antd-theme-webpack-plugin是一种基于webpack的插件，现有的ui主题切换插件的方法需和antd组件库配合使用才达到ui主题切换的目的，旨在减少开发人员的开发接入成本、对于不同的场景提供更灵活的配置实现。但是该技术与具体的技术栈耦合度较高，这个产生一个最大的问题是：ui主题切换功能开发过程中需要重复编写大量代码，代码与业务逻辑耦合在一起，后续维护困难，开发成本较大。
5.除了上述最大的问题之外，上述方法还存在以下问题：
6.首先：与具体的技术栈耦合度较高：要求前端项目必须使用antd组件库，如果项目中没有引入antd组件库将无法使用主题切换功能。
7.接着，仅支持颜色的更改：该方案只适用于颜色值的修改，如果需要修改包含border-radius、font-size等其他非颜色的css变量，用该方案是无法做到的，存在切换的局限性。
8.还有，该方案不支持图片的替换，该方案不支持图片类型的换肤，方案存在图片切换的局限性。


技术实现要素：

9.发明的目的是针对上述技术问题，提出一种基于webpack打包构建工具的ui主题切换插件的方法及系统，本发明的目的可通过下列技术方案来实现：
10.本发明提供一种基于webpack打包构建工具的ui主题切换插件的方法，包括以下
步骤
11.s100：创建npm包项目，搭建所述npm包的基础框架；
12.s200：编写所述npm包里的webpack插件类，所述webpack插件类实现webpack插件接口功能，并利用apply函数设置该插处理逻辑信息；
13.s300：在前端项目中，使用所述ui主题切换插件的所述npm包，并在webpack配置文件中引入所述ui主题切换插件，所述webpack运行构建状态时实例化所述ui主题切换插件，以修改所述webpack的插件的主题配置信息；
14.s400：所述webpack运行构建完成后，配置皮肤主题生效。
15.进一步地，在步骤s200中，所述ui主题切换的逻辑信息进一步包括：所述webpack插件类读取所述主题配置信息，并生成对应的css文件，并将所述css文件以link的形式通过htmlwebpackplugin生成html中。
16.进一步地，所述css文件由htmlwebpackplugin的alterassettags hook将主题配置生成。
17.进一步地，所述主题配置包括json对象，同时支持图片的替换。
18.进一步地，所述主题配置信息进一步包括同时支持图片替换的json对象，在所述webpack运行构建状态时实例化所述ui主题切换插件时，根据所述json对象修改所述webpack的插件对应的图片替换的主题配置信息，所述json对象至少包括主题颜色、主题字体，背景，其中，json对象涉及到的变量名遵循css变量命名的方式，以
‘‑‑’
开头；图片类型的变量值，为该所述图片相对于themes.config.js文件的相对路径的地址。
19.进一步地，在步骤s300中，实例化所述ui主题切换插件进一步包括,所述webpack插件通过new_themereplacerplugin创建实例，创建所述实例时传入所述json对象。
20.进一步地，所述webpack插件实例化后，配置切换ui主题动态时，所述webpack插件实例化后配置切换ui主题动态进一步包括：所述webpack插件是根据所述主题配置修改所述css文件内容。
21.进一步地，在步骤s400中ui主题切换功能生效进一步包括，所述主题配置的css变量在项目中生效；业务的样式是使用var()的方式使用变量，其中，括号中为在所述json对象中定义的所述变量名。
22.进一步地，在步骤s400中配置所述皮肤主题之后进一步包括：当有图片类型的主题变量时，修改sass-loader options的additinaldata属性，前端css代码中使用所述主题配置中的css变量后主题生效，当没有图片类型的主题变量时，前端代码直接使用所述主题配置中的css变量后主题生效。
23.进一步地，所述ui主题切换插件读取所述webpack的处理结果进一步包括：当emit钩子触发时源文件的转化和组装完成，所述ui主题切换插件读取最终将输出的信息。
24.本发明还提供了一种电子设备，包括：
25.存储器，所述存储器用于存储处理程序；
26.处理器，所述处理器执行处理程序时实现上述所提到的基于webpack打包构建工具的ui主题切换插件的方法。
27.本发明还提供了一种基于webpack的ui主题切换插件的系统，包括：
28.配置解析单元，用于解析webpack的配置项，用于激活所述webpack的加载项和插
件；
29.插件获取单元，用于获取主题配置信息文件；
30.依赖库构建单元，根据所述主题配置信息文件分析编译后构建共享依赖库；
31.依赖库注入单元,用于所述ui主题切换插件的系统启动时，将所述共享依赖库注入到前端应用项目；
32.模块导出单元,用于webpack配置文件导出目前使用的所述配置信息文件。
33.与现有技术相比，本发明存在以下至少一种技术效果：
34.本发明提供了一种基于webpack打包构建工具的ui主题切换插件的方法，与现在的工程项目相比，本发明构建ui换肤功能第三方npm模块包，具有以下几个优点：
35.(1)模块化：将具体各个环节抽取到公共模块包，因为使用的是webpack插件的实现方式，可配置ui主题，提供api切换主题、前端工程的开发人员只需做简单的配置和api调用，即可完成主题切换功能的开发，所以无普通方案依旧存的主题相关逻辑与业务代码耦合严重的问题。
36.(2)低成本接入项目：ui主题切换功能可低成本接入前端项目，通过配置属性修改主题，设置主题，而该发明使用的方案可与项目完全解耦，提升了项目的维护性和扩展性。
37.(3)该换肤插件不仅支持主题颜色、主题字体、主题色号等常规css变量的主题设置，还支持图片的替换
附图说明
38.为了更清楚地说明本发明实施例的技术方案，下面将对实施例描述中所需要使用的附图作简单的介绍：
39.图1为本发明一种基于webpack打包构建工具的ui主题切换插件的方法的流程图；
40.图2为本发明一种基于webpack打包构建工具的ui主题切换插件的方法实现换肤功能的逻辑流程图；
41.图3为本发明一种基于webpack打包构建工具的ui主题切换插件前端项目中核心流程图。
42.图4一种基于webpack打包构建工具的ui主题切换插件系统webpack插件体系的整体架构图(a为所述webpack插件体系实现的整体架构图，b为webpack插件体系实现的模块图)；
具体实施方式
43.为了使本发明的目的、技术方案及优点更加清楚明白,以下结合附图及具体实施方式,对本发明进行进一步详细说明。应当理解,此处所描述的具体实施方式仅用以解释本发明,并不用于限定本发明。
44.实施例
45.一种基于webpack打包构建工具的ui主题切换插件的方法，如图1所示，包括以下步骤
46.s100：创建npm包项目；
47.s200：编写npm包里的webpack插件类，并利用apply函数设置该插处理逻辑信息；
48.s300：在前端项目中，使用ui主题切换插件的npm包，并在webpack配置文件中引入ui主题切换插件，webpack运行构建状态时实例化ui主题切换插件，以修改webpack的插件的主题配置信息；
49.s400：webpack运行构建完成后，配置皮肤主题生效。
50.进一步地，在步骤s200中ui主题切换的逻辑信息进一步包括：webpack插件类读取主题配置信息，并生成对应的css文件，并将css文件以link的形式通过htmlwebpackplugin生成html中。具体的操作步骤如图2所示，
51.步骤s210：当npm包项目的基础框架搭建好后；
52.步骤s220：webpack插件类初始化，提供apply方法；
53.步骤s230：在apply函数中编写插件处理逻辑代码；
54.步骤s240：通过apply函数读取主题配置信息；
55.步骤s250：通过主题配置信息生成css文件；
56.步骤s260：将生成的css文件以link的形式插入到html中；
57.步骤s270：切换主题动态修改css文件内容。
58.进一步地，css文件由htmlwebpackplugin的alterassettags hook生成。
59.进一步地，主题配置信息进一步包括同时支持图片替换的json对象，在webpack运行构建状态时实例化ui主题切换插件时，根据json对象修改webpack的插件对应的图片替换的主题配置信息，json对象至少包括主题颜色、主题字体，背景，其中，json对象涉及到的变量名遵循css变量命名的方式，以
‘‑‑’
开头；图片类型的变量值，为该图片相对于themes.config.js文件的相对路径的地址。
60.进一步地，在步骤s300中实例化ui主题切换插件进一步包括,webpack插件通过new_themereplacerplugin创建实例，创建实例时传入json对象。
61.进一步地，webpack插件实例化后配置切换ui主题动态进一步包括：webpack插件是根据主题配置修改css文件内容。
62.进一步地，在步骤s400中ui主题切换功能生效进一步包括，主题配置的css变量在项目中生效；业务的样式是使用var()的方式使用变量，其中，括号中为在json对象中定义的变量名。
63.进一步地，在步骤s400中配置皮肤主题之后进一步包括：当有图片类型的主题变量时，修改sass-loader options的additinaldata属性，前端css代码中使用主题配置中的css变量后主题生效，当没有图片类型的主题变量时，前端代码直接使用主题配置中的css变量后主题生效。
64.进一步地，ui主题切换插件读取webpack的处理结果进一步包括：当emit钩子触发时源文件的转化和组装完成，ui主题切换插件读取最终将输出的信息。
65.实施例2
66.本发明提供了一种电子设备，包括：
67.存储器，存储器用于存储处理程序；
68.处理器，处理器执行处理程序时实现上述所提到的基于webpack打包构建工具的ui主题切换插件的方法。
69.实施例3
70.本发明提供了一种基于webpack的ui主题切换插件的系统，如图4(a)、(b)所示，包括：
71.配置解析单元，用于解析webpack的配置项，用于激活webpack的加载项和插件，在配置解析单元，通过optimist是一个用于解析shell和config的配置项，激活webpack的加载项和插件，并新建一个wepack配置信息文件。
72.插件获取单元，用于获取主题配置信息文件；当option初始化(通过option对象的属性来配置webpack的各项参数)后，运行并通过compile开始编译wepack配置信息文件；
73.依赖库构建单元，根据主题配置信息文件分析编译后构建共享依赖库；使用addentry方法用于添加入口文件，它将文件路径转换为模块标识符，并将其添加到模块依赖图中，addmodulechain方法中分析入口文件创建建模对象并通过addmoduledependencies添加依赖关系，在buildmodule()方法中构建模块，当adter-compile完成所有模块构造过程中，即通过seal方法将确保所有的模块和块已经完全创建，结束编译过程。
74.依赖库注入单元,用于ui主题切换插件的系统启动时，将共享依赖库注入到前端应用项目，当完成所有模块构成，结束编译过程后，在compiler执行完所有的构建步骤后，会调用最后一个hook事件emit，通过createchunkassets将输出文件，添加到编译器的输出目录中，将构建结果输出到指定的目录下，；
75.模块导出单元,用于webpack配置文件导出目前使用的配置信息文件。after-emit输出完成，即通过maintemplate.render渲染输出文件的主模板，chunktemplate.render用于渲染输出文件的代码块模板。在这个过程中，maintemplate.render将调用module.source方法来生成模块的输出源代码，并将它们添加到输出文件中，在compiler.emitassets()方法将生成最终的输出文件，并将它们写入磁盘上的目标文件夹中。
76.为帮助本领域技术人员理解本发明，下面对本发明基于webpack打包构建工具的ui主题切换插件的方法作简略说明，如图3所示：
77.(1)前端项目通过webpack打包，安装换肤插件npm包；
78.(2)将插件实例化，修改webpack的插件配置；
79.(3)配置皮肤主题，初始化主题；
80.(4)判断是否有图片类型的主题变量，当有主题变量，当有图片类型的主题变量时，修改sass-loader options的additinaldata属性，前端css代码中使用主题配置中的css变量后，主题生效，当没有图片类型的主题变量时，前端代码直接使用主题配置中的css变量后，主题生效。
81.本发明虽然已以较佳实施例公开如上，但其并不是用来限定本发明，任何本领域技术人员在不脱离本发明的精神和范围内，都可以利用上述揭示的方法和技术内容对本发明技术方案做出可能的变动和修改，因此，凡是未脱离本发明技术方案的内容，依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化及修饰，均属于本发明技术方案的保护范围。

技术特征：
1.一种基于webpack的ui主题切换插件的方法，其特征在于，包括以下步骤：s100：创建npm包项目；s200：编写所述npm包里的webpack插件类，并利用apply函数设置该插处理逻辑信息；s300：在前端项目中，使用所述ui主题切换插件的所述npm包，并在webpack配置文件中引入所述ui主题切换插件，所述webpack运行构建状态时实例化所述ui主题切换插件，以修改所述webpack的插件的主题配置信息；s400：所述webpack运行构建完成后，配置皮肤主题生效。2.由权利要求1所述的基于webpack打包构建工具的ui主题切换插件的方法，其特征在于，在步骤s200中所述ui主题切换的逻辑信息进一步包括：所述webpack插件类读取所述主题配置信息，并生成对应的css文件，并将所述css文件以link的形式通过htmlwebpackplugin生成html中。3.由权利要求2所述的基于webpack打包构建工具的ui主题切换插件的方法，其特征在于，所述css文件由htmlwebpackplugin的alterassettagshook生成。4.由权利要求1所述的基于webpack打包构建工具的ui主题切换插件的方法，其特征在于，所述主题配置信息进一步包括同时支持图片替换的json对象，在所述webpack运行构建状态时实例化所述ui主题切换插件时，根据所述json对象修改所述webpack的插件对应的图片替换的主题配置信息，所述json对象至少包括主题颜色、主题字体，背景，其中，json对象涉及到的变量名遵循css变量命名的方式，以
‘‑‑’
开头；图片类型的变量值，为该所述图片相对于themes.config.js文件的相对路径的地址。5.由权利要求4所述的基于webpack打包构建工具的ui主题切换插件的方法，其特征在于，在步骤s300中实例化所述ui主题切换插件进一步包括,所述webpack插件通过new_themereplacerplugin创建实例，创建所述实例时传入所述json对象。6.由权利要求3所述的基于webpack打包构建工具的ui主题切换插件的方法，其特征在于，所述webpack插件实例化后配置切换ui主题动态进一步包括：所述webpack插件是根据所述主题配置修改所述css文件内容。7.由权利要求3所述的基于webpack打包构建工具的ui主题切换插件的方法，其特征在于，在步骤s400中ui主题切换功能生效进一步包括，所述主题配置的css变量在项目中生效；业务的样式是使用var()的方式使用变量，其中，括号中为在所述json对象中定义的所述变量名。8.由权利要求1所述的基于webpack打包构建工具的ui主题切换插件的方法，其特征在于，在步骤s400中配置所述皮肤主题之后进一步包括：当有图片类型的主题变量时，修改sass-loader options的additinaldata属性，前端css代码中使用所述主题配置中的css变量后主题生效，当没有图片类型的主题变量时，前端代码直接使用所述主题配置中的css变量后主题生效。9.由权利要求1所述的基于webpack打包构建工具的ui主题切换插件的方法，其特征在于，所述ui主题切换插件读取所述webpack的处理结果进一步包括：当emit钩子触发时源文件的转化和组装完成，所述ui主题切换插件读取最终将输出的信息。10.一种电子设备，其特征在于，包括：存储器，所述存储器用于存储处理程序；
处理器，所述处理器执行所述处理程序时实现如权利要求1-9所述的基于webpack打包构建工具的ui主题切换插件的方法。11.一种基于webpack的ui主题切换插件的系统，其特征在于，包括：配置解析单元，用于解析webpack的配置项，用于激活所述webpack的加载项和插件；插件获取单元，用于获取主题配置信息文件；依赖库构建单元，根据所述主题配置信息文件编译构建共享依赖库；依赖库注入单元,用于所述ui主题切换插件的系统启动时，将所述共享依赖库注入到前端应用项目；模块导出单元,用于webpack配置文件导出目前使用的所述配置信息文件。

技术总结
本发明涉及计算机技术领域，一种基于webpack打包构建工具的UI主题切换插件的方法及系统。其中，步骤包括S100：创建npm包项目；S200：编写所述npm包里的webpack插件类，并利用apply函数设置该插处理逻辑信息；S300：在前端项目中，使用所述UI主题切换插件的所述npm包，并在webpack配置文件中引入所述UI主题切换插件，所述webpack运行构建状态时实例化所述UI主题切换插件，以修改所述webpack的插件的主题配置信息；S400：所述webpack运行构建完成后，配置皮肤主题生效。本发明提供了构建UI换肤功能第三方npm模块包，灵活配置、开箱即用，低成本接入项目。前端工程的开发人员只需做简单的配置和api调用，即可完成主题切换功能的开发。能的开发。能的开发。


技术研发人员：周迪 徐镜渊 赵晨雪 杨忠伟
受保护的技术使用者：上海一谈网络科技有限公司
技术研发日：2023.05.12
技术公布日：2023/8/16