前端组件库自定义主题切换探索-03-webpack-theme-color-replacer webpack 同时替换多个颜色改造

接上一篇《前端组件库自定义主题切换探索-02-webpack-theme-color-replacer webpack 的实现逻辑和原理-02》
这篇我们来开始改造，让这个插件最终能达到我们的目的：

首先修改plugin.config.js。

插件首先要在vue.config.js引用注册，因此先对这里做改造。这里我们指定了四种颜色，primary,danger,warning,other，然后生成配置数据，数据格式如下

{
 primary: {
	 matchColors: getAntdSerials(colorTypes[type]), // colors array for extracting css file, support rgb and hsl.
    fileName: `css/${type}-colors-[contenthash:8].css`, // optional. output css file name, suport [contenthash] and [hash].
    configVar: `tc_cfg_${type}` + Math.random().toString().slice(2),
}
}

后面的代码逻辑都会根据对象的键名（比如primary）来读取每个键名下面的配置来做批量操作

最终代码如下：

const ThemeColorReplacer = require("./webpack-theme-color-replacer/src/index")
// const ThemeColorReplacer = require("webpack-theme-color-replacer")
const generate = require("@ant-design/colors/lib/generate").default

const getAntdSerials = (color) => {
  // 淡化（即less的tint）
  const lightens = new Array(9).fill().map((t, i) => {
    return ThemeColorReplacer.varyColor.lighten(color, i / 10)
  })
  // console.log("lightens", lightens)
  const colorPalettes = generate(color)
  // console.log("colorPalettes", colorPalettes)
  const rgb = ThemeColorReplacer.varyColor.toNum3(color.replace("#", "")).join(",")
  // console.log("rgb", rgb)
  const matchColors = lightens.concat(colorPalettes).concat(rgb)
  // console.log("matchColors", matchColors)
  return matchColors
}
const getRandomString = () => Math.random().toString().slice(2)
const colorTypes = {
  primary: "#1890ff",
  danger: "#F5222D",
  warning: "#F2A830",
  other: "#35964f",
}
const option = {}
for (const type in colorTypes) {
  option[type] = {
    matchColors: getAntdSerials(colorTypes[type]), // colors array for extracting css file, support rgb and hsl.
    fileName: `css/${type}-colors-[contenthash:8].css`, // optional. output css file name, suport [contenthash] and [hash].
    configVar: `tc_cfg_${type}` + getRandomString(),
  }
}
const createThemeColorReplacerPlugin = () => new ThemeColorReplacer({
  option
})

module.exports = createThemeColorReplacerPlugin

在这个验证测试代码过程中，也遇到了不少问题，这里为了省事点，我们就不赘述中间的曲折，直接上改好的代码，后面再附加一些注意的地方

第二个改scr下面的index.js，

这个文件主要是根据option生成LC_THEME_CONFIG变量里面的内容，关键代码是

      const { option } = this.handler.options
      for (const i in option) {
        webpackDefineConfig[i] = option[i].configVar
      }
        new webpack.DefinePlugin({
          LC_THEME_CONFIG: JSON.stringify(webpackDefineConfig)
        }).apply(compiler)

完整的代码如下：

"use strict"
var Handler = require("./handler")

var webpack = require("webpack")

class ThemeColorReplacer {
    constructor(options) {
        this.handler = new Handler(options)
    }

    getBinder(compiler, event) {
        return compiler.hooks
            ? compiler.hooks[event].tapAsync.bind(compiler.hooks[event], "ThemeColorReplacer")
            : compiler.plugin.bind(compiler, event)
    }

    apply(compiler) {
      const webpackDefineConfig = {}
      const { option } = this.handler.options
      for (const i in option) {
        webpackDefineConfig[i] = option[i].configVar
      }
        new webpack.DefinePlugin({
          LC_THEME_CONFIG: JSON.stringify(webpackDefineConfig)
        }).apply(compiler)

      compiler.hooks.thisCompilation.tap("ThemeColorReplacer", (compilation) => {
        compilation.hooks.processAssets.tapAsync(
            {
              name: "ThemeColorReplacer",
              stage: webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS
            },
            (compilationAssets, callback) => {
              this.handler.handle(compilation)
              callback()
            })
      })
    }
}

