国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

webpack構建下換膚功能的思路

Andrman / 2399人閱讀

摘要:最近項目中要實現一個換膚的功能,大體想了下,記錄一下思路要實現換膚功能,目標就是打包生成多份皮膚文件,需要哪個就用哪個打包生成多份皮膚文件因為項目是使用構建的,要想生成多份文件,就要在入口中配置多個入口文件,每個入口文件會提取出一個文件中整

source

最近項目中要實現一個換膚的功能,大體想了下,記錄一下思路

要實現換膚功能,目標就是打包生成多份皮膚文件,需要哪個就用哪個

打包生成多份皮膚文件

因為項目是使用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會看到


    
        
        
        
        
    
    
        
        
        
        
    
操作index.html

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

也就是要改成這樣的文件

/build/index.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(``)

        fs.writeFile(DISTPATH, $.html(), err => {
            if (err) {
                throw err
            }
            console.log(chalk.cyan("extract css url complete.
"))
        })
    })
}
extractCss()
最后

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

需要說明的是,換膚功能的重點是對樣式的重構,將需要換膚的所有樣式提取到一起,通過變量來設置不同的主題

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/54430.html

相關文章

  • webpack構建換膚功能思路

    摘要:最近項目中要實現一個換膚的功能,大體想了下,記錄一下思路要實現換膚功能,目標就是打包生成多份皮膚文件,需要哪個就用哪個打包生成多份皮膚文件因為項目是使用構建的,要想生成多份文件,就要在入口中配置多個入口文件,每個入口文件會提取出一個文件中整 source 最近項目中要實現一個換膚的功能,大體想了下,記錄一下思路 要實現換膚功能,目標就是打包生成多份皮膚文件,需要哪個就用哪個 打包生成多...

    sushi 評論0 收藏0
  • webpack構建換膚功能思路

    摘要:最近項目中要實現一個換膚的功能,大體想了下,記錄一下思路要實現換膚功能,目標就是打包生成多份皮膚文件,需要哪個就用哪個打包生成多份皮膚文件因為項目是使用構建的,要想生成多份文件,就要在入口中配置多個入口文件,每個入口文件會提取出一個文件中整 source 最近項目中要實現一個換膚的功能,大體想了下,記錄一下思路 要實現換膚功能,目標就是打包生成多份皮膚文件,需要哪個就用哪個 打包生成多...

    Alan 評論0 收藏0
  • 手摸手,帶你用vue擼后臺 系列三(實戰篇)

    摘要:社區的認可目前已經是相關最多的開源項目了,體現出了社區對其的認可。監聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。 完整項目地址:vue-element-admin 系類文章一:手摸手,帶你用vue擼后臺 系列一(基礎篇)系類文章二:手摸手,帶你用vue擼后臺 系列二(登錄權限篇)系類文章三:手摸手,帶你用vue擼后臺 系列三(實戰篇)系類文章四:手摸手,帶你用vue擼后臺 系列...

    Channe 評論0 收藏0
  • 手摸手,帶你用vue擼后臺 系列三(實戰篇)

    摘要:社區的認可目前已經是相關最多的開源項目了,體現出了社區對其的認可。監聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。 完整項目地址:vue-element-admin 系類文章一:手摸手,帶你用vue擼后臺 系列一(基礎篇)系類文章二:手摸手,帶你用vue擼后臺 系列二(登錄權限篇)系類文章三:手摸手,帶你用vue擼后臺 系列三(實戰篇)系類文章四:手摸手,帶你用vue擼后臺 系列...

    zgbgx 評論0 收藏0
  • vue+iview+less 實現換膚功能

    摘要:項目搭建用的,框架選擇的首先安裝支持然后去文件夾下的文件中,添加對的支持準備工作做好了,開始換膚新建一個文件夾,在里面新建一個文件定義一個方法,寫上需要的顏色參數如圖文件夾下再新建一個存放各類主題的文件,里面根據自己需求定義各類主題 項目搭建用的vue—cli,css框架選擇的iview1、首先安裝less支持 npm install --save-dev less-loader le...

    LancerComet 評論0 收藏0

發表評論

0條評論

Andrman

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<