成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

webpack構(gòu)建下?lián)Q膚功能的思路

Andrman / 2409人閱讀

摘要：最近項(xiàng)目中要實(shí)現(xiàn)一個(gè)換膚的功能，大體想了下，記錄一下思路要實(shí)現(xiàn)換膚功能，目標(biāo)就是打包生成多份皮膚文件，需要哪個(gè)就用哪個(gè)打包生成多份皮膚文件因?yàn)轫?xiàng)目是使用構(gòu)建的，要想生成多份文件，就要在入口中配置多個(gè)入口文件，每個(gè)入口文件會(huì)提取出一個(gè)文件中整

source

最近項(xiàng)目中要實(shí)現(xiàn)一個(gè)換膚的功能，大體想了下，記錄一下思路

要實(shí)現(xiàn)換膚功能，目標(biāo)就是打包生成多份皮膚文件，需要哪個(gè)就用哪個(gè)

打包生成多份皮膚文件

因?yàn)轫?xiàng)目是使用webpack構(gòu)建的，要想生成多份css文件，就要在入口中配置多個(gè)入口文件，每個(gè)入口文件會(huì)提取出一個(gè)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" //整個(gè)項(xiàng)目的樣式，在各種皮膚下都保持不變的那部分

theme.blue.color.js 藍(lán)色皮膚js文件

import "./theme/blue.styl"

blue.styl 藍(lán)色皮膚

@require "./css/skinTheme/var.blue" //樣式變量，整體為藍(lán)色風(fēng)格的顏色值
@require "./css/skinTheme/theme.color" //提取出來(lái)的需要換膚的那部分樣式

如代碼所示，幾個(gè)主題js文件中只是單純的引入了相應(yīng)的皮膚樣式文件，這樣，webpack打包后就會(huì)生成幾個(gè)無(wú)用的js文件和一系列皮膚樣式文件

到這一步，就得到了需要的皮膚文件,但是需要注意的是，webpack會(huì)將生成的js、css路徑插入到模板html中，所以，我們打開(kāi)構(gòu)建后生成index.html會(huì)看到
操作index.html

接下來(lái)就需要操作打包后的index.html，將多余的js引用刪掉，將皮膚路徑提取出來(lái)，然后將皮膚引用刪掉

也就是要改成這樣的文件

/build/index.html

可以寫這樣一個(gè)操作文件的函數(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()
                }
            }
        })
        /**
         * 刪除無(wú)用的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.
"))
        })
    })
}
extractCss()
最后

到這里，運(yùn)行 webpack && node cssExtract.js,index.html就變成上面期望的那樣，我們得要了皮膚文件的一個(gè)mapping,并保存在window.cssUrls中，接下來(lái)，通過(guò)切換按鈕的方式切換皮膚還是什么其他的就可以自由發(fā)揮了.

需要說(shuō)明的是，換膚功能的重點(diǎn)是對(duì)樣式的重構(gòu)，將需要換膚的所有樣式提取到一起，通過(guò)變量來(lái)設(shè)置不同的主題

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/54430.html

相關(guān)文章

  • webpack構(gòu)建下換膚功能的思路

    摘要：最近項(xiàng)目中要實(shí)現(xiàn)一個(gè)換膚的功能，大體想了下，記錄一下思路要實(shí)現(xiàn)換膚功能，目標(biāo)就是打包生成多份皮膚文件，需要哪個(gè)就用哪個(gè)打包生成多份皮膚文件因?yàn)轫?xiàng)目是使用構(gòu)建的，要想生成多份文件，就要在入口中配置多個(gè)入口文件，每個(gè)入口文件會(huì)提取出一個(gè)文件中整 source 最近項(xiàng)目中要實(shí)現(xiàn)一個(gè)換膚的功能，大體想了下，記錄一下思路 要實(shí)現(xiàn)換膚功能，目標(biāo)就是打包生成多份皮膚文件，需要哪個(gè)就用哪個(gè) 打包生成多...

    sushi 評(píng)論0 收藏0

  • webpack構(gòu)建下換膚功能的思路

    摘要：最近項(xiàng)目中要實(shí)現(xiàn)一個(gè)換膚的功能，大體想了下，記錄一下思路要實(shí)現(xiàn)換膚功能，目標(biāo)就是打包生成多份皮膚文件，需要哪個(gè)就用哪個(gè)打包生成多份皮膚文件因?yàn)轫?xiàng)目是使用構(gòu)建的，要想生成多份文件，就要在入口中配置多個(gè)入口文件，每個(gè)入口文件會(huì)提取出一個(gè)文件中整 source 最近項(xiàng)目中要實(shí)現(xiàn)一個(gè)換膚的功能，大體想了下，記錄一下思路 要實(shí)現(xiàn)換膚功能，目標(biāo)就是打包生成多份皮膚文件，需要哪個(gè)就用哪個(gè) 打包生成多...

    Alan 評(píng)論0 收藏0

  • 手摸手，帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇)

    摘要：社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開(kāi)源項(xiàng)目了，體現(xiàn)出了社區(qū)對(duì)其的認(rèn)可。監(jiān)聽(tīng)事件手動(dòng)維護(hù)列表這樣我們就簡(jiǎn)單的完成了拖拽排序。 完整項(xiàng)目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺(tái) 系列一(基礎(chǔ)篇)系類文章二：手摸手，帶你用vue擼后臺(tái) 系列二(登錄權(quán)限篇)系類文章三：手摸手，帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺(tái) 系列...

    Channe 評(píng)論0 收藏0

  • 手摸手，帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇)

    摘要：社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開(kāi)源項(xiàng)目了，體現(xiàn)出了社區(qū)對(duì)其的認(rèn)可。監(jiān)聽(tīng)事件手動(dòng)維護(hù)列表這樣我們就簡(jiǎn)單的完成了拖拽排序。 完整項(xiàng)目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺(tái) 系列一(基礎(chǔ)篇)系類文章二：手摸手，帶你用vue擼后臺(tái) 系列二(登錄權(quán)限篇)系類文章三：手摸手，帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺(tái) 系列...

    zgbgx 評(píng)論0 收藏0

  • vue+iview+less 實(shí)現(xiàn)換膚功能

    摘要：項(xiàng)目搭建用的，框架選擇的首先安裝支持然后去文件夾下的文件中，添加對(duì)的支持準(zhǔn)備工作做好了，開(kāi)始換膚新建一個(gè)文件夾，在里面新建一個(gè)文件定義一個(gè)方法，寫上需要的顏色參數(shù)如圖文件夾下再新建一個(gè)存放各類主題的文件，里面根據(jù)自己需求定義各類主題 項(xiàng)目搭建用的vue—cli，css框架選擇的iview1、首先安裝less支持 npm install --save-dev less-loader le...

    LancerComet 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<