ThemeColorReplacer.varyColor = require("../client/vary-color")

module.exports = ThemeColorReplacer

第三改造index.js直接引用的Handler.js

这里需要改造的关键地方是

        const { option } = this.options
        // let { injectToHtml } = this.options
        for (const i in option) {
            const { fileName, matchColors, configVar } = option[i]
            const output = this.assetsExtractor.extractAssets(compilation.assets, matchColors, i)
            // console.log("handle output", output)
            // console.log("Extracted theme color css content length: " + output.length)
            const outputName = compilation.getPath(replaceFileName(fileName, output), {})
            this.emitSource(compilation, outputName, new wpSources.RawSource(output))
            // console.log("fileName", fileName)
            // console.log("matchColors", matchColors)
            // 记录动态的文件名，到每个入口js
            // console.log("outputName", outputName)
            this.addToEntryJs(outputName, compilation, output, matchColors, configVar)
        }

另外，其他地方需要传递matchColors和configVar，之前因为只改一种颜色，所以是直接用最外面传递进来的，现在要改变多个则需要在for循环里面传递，最终修改代码如下：

"use strict"
var webpack = require("webpack")
var AssetsExtractor = require("./assets-extractor")
var replaceFileName = require("./replace-file-name")
var LineReg = /\n/g
var wpSources = webpack.sources
if (!wpSources) {
    wpSources = require("webpack-sources") // for webpack 4
}
module.exports = class Handler {
    constructor(options) {
        this.options = {
            isJsUgly: !(process.env.NODE_ENV === "development" || process.argv.find(arg => arg.match(/\bdev/))),
            ...options
        }
        this.assetsExtractor = new AssetsExtractor(this.options.isJsUgly, this.options.changeSelector)
    }

    // Add Webpack5 Support
    emitSource(compilation, name, source) {
        console.log("emitSource name", name)
        var exists = compilation.assets[name]
        if (compilation.updateAsset) { // webpack.version[0] >= '5'
            if (exists) compilation.updateAsset(name, source)
            else compilation.emitAsset(name, source)
        } else {
            if (exists) delete compilation.assets[name]
            compilation.assets[name] = source
        }
    }

    handle(compilation) {
        // Add to assets for output
        const { option } = this.options
        // let { injectToHtml } = this.options
        for (const i in option) {
            const { fileName, matchColors, configVar } = option[i]
            const output = this.assetsExtractor.extractAssets(compilation.assets, matchColors, i)
            // console.log("handle output", output)
            // console.log("Extracted theme color css content length: " + output.length)
            const outputName = compilation.getPath(replaceFileName(fileName, output), {})
            this.emitSource(compilation, outputName, new wpSources.RawSource(output))
            // console.log("fileName", fileName)
            // console.log("matchColors", matchColors)
            // 记录动态的文件名，到每个入口js
            // console.log("outputName", outputName)
            this.addToEntryJs(outputName, compilation, output, matchColors, configVar)
        }
    }

// 自动注入js代码，设置css文件名
    addToEntryJs(outputName, compilation, cssCode, matchColors, configVar) {
        const onlyEntrypoints = {
            entrypoints: true,
            errorDetails: false,
            modules: false,
            assets: false,
            children: false,
            chunks: false,
            chunkGroups: false
        }
        const entrypoints = compilation.getStats().toJson(onlyEntrypoints).entrypoints
        Object.keys(entrypoints).forEach(entryName => {
            const entryAssets = entrypoints[entryName].assets
            for (let i = 0, l = entryAssets.length; i < l; i++) {
                const assetName = entryAssets[i].name || entryAssets[i]
                if (assetName.slice(-3) === ".js" && assetName.indexOf("manifest.") === -1) { //
                    const assetSource = compilation.assets[assetName]
                    if (assetSource && !assetSource._isThemeJsInjected) {
                        const cSrc = this.getEntryJs(outputName, assetSource, cssCode, matchColors, configVar)
                        // cSrc._isThemeJsInjected = true
                        this.emitSource(compilation, assetName, cSrc)
                        break
                    }
                }
            }
        })
    }

    getConfigJs(outputName, cssCode, matchColors, configVar) {
        const config = { url: outputName, colors: matchColors }
        if (this.options.injectCss) {
            config.cssCode = cssCode.replace(LineReg, "")
        }
        return "\n(typeof window=='undefined'?global:window)." + configVar + "=" + JSON.stringify(config) + ";\n"
    }

    getEntryJs(outputName, assetSource, cssCode, matchColors, configVar) {
        const ConcatSource = wpSources.ConcatSource
        const CachedSource = wpSources.CachedSource
        const configJs = this.getConfigJs(outputName, cssCode, matchColors, configVar)
        if (assetSource instanceof CachedSource) { // CachedSource没有node方法，会报错
            return new CachedSource(concatSrc(assetSource._source || assetSource.source(), configJs))
        }
        return concatSrc(assetSource, configJs)

        function concatSrc(assetSource, configJs) {
            if (assetSource instanceof ConcatSource) {
                assetSource.add(configJs)
                return assetSource
            } else {
                return new ConcatSource(assetSource, configJs)
            }
        }
    }
}

