webpack构建换肤功能的思路详解


Posted in Javascript onNovember 27, 2017

最近项目中要实现一个换肤的功能,大体想了下,记录一下思路

要实现换肤功能,目标就是打包生成多份皮肤文件,需要哪个就用哪个

打包生成多份皮肤文件因为项目是使用webpack构建的,要想生成多份css文件,就要在入口中配置多个入口文件,每个入口文件会提取出一个css文件

config.entry={
 app: ['./src/app.js'],
 defaultTheme: ['./src/theme.default.color.js'],
 orangeTheme:['./src/theme.orange.color.js'],
 blueTheme:['./src/theme.blue.color.js'],
}

app.js中

import "./app.styl" //整个项目的样式,在各种皮肤下都保持不变的那部分
theme.blue.color.js 蓝色皮肤js文件
import "./theme/blue.styl"

blue.styl 蓝色皮肤

@require "./css/skinTheme/var.blue" //样式变量,整体为蓝色风格的颜色值
@require "./css/skinTheme/theme.color" //提取出来的需要换肤的那部分样式如代码所示,几个主题js文件中只是单纯的

引入了相应的皮肤样式文件,这样,webpack打包后就会生成几个无用的js文件和一系列皮肤样式文件

到这一步,就得到了需要的皮肤文件,但是需要注意的是,webpack会将生成的js、css路径插入到模板html中,所以,我们打开构建后生成index.html会看到

<html>
 <head>
  <link rel="stylesheet" href="app.xxxx.css" rel="external nofollow" rel="external nofollow" >
  <link rel="stylesheet" href="defaultTheme.xxxxx.css" rel="external nofollow" >
  <link rel="stylesheet" href="orangeTheme.xxxxx.css" rel="external nofollow" >
  <link rel="stylesheet" href="blueTheme.xxxxx.css" rel="external nofollow" >
 </head>
 <body>
  <script src="app.xxxx.js"></script>
  <script src="defaultTheme.xxxx.js"></script>
  <script src="orangeTheme.xxxx.js"></script>
  <script src="blueTheme.xxxx.js"></script>
 </body>

</html>操作index.html接下来就需要操作打包后的index.html,将多余的js引用删掉,将皮肤路径提取出来,然后将皮肤引用删掉也就是要改成这样的文件

/build/index.html
<html>
 <head>
  <script>
   window.cssUrls={
    "defaultTheme":"/defaultTheme.4bdb738cdc062e7842ce.css",
    "orangeTheme":"/orangeTheme.4bdb738cdc062e7842ce.css","blueTheme":"/blueTheme.4bdb738cdc062e7842ce.css"
   }
  </script>
  <link rel="stylesheet" href="app.xxxx.css" rel="external nofollow" rel="external nofollow" >
 </head>
 <body>
  <script src="app.xxxx.js"></script>
 </body>
</html>可以写这样一个操作文件的函数
cssExtract.js
const DISTPATH = 'build/index.html'
const cheerio = require('cheerio')
const fs = require('fs')
const chalk = require('chalk')
const prefix = ['defaultTheme', 'orangeTheme', 'blueTheme']
const cssUrls = {}
function extractCss() {
 fs.readFile(DISTPATH, 'utf8', (err, data) => {
  if (err) {
   throw err
  }
  const $ = cheerio.load(data)
  /**
   * 删除所有主题css,相关链接保存在window.cssUrls中
   */
  $('link').each((index, item) => {
   const href = $(item).attr('href')
   for (const val of prefix) {
    if (href.indexOf(val) !== -1) {
     cssUrls[val] = href
     $(item).remove()
    }
   }
  })
  /**
   * 删除无用的js
   */
  $('script').each((index, item) => {
   const src = $(item).attr('src')
   for (const val of prefix) {
    if (src && src.indexOf(val) !== -1) {
     $(item).remove()
    }
   }
  })
  //插入行内js
  $('base').after(`<script>window.cssUrls=${JSON.stringify(cssUrls)}</script>`)
  fs.writeFile(DISTPATH, $.html(), err => {
   if (err) {
    throw err
   }
   console.log(chalk.cyan('extract css url complete.\n'))
  })
 })
}

extractCss()最后到这里,运行 webpack && node cssExtract.js,index.html就变成上面期望的那样,我们得要了皮肤文件的一个mapping,并保存在window.cssUrls中,接下来,通过切换按钮的方式切换皮肤还是什么其他的就可以自由发挥了.
需要说明的是,换肤功能的重点是对样式的重构,将需要换肤的所有样式提取到一起,通过变量来设置不同的主题

总结

以上所述是小编给大家介绍的webpack构建下换肤功能的实现思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一个cssQuery对象 javascript脚本实现代码
Jul 21 Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
Nov 30 Javascript
jQuery中add实现同时选择两个id对象
Oct 22 Javascript
IE6 fixed的完美解决方案
Mar 31 Javascript
javascript实现PC网页里的拖拽效果
Mar 14 Javascript
基于node实现websocket协议
Apr 25 Javascript
垃圾回收器的相关知识点总结
May 13 Javascript
JS实现520 表白简单代码
May 21 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 Javascript
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
vue实现商城上货组件简易版
Nov 27 #Javascript
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 #Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 #Javascript
vue实现商城购物车功能
Nov 27 #Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 #Javascript
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 #Javascript
JavaScript实现修改伪类样式
Nov 27 #Javascript
You might like
Cannot modify header information错误解决方法
2008/10/08 PHP
PHP中防止直接访问或查看或下载config.php文件的方法
2012/07/07 PHP
使用PHP进行微信公众平台开发的示例
2015/08/21 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2017/03/15 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
php web环境和命令行环境下查找php.ini的位置
2019/07/17 PHP
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
如何在MVC应用程序中使用Jquery
2014/11/17 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
Vue封装的可编辑表格插件方法
2018/08/28 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
Python实现获取某天是某个月中的第几周
2015/02/11 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
Zooplus葡萄牙:欧洲领先的网上宠物商店
2018/07/01 全球购物
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
美国巧克力喷泉品牌:Sephra
2019/05/05 全球购物
超市实习总结自我鉴定
2013/09/19 职场文书
工厂门卫岗位职责
2013/11/25 职场文书
语文课外活动总结
2014/08/27 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
公司员工奖惩制度
2015/08/04 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书