一种基于webpack的UI主题切换插件的方法及系统技术方案

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

【技术实现步骤摘要】
一种基于webpack的UI主题切换插件的方法及系统


[0001]本专利技术涉及计算机
，一种基于webpack打包构建工具的UI(用户界面)主题切换插件的方法及系统。

技术介绍

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

技术实现思路

[0009]专利技术的目的是针对上述技术问题，提出一种基于webpack打包构建工具的UI主题切换插件的方法及系统，本专利技术的目的可通过下列技术方案来实现：
[0010]本专利技术提供一种基于webpack打包构建工具的UI主题切换插件的方法，包括以下
步骤
[0011]S100：创建npm包项目，搭建所述npm包的基础框架；
[0012]S200：编写所述npm包里的webpack插件类，所述webpack插件类实现webpack插件接口功能，并利用apply函数设置该插处理逻辑信息；
[0013]S300：在前端项目中，使用所述UI主题切换插件的所述npm包，并在webpack配置文件中引入所述UI主题切换插件，所述webpack运行构建状态时实例化所述UI主题切换插件，以修改所述webpack的插件的主题配置信息；
[0014]S400：所述webpack运行构建完成后，配置皮肤主题生效。
[0015]进一步地，在步骤S200中，所述UI主题切换的逻辑信息进一步包括：所述Webpack插件类读取所述主题配置信息，并生成对应的CSS文件，并将所述CSS文件以link的形式通过HtmlWebpackPlugin生成html中。
[0016]进一步地，所述CSS文件由HtmlWebpackPlugin的alterAssetTags hook将主题配置生成。
[0017]进一步地，所述主题配置包括json对象，同时支持图片的替换。
[0018]进一步地，所述主题配置信息进一步包括同时支持图片替换的json对象，在所述webpack运行构建状态时实例化所述UI主题切换插件时，根据所述json对象修改所述webpack的插件对应的图片替换的主题配置信息，所述json对象至少包括主题颜色、主题字体，背景，其中，json对象涉及到的变量名遵循CSS变量命名的方式，以
‘‑‑’
开头；图片类型的变量值，为该所述图片相对于themes.config.js文件的相对路径的地址。
[0019]进一步地，在步骤S300中，实例化所述UI主题切换插件进一步包括,所述webpack插件通过new_ThemeReplacerPlugin创建实例，创建所述实例时传入所述json对象。
[0020]进一步地，所述webpack插件实例化后，配置切换UI主题动态时，所述webpack插件实例化后配置切换UI主题动态进一步包括：所述webpack插件是根据所述主题配置修改所述css文件内容。
[0021]进一步地，在步骤S400中UI主题切换功能生效进一步包括，所述主题配置的css变量在项目中生效；业务的样式是使用var()的方式使用变量，其中，括号中为在所述json对象中定义的所述变量名。
[0022]进一步地，在步骤S400中配置所述皮肤主题之后进一步包括：当有图片类型的主题变量时，修改sass
‑
loader options的additinalData属性，前端css代码中使用所述主题配置中的css变量后主题生效，当没有图片类型的主题变量时，前端代码直接使用所述主题配置中的css变量后主题生效。
[0023]进一步地，所述UI主题切换插件读取所述Webpack的处理结果进一步包括：当emit钩子触发时源文件的转化和组装完成，所述UI主题切换插件读取最终将输出的信息。
[0024]本专利技术还提供了一种电子设备，包括：
[0025]存储器，所述存储器用于存储处理程序；
[0026]处理器，所述处理器执行处理程序时实现上述所提到的基于webpack打包构建工具的UI主题切换插件的方法。
[0027]本专利技术还提供了一种基于webpack的UI主题切换插件的系统，包括：
[0028]配置解析单元，用于解析webpack的配置项，用于激活所述webpack的加载项和插
件；
[0029]插件获取单元，用于获取主题配置信息文件；
[0030]依赖库构建单元，根据所述主题配置信息文件分析编译后构建共享依赖库；
[0031]依赖库注入单元,用于所述UI主题切换插件的系统启动时，将所述共享依赖库注入到前端应用项目；
[0032]模块导出单元,用于webpack配置文件导出目前使用的所述配置信息文件。
[本文档来自技高网...

【技术保护点】

【技术特征摘要】
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所...

【专利技术属性】
技术研发人员：周迪，徐镜渊，赵晨雪，杨忠伟，
申请(专利权)人：上海一谈网络科技有限公司，
类型：发明
国别省市：