这里需要注意的是，在addToEntryJs函数里面，需要吧cSrc._isThemeJsInjected = true去掉。这里是之前插件为了做缓存用的，在测试中发现，加上这一行，window里面最多挂两个tc_cfg_变量，

在原本的判断里面，执行cSrc._isThemeJsInjected = true时，assetSource._isThemeJsInjected 也会变为true，因为this.getEntryJs返回的是一个浅拷贝，且和assetSource同源，从下面的代码可以看到数据的来源


数据最终通过webpack处理而来，至于为什么是浅拷贝，是同源的，没有得去深究。

replace-file-name 不需要更改，源代码即可。

第四需要改的是assets-extractor.js

（原插件是AssetsExtractor，这里为了符合开发规范改了名字）文件。这里没有大改的地方，而是将参数改为从调用的地方传递，而不是直接取自option，改动后代码如下：

var Extractor = require("./extractor")
var cssLoaderRegDev = /\bn?(?:exports|___CSS_LOADER_EXPORT___)\.push\(\[module\.id?, \\?"(.+?\})(?:\\?\\n)?(?:[\\n]*\/\*#\s*sourceMappingURL=.+?\*\/)?\\?", \\?"\\?"(?:\]\)|,\s*\{)/g

// css-loader:  n.exports=t("FZ+f")(!1)).push([n.i,"\n.payment-type[data-v-ffb10066] {......}\n",""])
var cssLoaderRegUgly = /\.push\(\[\w+\.i,['"](.+?\})[\\rn]*['"],['"]['"](?:\]\)|,\{)/g
var CssExtReg = /\.css$/i; var JsExtReg = /\.js$/i
function assetToStr(asset) {
    var src = asset.source() || ""
    return src.toString()
}
const extractAsset = function (fn, asset, matchColors, isJsUgly, changeSelector) {
    const src = assetToStr(asset)
    var cssSrcs = []
    var CssCodeReg = isJsUgly ? cssLoaderRegUgly : cssLoaderRegDev
    src.replace(CssCodeReg, (match, $1) => {
        cssSrcs = cssSrcs.concat(Extractor(changeSelector, $1, matchColors))
    })
    // console.log("cssSrcs", cssSrcs.filter(item=>item))
    return cssSrcs.filter(item => item)
}
function extractAll(assets, matchColors, isJsUgly, changeSelector, type) {
    // console.log("extractAll matchColors", matchColors)
    var cssSrcs = []
    Object.keys(assets).map(fn => {
        // 原本每修改一点源码，都需要对整个项目的assets翻一遍css，影响性能。
        // 故改为在asset上缓存上一次的结果，对没发生变化的asset直接取缓存(已发生变化的asset已经是新对象，无缓存)。
        // console.log("fn", fn)
        const asset = assets[fn]
        // console.log("asset._themeCssCache", asset._themeCssCache)
        let cssRules = ""
        if (asset._themeCssCache && asset._themeCssCache[type]) {
            cssRules = asset._themeCssCache[type]
        } else {
            cssRules = extractAsset(fn, asset, matchColors, isJsUgly, changeSelector)
        }
        // asset._themeCssCache || extractAsset(fn, asset, matchColors, isJsUgly, changeSelector)
        // console.log("cssRules", cssRules)
        if (asset._themeCssCache) {
            asset._themeCssCache[type] = cssRules
        } else {
            asset._themeCssCache = {
                [type]: cssRules
            }
        }

        cssSrcs = cssSrcs.concat(cssRules)
    })
    // console.log("cssSrcs", cssSrcs)
    // console.log("cssSrcs.filter(item => item)", cssSrcs.filter(item => item))
    return cssSrcs
}

module.exports = function AssetsExtractor(isJsUgly, changeSelector) {
    this.extractAssets = function (assets, matchColors, type) {
        // console.log("assets", assets)
        var srcArray = this.extractToArray(assets, matchColors, type)
        // console.log("srcArray", srcArray)
        // 外部的css文件。如cdn加载的

        var output = dropDuplicate(srcArray).join("\n")
        return output
    }
    this.extractToArray = function (assets, matchColors, type) {
        var srcArray = extractAll(assets, matchColors, isJsUgly, changeSelector, type)
        // console.log("srcArray------------------------------------------------------", srcArray)
        if (srcArray.length === 0 && !this._uglyChanged) {
            // 容错一次
            this._uglyChanged = true
            isJsUgly = !isJsUgly
            // 清空缓存
            Object.keys(assets).map(fn => assets[fn]._themeCssCache = 0)
            srcArray = extractAll(assets, matchColors, isJsUgly, changeSelector, type)
        }
        return srcArray
    }
}

function dropDuplicate(arr) {
    var map = {}
    var r = []
    for (var s of arr) {
        if (!map[s]) {
            r.push(s)
            map[s] = 1
        }
    }
    return r
}

这里需要注意的一点是，asset._themeCssCache 需要按照外面传递的类型来存储，否则后面的颜色不生效

        const asset = assets[fn]
        // console.log("asset._themeCssCache", asset._themeCssCache)
        let cssRules = ""
        if (asset._themeCssCache && asset._themeCssCache[type]) {
            cssRules = asset._themeCssCache[type]
        } else {
            cssRules = extractAsset(fn, asset, matchColors, isJsUgly, changeSelector)
        }
        // asset._themeCssCache || extractAsset(fn, asset, matchColors, isJsUgly, changeSelector)
        // console.log("cssRules", cssRules)
        if (asset._themeCssCache) {
            asset._themeCssCache[type] = cssRules
        } else {
            asset._themeCssCache = {
                [type]: cssRules
            }
        }

第五需要改的是assets-extractor.js直接引用的extractor.js。

这里需要改动的是将matchColors从外部直接传入，而不是从option取用
改动后代码如下

var extractorCss = require("./css-extractor")
const testCssCode = function (cssCode, matchColors) {
    var matchColorRegs = matchColors // ['#409EFF', '#409eff', '#53a8ff', '#66b1ff', '#79bbff', '#8cc5ff', '#a0cfff', '#b3d8ff', '#c6e2ff', '#d9ecff', '#ecf5ff', '#3a8ee6', '#337ecc']
        .map(c => new RegExp(c.replace(/\s/g, "").replace(/,/g, ",\\s*") + "([\\da-f]{2})?(\\b|\\)|,|\\s)", "i")) // 255, 255,3
    for (var colorReg of matchColorRegs) {
        if (colorReg.test(cssCode)) return true // && !ExclueCssReg.test(cssCode)
    }
    return false
}
module.exports = function Extractor(changeSelector, src, matchColors) {
    return extractorCss(src, changeSelector).map(function (css) {
        var rules = css.rules.filter(cssCode => testCssCode(cssCode, matchColors))
        if (!rules.length) return ""
        return css.selector + "{" + rules.join(";") + "}"
    })
}

第六个需要改的是extractor.js直接引用的css-extractor.js，

同样是需要改动传参方式，最终代码如下

// \n和备注
var regLfRem = /\\\\?n|\n|\\\\?t|\\\\?r|\/\*[\s\S]+?\*\//g

var SpaceReg = /\s+/g
var TrimReg = /(^|,)\s+|\s+($)/g // 前空格，逗号后的空格; 后空格
var SubCssReg = /\s*>\s*/g // div > a 替换为 div>a
var DataUrlReg = /url\s*\([\\'"\s]*data:/ // url("data:image/svg+xml;base64,PHN2")
var QuotReg = /\\+(['"])/g
// var ExclueCssReg = /(?:scale3d|translate3d|rotate3d|matrix3d)\s*\(/i;
module.exports = function extractCss(src, changeSelector) {
    src = src.replace(regLfRem, "")
    var ret = []
    var nameStart; var nameEnd; var cssEnd = -1
    while (true) {
        nameStart = cssEnd + 1
        nameEnd = src.indexOf("{", nameStart)
        cssEnd = findCssEnd(src, nameEnd)
        if (cssEnd > -1 && cssEnd > nameEnd && nameEnd > nameStart) {
            var cssCode = src.slice(nameEnd + 1, cssEnd)
            if (cssCode.indexOf("{") > -1) { // @keyframes
                var rules = extractCss(cssCode, changeSelector)
            } else {
                rules = getRules(cssCode)
            }
            if (rules.length) {
                var selector = src.slice(nameStart, nameEnd)
                selector = selector.replace(TrimReg, "$1")
                selector = selector.replace(SubCssReg, ">")
                selector = selector.replace(SpaceReg, " ") // lines
                var p = selector.indexOf(";") // @charset utf-8;
                if (p > -1) {
                    selector = selector.slice(p + 1)
                }
                // 改变选择器
                if (changeSelector) {
                    var util = {
                        rules: rules,
                        changeEach: changeEach
                    }
                    selector = changeSelector(selector.split(",").sort().join(","), util) || selector
                }
                ret.push({ selector, rules: rules })
            }
        } else {
            break
        }
    }
    return ret

    // 查找css尾部，兼容 @keyframes {10%{...}}
    function findCssEnd(src, start) {
        var level = 1
        var cssEnd = start
        while (true) {
            cssEnd++
            var char = src[cssEnd]
            if (!char) {
                return -1
            } else if (char === "{") {
                level++
            } else if (char === "}") {
                level--
                if (level === 0) {
                    break
                }
            }
        }
        return cssEnd
    }

    function changeEach(selector, surfix, prefix) {
        surfix = surfix || ""
        prefix = prefix || ""
        return selector.split(",").map(function (s) {
            return prefix + s + surfix
        }).join(",")
    }
}

function getRules(cssCode) {
    var rules = cssCode.split(";")
    var ret = []
    for (var i = 0; i < rules.length; i++) {
        var rule = rules[i].replace(/^\s+|\s+$/, "")
        if (!rule) continue
        if (rule.match(DataUrlReg)) {
            rule += ";" + rules[i + 1]
            rule = rule.replace(QuotReg, "$1")
            i++
        }
        ret.push(rule.replace(SpaceReg, " "))
    }
    return ret
}

现在src下面的文件更改完了，我们先去改调用处的vue文件。

第七是路由文件theme-example.vue

<template>
  <basic-container>
    <div>
      <a-button type="primary">主色-primary</a-button>
      <a-button type="danger">报错色-danger</a-button>
      <span class="my-theme-color">测试自定义主题色</span>
      <span class="my-warning-color">测试自定义警告色</span>
      <span class="my-other-color">测试自定义其他颜色</span>
    </div>
    <setting-drawer ref="settingDrawer"/>
  </basic-container>
</template>
<script lang="ts">
import BasicContainer from "../../components/layouts/basic-container2.vue"
import { Component, Vue } from "vue-property-decorator"
import SettingDrawer from "../../../packages/setting-drawer"

@Component({
  components: {
    BasicContainer,
    SettingDrawer
  },
})
export default class ThemeExample extends Vue {

}
</script>
<style scoped lang="less">
.my-theme-color{
  color: #1890ff;
}
.my-warning-color{
  color: #F2A830;
}
.my-other-color{
  color: #35964f;
}
</style>

第八是setting-drawer.vue，至于basic-container2.vue，就是一个容器文件，先不去管

<template>
  <div class="setting-drawer">
    <div class="setting-drawer-index-content">
      <div :style="{ marginTop: '24px' }">
        <h3 class="setting-drawer-index-title">切换颜色列表</h3>
        <div>
          <a-tooltip class="setting-drawer-theme-color-colorBlock" v-for="(item, index) in colorList" :key="index">
            <template slot="title">
              {{ item.key }}
            </template>
            <a-tag :color="item.color" @click="changeColor(item.color,index)">
              <a-icon type="check" v-if="item.color === color"></a-icon>
              <a-icon type="check" style="color: transparent;" v-else></a-icon>
            </a-tag>
          </a-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { updateTheme, colorList } from "./settingConfig"

export default {
  data () {
    return {
      colorList,
      color: "",
    }
  },
  methods: {
    changeColor (color, index) {
      updateTheme({
        primary: color,
        danger: this.colorList[index + 1] ? this.colorList[index + 1].color : this.colorList[0].color,
        warning: this.colorList[index + 2] ? this.colorList[index + 2].color : (this.colorList[index + 1] ? this.colorList[0].color : this.colorList[1].color),
        other: this.colorList[index + 3] ? this.colorList[index + 3].color : (this.colorList[index + 2] ? this.colorList[index + 2].color : this.colorList[index + 1] ? this.colorList[0].color : this.colorList[2].color),
      })
    },
  }
}
</script>

第九需要改动的是setting-drawer.vue直接引用的settingConfig.js

import themeColor from "./themeColor.js"
const colorList = [
  {
    key: "薄暮", color: "#F5222D"
  },
  {
    key: "火山", color: "#FA541C"
  },
  {
    key: "日暮", color: "#FAAD14"
  },
  {
    key: "明青", color: "#13C2C2"
  },
  {
    key: "极光绿", color: "#52C41A"
  },
  {
    key: "拂晓蓝（默认）", color: "#1890FF"
  },
  {
    key: "极客蓝", color: "#2F54EB"
  },
  {
    key: "酱紫", color: "#722ED1"
  },
  {
    key: "浅紫", color: "#9890Ff"
  }
]

const updateTheme = (changeColors) => {
  // no-undef
  themeColor.changeColor(changeColors).finally(() => {
  })
}

export { updateTheme, colorList }

第十需要改动的是settingConfig.js直接引用的themeColor.js

import client from "../../../config/webpack-theme-color-replacer/client"
import generate from "@ant-design/colors/lib/generate"

export default {
  /**
   * 获取变化的颜色
   * @param color
   * @returns {T[]}
   */
  getAntdSerials (color) {
    // 淡化（即less的tint）
    const lightens = new Array(9).fill().map((t, i) => {
      return client.varyColor.lighten(color, i / 10)
    })
    // colorPalette变换得到颜色值
    // console.log("lightens", lightens)
    const colorPalettes = generate(color)
    // console.log("colorPalettes", colorPalettes)
    const rgb = client.varyColor.toNum3(color.replace("#", "")).join(",")
    // console.log("rgb", rgb)
    return lightens.concat(colorPalettes).concat(rgb)
  },
  /**
   * 改变颜色
   * @param changeColors
   * @returns {Promise<unknown>|Promise<unknown>}
   */
  changeColor (changeColors) {
    const options = {}
    for (const i in changeColors) {
      options[i] = {
        newColors: this.getAntdSerials(changeColors[i]),
        changeUrl (cssUrl) {
          return `/${cssUrl}` // while router is not `hash` mode, it needs absolute path
        }
      }
    }
    return client.changer.changeColor(options)
  }
}

这里的关键改动是根据我们的需要组装插件需要的数据源，关键代码如下：

    for (const i in changeColors) {
      options[i] = {
        newColors: this.getAntdSerials(changeColors[i]),
        changeUrl (cssUrl) {
          return `/${cssUrl}` // while router is not `hash` mode, it needs absolute path
        }
      }
    }

第十一需要改动的是theme-color-changer.js，
这里的关键代码是将themeColorConfig按照类型存储，和按照类型从LC_THEME_CONFIG和window中取用数据，关键代码如下：

    for (const i in option) {
      if (!themeColorConfig[i]) {
        // eslint-disable-next-line no-undef
        console.log("LC_THEME_CONFIG[i]", LC_THEME_CONFIG[i])
        // eslint-disable-next-line no-undef
        themeColorConfig[i] = win()[LC_THEME_CONFIG[i]]
        const later = retry(i)
        // 重试直到themeColorConfig加载
        console.log("later", later)
        if (later) return later
      }
      const { oldColors, newColors, cssUrl, changeUrl } = option[i]
      oldColorsObj[i] = oldColors || themeColorConfig[i].colors || []
      newColorsObj[i] = newColors || []
      const cssUrlValue = themeColorConfig[i].url || cssUrl
      cssUrlObj[i] = changeUrl ? changeUrl(cssUrlValue) : cssUrlValue // url可能被changeUrl改变
    }

这里的option就是注册插件时传递的option，即代码const createThemeColorReplacerPlugin = () => new ThemeColorReplacer({
option
})。
另外 oldColorsObj ，newColorsObj ，cssUrlObj 也需要改为对象形式，需要按照键名存储

其他改动后的完整代码如下：

const _urlColors = {} // {[url]: {id,colors}}
const themeColorConfig = {}

module.exports = {
  _tryNum: 0,
  _tryNumObj: {},
  changeColor: function (option) {
    const _this = this
    const oldColorsObj = {}
    const newColorsObj = {}
    const cssUrlObj = {}
    console.log("wen()", win())
    // eslint-disable-next-line no-undef
    console.log("LC_THEME_CONFIG", LC_THEME_CONFIG)
    console.log("option", option)
    for (const i in option) {
      if (!themeColorConfig[i]) {
        // eslint-disable-next-line no-undef
        console.log("LC_THEME_CONFIG[i]", LC_THEME_CONFIG[i])
        // eslint-disable-next-line no-undef
        themeColorConfig[i] = win()[LC_THEME_CONFIG[i]]
        const later = retry(i)
        // 重试直到themeColorConfig加载
        console.log("later", later)
        if (later) return later
      }
      const { oldColors, newColors, cssUrl, changeUrl } = option[i]
      oldColorsObj[i] = oldColors || themeColorConfig[i].colors || []
      newColorsObj[i] = newColors || []
      const cssUrlValue = themeColorConfig[i].url || cssUrl
      cssUrlObj[i] = changeUrl ? changeUrl(cssUrlValue) : cssUrlValue // url可能被changeUrl改变
    }
    console.log("themeColorConfig", themeColorConfig)

    return new Promise(function (resolve, reject) {
      const optionKeys = Object.keys(option || {})
      const isSameArrReturn = optionKeys.every(key => isSameArr(oldColorsObj[key], newColorsObj[key])) // 判断是不是所有的都相同
      // console.log("isSameArrReturn", isSameArrReturn)
      if (isSameArrReturn) {
        resolve()
      } else {
        for (const i in option) {
          const last = _urlColors[cssUrlObj[i]]
          if (last) {
            // 之前已替换过
            oldColorsObj[i] = last.colors
          }
          if (!isSameArr(oldColorsObj[i], newColorsObj[i])) {
            setCssText(last, cssUrlObj[i], oldColorsObj[i], newColorsObj[i], i, resolve, reject)
          }
        }
      }
    })

    function retry(type) {
      if (!themeColorConfig[type]) {
        if (_this._tryNumObj[type] < 9) {
          _this._tryNumObj[type] = _this._tryNumObj[type] + 1
          return new Promise(function (resolve, reject) {
            setTimeout(function () {
              resolve(_this.changeColor(option))
            }, 100)
          })
        } else {
          themeColorConfig[type] = {}
        }
      }
    }

    function setCssText(last, url, oldColors, newColors, type, resolve, reject) {
      // console.log("last=", last, ",url=", url, ",oldColors=", oldColors, ",newColors=", newColors, ",type=", type,)
      let elStyle = last && document.getElementById(last.id)
      if (elStyle && last.colors) {
        setCssTo(elStyle.innerText)
        last.colors = newColors
        resolve()
      } else {
        // 第一次替换
        const id = "css_" + type + (+new Date())
        console.log("第一次替换")
        console.log("id", id)
        elStyle = document.querySelector(option.appendToEl || "body")
            .appendChild(document.createElement("style"))
        // console.log("elStyle", elStyle)

        elStyle.setAttribute("id", id)
        // console.log("url", url)
        _this.getCssString(url, function (cssText) {
          // console.log("cssText", cssText)
          setCssTo(cssText)
          _urlColors[url] = { id: id, colors: newColors }
          resolve(cssText)
        }, reject)
      }

      function setCssTo(cssText) {
        cssText = _this.replaceCssText(cssText, oldColors, newColors)
        elStyle.innerText = cssText
      }
    }
  },
  replaceCssText: function (cssText, oldColors, newColors) {
    oldColors.forEach(function (color, t) {
      // #222、#222223、#22222350、222, 255,3 => #333、#333334、#33333450、211,133,53、hsl(27, 92.531%, 52.745%)
      const reg = new RegExp(color.replace(/\s/g, "").replace(/,/g, ",\\s*") + "([\\da-f]{2})?(\\b|\\)|,|\\s)", "ig")
      cssText = cssText.replace(reg, newColors[t] + "$1$2") // 255, 255,3
    })
    return cssText
  },
  getCssString: function (url, resolve, reject) {
    // console.log("url", url)
    const xhr = new XMLHttpRequest()
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(xhr.responseText)
        } else {
          reject(xhr.status)
        }
      }
    }
    xhr.onerror = function (e) {
      reject(e)
    }
    xhr.ontimeout = function (e) {
      reject(e)
    }
    xhr.open("GET", url)
    xhr.send()
  },
}
function win() {
  return typeof window === "undefined" ? global : window
}
function isSameArr(oldColors, newColors) {
  if (oldColors.length !== newColors.length) {
    return false
  }
  for (let i = 0, j = oldColors.length; i < j; i++) {
    if (oldColors[i] !== newColors[i]) {
      return false
    }
  }
  return true
}

到这里就结束了，vary-color.js不需要改动。然后我们运行后看下效果（注意每次改动均需重启项目）

颜色批量替换演示

我们可以看到，页面上成功同时替换了4种颜色。到此这个测试完成。但是我们在页面上实现让用户自定义各种颜色的期望能实现吗？
答案是No!!
虽然这不是我们想要的答案，但是还是要接受目前的现实。下面讲下原因：
1、webpack-theme-color-replacer 这个插件只会根据颜色色号去替换，也就是说如果用户自己在主题色和危险色上选了相同的颜色，那么出现的结果会是项目上的主题色和危险色都被同时更改，并且分不开了，除非用户重置。而且如果我们修改css查找正则，比如只找css属性名带primary的，又会导致没有用ant-design样式的颜色不会被替换
2、其他的比如圆角等的修改，估计会波及无辜。因为比如 border-radius: 2px，这样的如果按照目前插件的替换逻辑，只会替换2px，会殃及一大片无辜的样式，就算按照规则改成替换border-radius: 2px整个字符，也会殃及不少的无辜样式。所以并不现实。

所以，好想赶紧升级到vue3啊，可以很爽快的使用css变量来实现这些逻辑！！