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 相关文章推荐
javascript this用法小结
Dec 19 Javascript
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
Feb 07 Javascript
解析javascript 浏览器关闭事件
Jul 08 Javascript
通过js来制作复选框的全选和不选效果
May 22 Javascript
jQuery中on()方法用法实例详解
Feb 06 Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
Vue官网todoMVC示例代码
Jan 29 Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 Javascript
JS实现li标签的删除
Apr 12 Javascript
搭建一个Koa后端项目脚手架的方法步骤
May 30 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 Javascript
微信小程序云函数使用mysql数据库过程详解
Aug 07 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
日本十大惊悚动漫
2020/03/04 日漫
自动分页的不完整解决方案
2007/01/12 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
JS中style属性
2006/10/11 Javascript
cloudgamer出品ImageZoom 图片放大效果
2010/04/01 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
jquery 3D 标签云示例代码
2014/06/12 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
javascript中返回顶部按钮的实现
2015/05/05 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
2018/08/22 Javascript
Vue组件之单向数据流的解决方法
2018/11/10 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
2019/11/10 Javascript
js布局实现单选按钮控件
2020/01/17 Javascript
Python的Flask框架中web表单的教程
2015/04/20 Python
使用python加密自己的密码
2015/08/04 Python
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
如何在python开发工具PyCharm中搭建QtPy环境(教程详解)
2020/02/04 Python
Python如何读取、写入JSON数据
2020/07/28 Python
python 解决函数返回return的问题
2020/12/05 Python
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
大学生全国两会报告感想
2014/03/17 职场文书
初中英语演讲稿
2014/04/29 职场文书
大学生违纪检讨书300字
2014/10/25 职场文书
导游词之上饶龟峰
2019/10/25 职场文书