本申请提供了一种基于代码编译工具打包发版物支持IE11的色系二开的方法、装置、电子设备及计算机可读存储介质，该方法包括：在引入色系二开插件的情况下，向色系二开插件中配置第一转换器；其中，第一转换器用于缓存所有css源文件以及css源文件里的网址内容；向色系二开插件中配置第二转换器；其中，第二转换器用于缓存所有less源文件以及less源文件里的网址内容；向色系二开插件中配置第一规则以及第二规则；其中，第一规则用于为less源文件传入默认色系变量；基于第二规则、默认色系变量将所有less源文件转化为css源文件；基于默认色系变量实现色系的切换。本申请能够有效地提高色系切换的可靠性。高色系切换的可靠性。高色系切换的可靠性。
【技术实现步骤摘要】
基于代码编译工具打包发版物支持IE11的色系二开的方法
[0001]本申请属于计算机
，尤其涉及一种基于代码编译工具打包发版物支持IE11的色系二开的方法、装置、电子设备及计算机可读存储介质。
技术介绍
[0002]webpack是代码编译工具，有入口、出口、转换器loader和插件。webpack是一个用于现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个bundle。
[0003]现在Web前端工程很多都使用webpack进行网站打包，生产模式下打包会进行代码混淆，这样代码很难阅读，有效地保护了前端代码，项目后期升级也容易。
[0004]但是，代码发版物发给不同项目上后，有些项目上希望可以将色系切换成符合用户风格的色系，如果直接采用网站打包的方式，极大程度地影响色系切换的效率。
[0005]为了更便利地实现色系切换，现有流行的技术是使用css变量，通过切换css变量来实现色系切换；也有直接在浏览器中使用less框架动态修改less变量来实现色系切换。
[0006]但是，上述进行色系切换的方式，会影响色系切换的可靠性。
[0007]因此，如何提高色系切换的可靠性是本领域技术人员亟需解决的技术问题。
技术实现思路
[0008]本申请实施例提供一种基于代码编译工具打包发版物支持IE 11的色系二开的方法、装置、电子设备及计算机可读存储介质，能够有效地提高色系切换的可靠性。
[0009]第一方面，本申请实施例提供一种基于代码编译工具打包发版物支持IE11的色系二开的方法，方法包括：在引入色系二开插件的情况下，向色系二开插件中配置第一转换器；其中，第一转换器用于缓存所有css源文件以及css源文件里的网址内容；
[0010]向色系二开插件中配置第二转换器；其中，第二转换器用于缓存所有less源文件以及less源文件里的网址内容；
[0011]向色系二开插件中配置第一规则以及第二规则；其中，第一规则用于为less源文件传入默认色系变量；
[0012]基于第二规则、默认色系变量将所有less源文件转化为css源文件；
[0013]基于默认色系变量实现色系的切换。
[0014]可选的，基于默认色系变量实现色系的切换，包括：
[0015]向色系二开插件中传入至少一个色系；
[0016]判断色系是否满足预设色系；
[0017]在色系满足预设色系时，将默认色系变量修改为色系，以实现色系的切换。
[0018]可选的，在判断色系是否满足预设色系之后，方法还包括：
[0019]在色系不满足预设色系时，拷贝第一规则；
[0020]将默认色系变量修改为预设色系，以实现色系的切换。
[0021]可选的，在向色系二开插件中配置第一转换器之后，方法还包括：
[0022]将其它页面的css源文件通过脚本加载器引入到色系二开插件；
[0023]在将其它页面的css源文件通过脚本加载器引入到色系二开插件之后，将所有css源文件抽取成单独的文件。
[0024]可选的，在向色系二开插件中配置第二转换器之后，方法还包括：
[0025]利用优化块将异步代码块中的css源文件中的内容转移到主代码块和主代码块一起进行加载。
[0026]可选的，在向色系二开插件中配置第二转换器之后，方法还包括：
[0027]利用附加块增加新的代码块文件；
[0028]基于新的代码块文件将css源文件的名称增加色系前缀。
[0029]第二方面，本申请实施例提供了一种基于代码编译工具打包发版物支持IE 11的色系二开的装置，装置包括：第一配置模块，用于在引入色系二开插件的情况下，向色系二开插件中配置第一转换器；其中，第一转换器用于缓存所有css源文件以及css源文件里的网址内容；第二配置模块，用于向色系二开插件中配置第二转换器；其中，第二转换器用于缓存所有less源文件以及less源文件里的网址内容；第三配置模块，用于向色系二开插件中配置第一规则以及第二规则；其中，第一规则用于为less源文件传入默认色系变量；转化模块，用于基于第二规则、默认色系变量将所有less源文件转化为css源文件；切换模块，用于基于默认色系变量实现色系切换。
[0030]可选的，切换模块，用于向色系二开插件中传入至少一个色系；判断色系是否满足预设色系；在色系满足预设色系时，将默认色系变量修改为色系，以实现色系的切换。
[0031]可选的，切换模块，用于在色系不满足预设色系时，拷贝第一规则；
[0032]将默认色系变量修改为预设色系，以实现色系的切换。
[0033]可选的，装置还包括：引入模块，用于将其它页面的css源文件通过脚本加载器引入到色系二开插件；抽取模块，用于在将其它页面的css源文件通过脚本加载器引入到色系二开插件之后，将所有css源文件抽取成单独的文件。
[0034]可选的，装置还包括：转移模块，用于利用优化块将异步代码块中的css源文件中的内容转移到主代码块和主代码块一起进行加载。
[0035]可选的，装置还包括：第一增加模块，用于利用附加块增加新的代码块文件；第二增加模块，用于基于新的代码块文件将css源文件的名称增加色系前缀。
[0036]第三方面，提供了一种电子设备，该电子设备包括处理器、存储器及存储在存储器上并可在处理器上运行的程序或指令，程序或指令被处理器执行时实现如第一方面所示的基于代码编译工具打包发版物支持IE 11的色系二开的方法的步骤。
[0037]第四方面，提供了一种可读存储介质，该可读存储介质上存储程序或指令，程序或指令被处理器执行时实现如第一方面所示的基于代码编译工具打包发版物支持IE11的色系二开的方法的步骤。
[0038]本申请在引入色系二开插件的情况下，向色系二开插件中配置第一转换器；其中，第一转换器用于缓存所有css源文件以及css源文件里的网址内容；向色系二开插件中配置第二转换器；其中，第二转换器用于缓存所有less源文件以及less源文件里的网址内容；向
色系二开插件中配置第一规则以及第二规则；其中，第一规则用于为less源文件传入默认色系变量；基于第二规则、默认色系变量将所有less源文件转化为css源文件；基于默认色系变量实现色系的切换。本申请能够有效地提高色系切换的可靠性。
附图说明
[0039]为了更清楚地说明本专利技术具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本申请的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0040]图1是本申请一个实施例提供的基于代码编译工具打本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种基于代码编译工具打包发版物支持IE11的色系二开的方法，其特征在于，所述方法包括：在引入色系二开插件的情况下，向所述色系二开插件中配置第一转换器；其中，所述第一转换器用于缓存所有css源文件以及所述css源文件里的网址内容；向所述色系二开插件中配置第二转换器；其中，所述第二转换器用于缓存所有less源文件以及所述less源文件里的网址内容；向所述色系二开插件中配置第一规则以及第二规则；其中，所述第一规则用于为所述less源文件传入默认色系变量；基于所述第二规则、所述默认色系变量将所有所述less源文件转化为css源文件；基于所述默认色系变量实现色系的切换。2.根据权利要求1所述的基于代码编译工具打包发版物支持IE11的色系二开的方法，其特征在于，所述基于所述默认色系变量实现色系的切换，包括：向所述色系二开插件中传入至少一个色系；判断所述色系是否满足预设色系；在所述色系满足所述预设色系时，将所述默认色系变量修改为所述色系，以实现所述色系的切换。3.根据权利要求2所述的基于代码编译工具打包发版物支持IE11的色系二开的方法，其特征在于，在所述判断所述色系是否满足预设色系之后，所述方法还包括：在所述色系不满足所述预设色系时，拷贝所述第一规则；将所述默认色系变量修改为所述预设色系，以实现所述色系的切换。4.根据权利要求1所述的基于代码编译工具打包发版物支持IE11的色系二开的方法，其特征在于，在所述向所述色系二开插件中配置第一转换器之后，所述方法还包括：将其它页面的所述css源文件通过脚本加载器引入到所述色系二开插件；在将其它页面的所述css源文件通过脚本加载器引入到所述色系二开插件之后，将所述所有css源文件抽取成单独的文件。5.根据权利要求1所述的基于代码编译工具打包发版物支持IE11的色系二开的方法，其特征在于，在向所述色系二开插件中配置第二转换器之后，所述方法还包括：利用优化块将异步代码块中的css源文件中的内容转移到主代码块和所述主代...
【专利技术属性】
技术研发人员：温立志，张智慧，刘庆龙，李彤，
申请(专利权)人：北京元年科技股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。