Mod: 换肤相关

Maorey · Dec 17, 2019 · 909fd46 · 909fd46
1 parent 0572884
commit 909fd46
Show file tree

Hide file tree

Showing 32 changed files with 376 additions and 398 deletions.
diff --git a/.env b/.env
@@ -7,12 +7,12 @@ BASE_URL=''
 # 接口地址(hash路由建议相对路径)
 BASE_PATH=api
 
-# 主题文件夹相对路径(其下的文件夹里只要没有index.scss就不会被识别为主题)
-THEME_DIR=theme
-# 默认主题名 camelCase(多主题):THEME_DIR/THEME(/index)?.scss falsy(单主题):THEME_DIR(/index)?.scss
-THEME=light
-# 主题全局(window)变量名
-THEME_FIELD=s
+# 皮肤文件夹相对路径(其下的文件夹里只要没有index.scss就不会被识别为皮肤)
+SKIN_DIR=skin
+# 默认皮肤名 camelCase(多皮肤):SKIN_DIR/SKIN(/index)?.scss falsy(单皮肤):SKIN_DIR(/index)?.scss
+SKIN=light
+# 皮肤全局(window)变量名
+SKIN_FIELD=s
 
 # 全局查询字段（从访问地址查询参数获取, ajax带上该字段, 用于微服务调试指定目标）
 SEARCH_FIELD=_target\d+
diff --git a/.stylelintignore b/.stylelintignore
@@ -3,6 +3,6 @@ dist
 compile
 coverage
 public/css
-src/**/theme/export
+src/**/skin/export
 *.min.css
 export*.scss
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -27,35 +27,16 @@
   },
   "javascript.implicitProjectConfig.experimentalDecorators": true,
 
-  "eslint.autoFixOnSave": true,
-  "eslint.validate": [
-    {
-      "language": "vue",
-      "autoFix": true
-    },
-    {
-      "language": "html",
-      "autoFix": true
-    },
-    {
-      "language": "javascript",
-      "autoFix": true
-    },
-    {
-      "language": "javascriptreact",
-      "autoFix": true
-    },
-    {
-      "language": "typescript",
-      "autoFix": true
-    },
-    {
-      "language": "typescriptreact",
-      "autoFix": true
-    }
-  ],
+  "eslint.format.enable": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+
   // 格式化程序
   "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[vue]": {
+    "editor.defaultFormatter": "octref.vetur"
+  },
   "[jsonc]": {
     "editor.defaultFormatter": "vscode.json-language-features"
   },

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,8 +1,12 @@
 # 更新日志
 
+## v 1.0.0
+
+- [Breaking] 重命名主题(theme)为皮肤(skin)，并调整相关环境变量及目录、文件名
+
 ## v 0.3.0
 
-- 支持多主题构建
+- 支持换肤
 
 ## v 0.2.0
 
