建站
咨詢
售后
建站咨詢
新聞中心
最近項目中要實現(xiàn)一個換膚的功能，大體想了下，記錄一下思路
創(chuàng)新互聯(lián)是一家專業(yè)提供洛川企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為洛川眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進行中。
要實現(xiàn)換膚功能，目標就是打包生成多份皮膚文件，需要哪個就用哪個
打包生成多份皮膚文件因為項目是使用webpack構(gòu)建的，要想生成多份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" //樣式變量，整體為藍色風(fēng)格的顏色值 @require "./css/skinTheme/theme.color" //提取出來的需要換膚的那部分樣式如代碼所示，幾個主題js文件中只是單純的
引入了相應(yīng)的皮膚樣式文件，這樣，webpack打包后就會生成幾個無用的js文件和一系列皮膚樣式文件
到這一步，就得到了需要的皮膚文件,但是需要注意的是，webpack會將生成的js、css路徑插入到模板html中，所以，我們打開構(gòu)建后生成index.html會看到
操作index.html接下來就需要操作打包后的index.html，將多余的js引用刪掉，將皮膚路徑提取出來，然后將皮膚引用刪掉也就是要改成這樣的文件
/build/index.html
可以寫這樣一個操作文件的函數(shù)
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，相關(guān)鏈接保存在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()
}
}
})
//插入行內(nèi)js
$('base').after(``)
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中，接下來，通過切換按鈕的方式切換皮膚還是什么其他的就可以自由發(fā)揮了.
需要說明的是，換膚功能的重點是對樣式的重構(gòu)，將需要換膚的所有樣式提取到一起，通過變量來設(shè)置不同的主題
總結(jié)
以上所述是小編給大家介紹的webpack構(gòu)建下?lián)Q膚功能的實現(xiàn)思路詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！
網(wǎng)頁標題：webpack構(gòu)建換膚功能的思路詳解
分享URL：http://www.ef60e0e.cn/article/jegshj.html
