webpack構建下換膚功能的思路

Alan 發布于2019-08-29 13:53 / 901人閱讀

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

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中，接下來，通過切換按鈕的方式切換皮膚還是什么其他的就可以自由發揮了.

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

云服務器 GPU云服務器換膚功能構建功能 webpack的作用 linux下換硬盤

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

轉載請注明本文地址：http://m.hztianpu.com/yun/112772.html

webpack構建下換膚功能的思路

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

Andrman 2019-08-02 15:58 評論0 收藏0
webpack構建下換膚功能的思路

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

sushi 2019-08-21 17:48 評論0 收藏0
手摸手，帶你用vue擼后臺系列三(實戰篇)

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

Channe 2019-08-20 17:15 評論0 收藏0
手摸手，帶你用vue擼后臺系列三(實戰篇)

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

zgbgx 2019-08-29 12:46 評論0 收藏0
vue+iview+less 實現換膚功能

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

LancerComet 2019-08-29 16:26 評論0 收藏0