@@ -11,7 +15,7 @@
 - 增强代码检查 ESLint & StyleLint
 - 支持内联多个 chunk 到 html (修改自[inline-manifest-webpack-plugin](https://github.com/szrenwei/inline-manifest-webpack-plugin))
 - 使用[hard-source-webpack-plugin](https://github.com/mzgoddard/hard-source-webpack-plugin)优化构建速度
-- 完善 themeLoader
+- 完善 skinLoader
 
 ## v 0.1.0
 

diff --git a/README.md b/README.md
@@ -43,7 +43,7 @@ git config core.ignorecase false # 使git对文件名大小写敏感
 
 ```bash
 yarn dev # --port 9876 : 本次启动使用9876端口 (可以在 .env.development.local 文件中设置)
-yarn dev --mode=production # 调试多主题切换
+yarn dev --mode=production # 调试皮肤切换
 ```
 
 ### 构建项目(生成部署文件)
@@ -91,7 +91,7 @@ yarn vue-cli-service help # [命令] : 比如 yarn vue-cli-service help test:e2e
 │   │── config # 配置目录
 │   │── lang # 多语言目录
 │   │── libs # 存储不(能)通过 npm 管理的第三方或项目 js/css 库
-│   │── scss # .scss/.module.scss 文件
+│   │── scss # (.module).scss 文件
 │   │── router # 路由设置
 │   │── store # 状态管理
 │   │   └── modules # 各模块状态管理
@@ -238,7 +238,7 @@ yarn vue-cli-service help # [命令] : 比如 yarn vue-cli-service help test:e2e
 
   ```scss
   // el.scss
-  @import '~element-ui/packages/theme-chalk/src/button.scss';
+  @import '~element-ui/packages/theme-chalk/src/button';
   ```
 
   ```html
@@ -261,7 +261,7 @@ yarn vue-cli-service help # [命令] : 比如 yarn vue-cli-service help test:e2e
   </script>
   <!-- 也可以在这儿引用
   <style lang="scss">
-  @import '~element-ui/packages/theme-chalk/src/button.scss';
+  @import '~element-ui/packages/theme-chalk/src/button';
   </style> -->
   ```
 
@@ -286,6 +286,7 @@ yarn vue-cli-service help # [命令] : 比如 yarn vue-cli-service help test:e2e
 
   ```scss
   // 以下默认local
+
   // bad →_→
   :global(.content .title.active) {
     color: $colorHighlight;
@@ -313,32 +314,33 @@ yarn vue-cli-service help # [命令] : 比如 yarn vue-cli-service help test:e2e
 
 ### 其他
 
-- 关于多主题方案, 本模板采用的是 `<link rel="alternate stylesheet">`[方案](https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets), 基于`scss`全局变量注入进行多个主题的构建, 优点是支持异步, 浏览器原生支持并且无缝流畅切换. 通过环境变量[.env](.env)进行配置, 在`import` **scss** 文件时可以指定主题和使用的 scss 变量(指定后不生成其他主题的)
+- 关于换肤方案, 本模板采用的是 `<link rel="alternate stylesheet">`[方案](https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets), 基于`scss`全局变量注入进行多个皮肤的构建, 优点是支持异步, 浏览器原生支持并且无缝流畅切换. 通过环境变量[.env](.env)进行配置, 在`import` **scss** 文件时可以指定皮肤和使用的 scss 变量(指定后不生成其他皮肤的)
 
   ```html
   <script lang="ts">
     /// 基础样式 ///
-    import './scss/a.scss?theme='
-    // 指定scss变量文件相对路径(别名、别名/主题文件夹)
-    import './scss/b.scss?theme=|foo.scss'
+    import './scss/a.scss?skin='
+    // 指定scss变量文件相对路径(别名/皮肤文件夹)
+    import './scss/b.scss?skin=|foo.scss'
 
-    /// 主题样式 ///
+    /// 皮肤样式 ///
     import './scss/c.scss'
     import $styleD from './scss/d.module.scss'
 
-    /// 指定各主题下的样式 ///
-    import './scss/e.scss?theme=dark'
-    import './scss/f.scss?theme=light'
+    /// 指定各皮肤下的样式 ///
+    import './scss/e.scss?skin=dark'
+    import './scss/f.scss?skin=light'
 
     // CSS Module
-    import SKIN from '@/utils/skin'
-    import $styleDark from './scss/g.module.scss?theme=dark|foo.scss'
-    import $styleLight from './scss/g.module.scss?theme=light|bar.scss'
+    import getSkin from '@/utils/skin'
+    import styleDark from './scss/g.module.scss?skin=dark|foo.scss'
+    import styleLight from './scss/g.module.scss?skin=light|bar.scss'
 
     // see: https://github.com/kaorun343/vue-property-decorator
     import { Component, Vue } from 'vue-property-decorator'
 
     // const UPPER_CASE:string|number|any[] // 常量
+    const $styleF = getSkin({ dark: styleDark, light: styleLight })
     // const camelCase:any // 单例
     // function utils() {} // 函数(无副作用)
 
@@ -355,12 +357,7 @@ yarn vue-cli-service help # [命令] : 比如 yarn vue-cli-service help test:e2e
       }
 
       private get $styleF() {
-        switch(SKIN.value) {
-          case 'dark':
-            return $styleDark
-          default:
-            return $styleLight
-        }
+        return $styleF
       }
       /// watch (@Watch) ///
       /// LifeCycle (private beforeCreate/created/.../destroyed) ///
@@ -369,25 +366,25 @@ yarn vue-cli-service help # [命令] : 比如 yarn vue-cli-service help test:e2e
     }
   </script>
 
-  <!-- 主题样式 CSS Module or not -->
+  <!-- 皮肤样式 CSS Module or not -->
   <style lang="scss" module>
   .foo {
     color: $red;
   }
   </style>
   <!-- 基础样式 -->
-  <style lang="scss" module theme="theme=|foo.scss">
+  <style lang="scss" module skin="skin=|foo.scss">
   .bar {
     color: $red;
   }
   </style>
-  <!-- 指定各主题下的样式【不支持CSS Module】 -->
-  <style lang="scss" theme="dark">
+  <!-- 指定各皮肤下的样式【不支持CSS Module】 -->
+  <style lang="scss" skin="dark">
   .foo {
     color: $red;
   }
   </style>
-  <style lang="scss" theme="light">
+  <style lang="scss" skin="light">
   .foo {
     color: $red;
   }
@@ -432,6 +429,7 @@ yarn vue-cli-service help # [命令] : 比如 yarn vue-cli-service help test:e2e
   分支注释:
 
   ```TypeScript
+  // if return 或 pipeline ｂ(￣▽￣)ｄ
   if(...) {
     // 说明
   } else if(...) {
@@ -526,7 +524,7 @@ yarn vue-cli-service help # [命令] : 比如 yarn vue-cli-service help test:e2e
 
 #### 工程
 
-暂未找到更多可优化内容(虽然`run scripts`略慢 ┐(: ´ ゞ｀)┌)
+暂未找到更多可优化内容(热更新用不用缓存都差不多)
 
 ### IDE
 
@@ -687,4 +685,3 @@ http {
 ### 其他
 
 - 期待 [vue3.0](https://github.com/vuejs/vue/projects/6) & [webpack 5.0](https://github.com/webpack/webpack/projects/5) [正式版](https://github.com/webpack/changelog-v5/blob/master/README.md)
-- TODO: 多主题方案 module(含共享变量) & normal (chunk and alternate stylesheet) (其实要是不异步加载 css, 没那么复杂) 先支持异步的再说 直接正则修改原始代码 没法 AST 的吧
diff --git a/build/css.js b/build/css.js
@@ -4,15 +4,15 @@
  * @Date: 2019-07-25 19:11:02
  */
 const fiber = require('fibers')
-const themeLoader = require('./themeLoader')
+const skinLoader = require('./skinLoader')
 
 /** 获取样式选项
  * @param {Boolean} isProd 是否生产环境
  * @param {Object} ALIAS 别名字典
  * @param {Object} ENV 环境变量
  */
 module.exports = function(isProd, ALIAS, ENV) {
-  themeLoader.init(ENV)
+  skinLoader.init(ENV)
 
   // https://cli.vuejs.org/zh/config/#css-loaderoptions
   return {
@@ -36,14 +36,14 @@ module.exports = function(isProd, ALIAS, ENV) {
           let content = ''
 
           // 注入scss变量
-          const THEME = themeLoader.getThemeByQuery(loaderContext.resourceQuery)
-          if (THEME) {
-            content = `@import "~@/${THEME.path}";`
+          const SKIN = skinLoader.getSkinByQuery(loaderContext.resourceQuery)
+          if (SKIN) {
+            content = `@import "~@/${SKIN.path}";`
             let temp
             for (const alias in ALIAS) {
               temp = ALIAS[alias]
               loaderContext.context.includes(temp) &&
-                (temp = themeLoader.exists(temp, THEME.path)) &&
+                (temp = skinLoader.exists(temp, SKIN.path)) &&
                 (content += `@import "~${alias}/${temp}";`)
             }
           }

diff --git a/build/insertPreload.js b/build/insertPreload.js
@@ -74,7 +74,7 @@ module.exports = class {
    *    runtime:String|Array<String>|RegExp 内联runtime
    *    defer:Boolean 脚本是否defer 默认true
    *    async:Boolean 脚本是否async 默认false (和defer只能有一个)
-   *    theme:String 默认主题({theme}@{name}.css)
+   *    skin:String 默认皮肤({skin}@{name}.css)
    *  }
    */
   constructor(option = {}) {
@@ -103,8 +103,8 @@ module.exports = class {
     /// 脚本属性 ///
     this._SA =
       option.defer === false ? option.async === true && 'async' : 'defer'
-    /// 主题 ///
-    this._REG_THEME = (this._T = option.theme) && /[\\/]([^\\/]+)@.+/
+    /// 皮肤 ///
+    this._REG_SKIN = (this._T = option.skin) && /[\\/]([^\\/]+)@.+/
   }
 
   // https://webpack.docschina.org/api/plugins/
@@ -207,8 +207,8 @@ module.exports = class {
     const relStyle = 'stylesheet'
     const REG_RUNTIME = this._REG_RUNTIME
 
-    const theme = this._T
-    const REG_THEME = this._REG_THEME
+    const skin = this._T
+    const REG_SKIN = this._REG_SKIN
     const relAlternate = 'alternate ' + relStyle
 
     const SCRIPT_ATTRIBUTE = this._SA
@@ -228,11 +228,11 @@ module.exports = class {
       if (temp.as || temp.rel === relStyle) {
         switch (temp.as) {
           case 'style': // css
-            if (REG_THEME && (el = REG_THEME.exec(temp.href))) {
+            if (REG_SKIN && (el = REG_SKIN.exec(temp.href))) {
               styles.push({
                 tagName: 'link',
                 attributes: {
-                  rel: theme === el[1] ? relStyle : relAlternate,
+                  rel: skin === el[1] ? relStyle : relAlternate,
                   href: temp.href,
                   title: el[1],
                 },

diff --git a/build/production.config.js b/build/production.config.js
@@ -54,7 +54,7 @@ function plugin(config, ENV) {
   config.plugin('insert-preload').use(require.resolve('./insertPreload'), [
     {
       defer: true,
-      theme: ENV.THEME,
+      skin: ENV.SKIN,
       runtime: ['c_', 'r_'],
     },
   ])
@@ -101,20 +101,20 @@ function plugin(config, ENV) {
 module.exports = function(config, ENV, pages) {
   // https://webpack.js.org/configuration/other-options/#recordspath
   config.merge({ recordsPath: require('path').resolve('build/records.log') })
-  /// 多主题 ///
-  const themeLoader = require('./themeLoader')
-  if (themeLoader.init(ENV).THEMES) {
-    const name = 'theme-loader'
+  /// 多皮肤 ///
+  const skinLoader = require('./skinLoader')
+  if (skinLoader.init(ENV).SKINS) {
+    const name = 'skin-loader'
     /** 选项
      * {
-     *   localHandler: String 默认: 'src/utils/theme.ts'
-     *    ({[theme]:Object}) => Object
+     *   localHandler: String 默认: 'src/utils/skin.ts'
+     *    ({[skin]:Object}) => Object
      * }
      */
     config.module
       .rule('scss')
       .use(name)
-      .loader(require.resolve('./themeLoader'))
+      .loader(require.resolve('./skinLoader'))
   }
   fileName(config)
   plugin(config, ENV)