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 相关文章推荐
js 利用className得到对象的实现代码
Nov 15 Javascript
javascript 构造函数强制调用经验总结
Dec 02 Javascript
浅谈关于JavaScript的语言特性分析
Apr 11 Javascript
Jquery实现的一种常用高亮效果示例代码
Jan 28 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
Jun 19 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
Apr 01 Javascript
原生JS上传大文件显示进度条 php上传文件代码
Mar 27 Javascript
浅谈Vue的加载顺序探讨
Oct 25 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 Javascript
Node.js中文件系统fs模块的使用及常用接口
Mar 06 Javascript
javascript this指向相关问题及改变方法
Nov 19 Javascript
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
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
Javascript 类型转换方法
2010/10/24 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
2015/09/04 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
XML、HTML、CSS与JS的区别整理
2016/02/18 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
详解webpack打包vue时提取css
2017/05/26 Javascript
vue-router中的hash和history两种模式的区别
2018/07/17 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
TensorFlow的权值更新方法
2018/06/14 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
python读取文件名并改名字的实例
2019/01/07 Python
python pytest进阶之xunit fixture详解
2019/06/27 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
python区分不同数据类型的方法
2019/10/14 Python
python计算n的阶乘的方法代码
2019/10/25 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
python如何构建mock接口服务
2021/01/28 Python
幼儿园园长岗位职责
2013/11/26 职场文书
大课间体育活动方案
2014/03/12 职场文书
优秀学生评语大全
2014/04/25 职场文书
应届毕业生自荐信
2014/05/28 职场文书
水电维修专业推荐信
2014/09/06 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
2015员工年度考核评语
2015/03/25 职场文书
公司出差管理制度范本
2015/08/05 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers