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 相关文章推荐
自适应高度框架 ----属个人收藏内容
Jan 22 Javascript
JS 显示当前日期与时间的代码
Mar 24 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
Sep 05 Javascript
九种js弹出对话框的方法总结
Mar 12 Javascript
js正则表达式的使用详解
Jul 09 Javascript
jquery()函数的三种语法介绍
Oct 09 Javascript
JavaScript设置首页和收藏页面的小例子
Nov 11 Javascript
jquery实现submit提交表单
Feb 03 Javascript
javascript检测两个数组是否相似
May 19 Javascript
Angular2 多级注入器详解及实例
Oct 30 Javascript
微信小程序实现下拉框功能
Jul 16 Javascript
React四级菜单的实现
Apr 08 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
西德产收音机
2021/03/01 无线电
PHP迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
PHP可逆加密/解密函数分享
2012/09/25 PHP
ThinkPHP实现递归无级分类――代码少
2015/07/29 PHP
php多线程实现方法及用法实例详解
2015/10/26 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
PHP设计模式之单例模式定义与用法分析
2019/03/26 PHP
JavaScript 学习技巧
2010/02/17 Javascript
JavaScript之自定义类型
2012/05/04 Javascript
深入理解JavaScript 闭包究竟是什么
2013/04/12 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
2015/06/04 Javascript
.NET微信公众号开发之创建自定义菜单
2015/07/16 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
最基础的vue.js双向绑定操作
2017/08/23 Javascript
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
详解重置Django migration的常见方式
2019/02/15 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
python数据化运营的重要意义
2019/11/25 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
人事部岗位职责范本
2014/03/05 职场文书
研讨会主持词
2014/04/02 职场文书
公关活动策划方案
2014/05/25 职场文书
单位授权委托书范本
2014/09/26 职场文书
创先争优个人总结
2015/03/04 职场文书
2015年市场部工作总结
2015/04/30 职场文书
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS