webpackは皮膚交換機能を構築する構想を詳しく説明します。

4465 ワード

webpack 肌を洗う

最近のプロジェクトでは、皮膚の交換機能を実現するために、大体考えて、考えを記録します。
皮膚の交換機能を実現するには、複数の皮膚文書を作成するために包装することが目標です。どれを使えばいいですか？
包装して複数の皮膚文書を作成します。プロジェクトは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"

ブルー.stylブルーの肌


@require "./css/skinTheme/var.blue" //    ，           
@require "./css/skinTheme/theme.color" //                    ，    js

相応の皮膚様式の文書を導入しました。そうすると、webpackは包装後、無駄なjsファイルと一連の皮膚様式ファイルを作成します。
このステップで必要な皮膚文書が得られますが、webpackは生成したjs、cssパスをテンプレートに挿入しますので、構築を開けてindex.を生成すると見られます。


<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>

<>>操作index.は次から操作して包装したindex.を操作しなければならなくて、余分な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.
'))
  })
 })
}

extracctCssは最後にここに来て、webpack&node cssExtract.jsを実行します。index.は上のようになります。皮膚ファイルのmappingを必要として、window.cssUrlsに保存します。次に、スイッチボタンを切り替えることで皮膚を切り替えることができますか？それとも他のものは自由に発揮できます。
説明が必要なのは、換肌機能の重点はスタイルの再構成であり、換肌が必要なすべてのスタイルを一緒に抽出し、変数によって異なるテーマを設定することです。
締め括りをつける
以上述べたのは小编が皆さんに绍介したwebpack构筑の下で皮肤の交替の机能の実现の考え方は详しく解决して、みんなに助けがあることを望んでいます。ここでも私たちのサイトを応援してくれてありがとうございます。

JSは貪欲アルゴリズムに基づいてリュックサック問題を解決する例を示します。

Javaローカルキャッシュを実現する方法解析