🔨 refactor: 优化脚手架

Qiu-Jun · Aug 21, 2024 · 5af5ffb · 5af5ffb
1 parent 6629ba0
commit 5af5ffb
Show file tree

Hide file tree

Showing 4 changed files with 219 additions and 76 deletions.
diff --git a/build/optimize.ts b/build/optimize.ts
@@ -0,0 +1,97 @@
+/*
+ * @Description:
+ * @Author: June
+ * @Date: 2024-08-21 13:15:34
+ * @LastEditTime: 2024-08-21 13:15:52
+ * @LastEditors: June
+ */
+const include = [
+  'vue',
+  'sass',
+  'axios',
+  'dayjs',
+  'unocss',
+  'vue-router',
+  'vue-i18n',
+  'lodash-es',
+  'element-plus',
+  'element-plus/es',
+  'element-plus/es/locale/lang/zh-cn',
+  'element-plus/es/locale/lang/en',
+  'element-plus/es/components/backtop/style/css',
+  'element-plus/es/components/form/style/css',
+  'element-plus/es/components/radio-group/style/css',
+  'element-plus/es/components/radio/style/css',
+  'element-plus/es/components/checkbox/style/css',
+  'element-plus/es/components/checkbox-group/style/css',
+  'element-plus/es/components/switch/style/css',
+  'element-plus/es/components/time-picker/style/css',
+  'element-plus/es/components/date-picker/style/css',
+  'element-plus/es/components/descriptions/style/css',
+  'element-plus/es/components/descriptions-item/style/css',
+  'element-plus/es/components/link/style/css',
+  'element-plus/es/components/tooltip/style/css',
+  'element-plus/es/components/drawer/style/css',
+  'element-plus/es/components/dialog/style/css',
+  'element-plus/es/components/checkbox-button/style/css',
+  'element-plus/es/components/option-group/style/css',
+  'element-plus/es/components/radio-button/style/css',
+  'element-plus/es/components/cascader/style/css',
+  'element-plus/es/components/color-picker/style/css',
+  'element-plus/es/components/input-number/style/css',
+  'element-plus/es/components/rate/style/css',
+  'element-plus/es/components/select-v2/style/css',
+  'element-plus/es/components/tree-select/style/css',
+  'element-plus/es/components/slider/style/css',
+  'element-plus/es/components/time-select/style/css',
+  'element-plus/es/components/autocomplete/style/css',
+  'element-plus/es/components/image-viewer/style/css',
+  'element-plus/es/components/upload/style/css',
+  'element-plus/es/components/col/style/css',
+  'element-plus/es/components/form-item/style/css',
+  'element-plus/es/components/alert/style/css',
+  'element-plus/es/components/breadcrumb/style/css',
+  'element-plus/es/components/select/style/css',
+  'element-plus/es/components/input/style/css',
+  'element-plus/es/components/breadcrumb-item/style/css',
+  'element-plus/es/components/tag/style/css',
+  'element-plus/es/components/pagination/style/css',
+  'element-plus/es/components/table/style/css',
+  'element-plus/es/components/table-v2/style/css',
+  'element-plus/es/components/table-column/style/css',
+  'element-plus/es/components/card/style/css',
+  'element-plus/es/components/row/style/css',
+  'element-plus/es/components/button/style/css',
+  'element-plus/es/components/menu/style/css',
+  'element-plus/es/components/sub-menu/style/css',
+  'element-plus/es/components/menu-item/style/css',
+  'element-plus/es/components/option/style/css',
+  'element-plus/es/components/dropdown/style/css',
+  'element-plus/es/components/dropdown-menu/style/css',
+  'element-plus/es/components/dropdown-item/style/css',
+  'element-plus/es/components/skeleton/style/css',
+  'element-plus/es/components/skeleton/style/css',
+  'element-plus/es/components/backtop/style/css',
+  'element-plus/es/components/menu/style/css',
+  'element-plus/es/components/sub-menu/style/css',
+  'element-plus/es/components/menu-item/style/css',
+  'element-plus/es/components/dropdown/style/css',
+  'element-plus/es/components/tree/style/css',
+  'element-plus/es/components/dropdown-menu/style/css',
+  'element-plus/es/components/dropdown-item/style/css',
+  'element-plus/es/components/badge/style/css',
+  'element-plus/es/components/breadcrumb/style/css',
+  'element-plus/es/components/breadcrumb-item/style/css',
+  'element-plus/es/components/image/style/css',
+  'element-plus/es/components/collapse-transition/style/css',
+  'element-plus/es/components/timeline/style/css',
+  'element-plus/es/components/timeline-item/style/css',
+  'element-plus/es/components/collapse/style/css',
+  'element-plus/es/components/collapse-item/style/css',
+  'element-plus/es/components/button-group/style/css',
+  'element-plus/es/components/text/style/css'
+]
+
+const exclude = []
+
+export { include, exclude }
diff --git a/build/plugins.ts b/build/plugins.ts
@@ -0,0 +1,107 @@
+/*
+ * @Description:
+ * @Author: June
+ * @Date: 2024-08-21 13:03:57
+ * @LastEditTime: 2024-08-21 13:24:52
+ * @LastEditors: June
+ */
+/*
+ * @Description:
+ * @Author: June
+ * @Date: 2024-08-21 13:03:57
+ * @LastEditTime: 2024-08-21 13:12:03
+ * @LastEditors: June
+ */
+import { PluginOption } from 'vite'
+import electron from 'vite-plugin-electron'
+import AutoImport from 'unplugin-auto-import/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import Components from 'unplugin-vue-components/vite'
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
+import Unocss from 'unocss/vite'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import vue from '@vitejs/plugin-vue'
+import * as path from 'path'
+import { createHtmlPlugin } from 'vite-plugin-html'
+import { isProd } from './getEnv'
+
+/**
+ * 创建 vite 插件
+ * @param viteEnv
+ */
+export const createVitePlugins = (
+  mode: string,
+  command: string,
+  viteEnv: any
+): (PluginOption | PluginOption[])[] => {
+  const _isProd = isProd(mode)
+  const { APP_TITLE } = viteEnv
+  const plugins: PluginOption | PluginOption[] = [
+    vue(),
+    AutoImport({
+      resolvers: [ElementPlusResolver()],
+      eslintrc: {
+        enabled: true, // Default `false`
+        filepath: '../.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
+        globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
+      },
+
+      dts: path.join(__dirname, '../typings/auto-imports.d.ts'),
+      imports: ['vue', 'vue-router', 'vue-i18n']
+    }),
+    Components({
+      resolvers: [ElementPlusResolver()],
+      dirs: [path.join(__dirname, '../src/render/components')],
+      dts: path.join(__dirname, '../typings/components.d.ts')
+    }),
+    createHtmlPlugin({
+      minify: _isProd,
+      inject: {
+        data: {
+          title: APP_TITLE
+        }
+      }
+    }),
+    createSvgIconsPlugin({
+      iconDirs: [path.resolve(__dirname, '../src/render/assets/svgs')], // icon存放的目录
+      symbolId: 'icon-[name]', // symbol的id
+      inject: 'body-last', // 插入的位置
+      customDomId: '__svg__icons__dom__' // svg的id
+    }),
+    Unocss(),
+    vueJsx()
+  ]
+  if (command === 'serve' && mode === 'develectron') {
+    plugins.push(
+      electron([
+        {
+          entry: path.resolve(__dirname, '../src/main/index.ts'),
+          vite: {
+            resolve: {
+              alias: {
+                '~': path.resolve(__dirname, '../src/main')
+              }
+            },
+            build: {
+              outDir: path.resolve(__dirname, '../dist-electron/main')
+            }
+          }
+        },
+        {
+          entry: path.resolve(__dirname, '../src/preload/index.ts'),
+          vite: {
+            resolve: {
+              alias: {
+                '~': path.resolve(__dirname, '../src/main')
+              }
+            },
+            build: {
+              outDir: path.resolve(__dirname, '../dist-electron/preload')
+            }
+          }
+        }
+      ])
+    )
+  }
+  return plugins
+}
diff --git a/typings/env.d.ts b/typings/env.d.ts
@@ -22,3 +22,13 @@ declare global {
     editor: Editor
   }
 }
+
+declare type Recordable<T = any> = Record<string, T>
+
+declare interface ViteEnv {
+  readonly APP_FLAG: string
+  readonly APP_TITLE: string
+  readonly APP_BASE_PATH: string
+  readonly APP_APIHOST: string
+  readonly APP_ADMINAPIHOST: string
+}
diff --git a/vite.config.mts b/vite.config.mts
@@ -3,98 +3,26 @@
  * @Description:
  * @Date: 2023-03-11 00:41:24
  * @LastEditors: June
- * @LastEditTime: 2024-08-21 01:56:00
+ * @LastEditTime: 2024-08-21 13:16:30
  */
 import { defineConfig } from 'vite'
 import type { UserConfig, ConfigEnv } from 'vite'
-import vue from '@vitejs/plugin-vue'
 import * as path from 'path'
-import { createHtmlPlugin } from 'vite-plugin-html'
-import electron from 'vite-plugin-electron'
-import AutoImport from 'unplugin-auto-import/vite'
-import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
-import Components from 'unplugin-vue-components/vite'
-import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
-import Unocss from 'unocss/vite'
-import vueJsx from '@vitejs/plugin-vue-jsx'
+import { exclude, include } from './build/optimize'
+import { createVitePlugins } from './build/plugins'
 import { wrapperEnv, loadEnv } from './build/getEnv'
 
 export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
   const root = process.cwd()
   const env = loadEnv(mode, `${root}/env`)!
   const viteEnv = wrapperEnv(env)
   const envPrefix = 'APP_'
-  const plugins = [
-    vue(),
-    AutoImport({
-      resolvers: [ElementPlusResolver()],
-      eslintrc: {
-        enabled: true, // Default `false`
-        filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
-        globalsPropValue: true // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
-      },
 
-      dts: path.join(root, './typings/auto-imports.d.ts'),
-      imports: ['vue', 'vue-router', 'vue-i18n']
-    }),
-    Components({
-      resolvers: [ElementPlusResolver()],
-      dirs: [path.join(root, 'src/render/components')],
-      dts: path.join(root, './typings/components.d.ts')
-    }),
-    createHtmlPlugin({
-      inject: {
-        data: {
-          title: viteEnv.APP_TITLE
-        }
-      }
-    }),
-    createSvgIconsPlugin({
-      iconDirs: [path.resolve(root, 'src/render/assets/svgs')], // icon存放的目录
-      symbolId: 'icon-[name]', // symbol的id
-      inject: 'body-last', // 插入的位置
-      customDomId: '__svg__icons__dom__' // svg的id
-    }),
-    Unocss(),
-    vueJsx()
-  ]
-  if (command === 'serve' && mode === 'develectron') {
-    plugins.push(
-      electron([
-        {
-          entry: path.resolve(__dirname, 'src/main/index.ts'),
-          vite: {
-            resolve: {
-              alias: {
-                '~': path.resolve(__dirname, 'src/main')
-              }
-            },
-            build: {
-              outDir: path.resolve(__dirname, 'dist-electron/main')
-            }
-          }
-        },
-        {
-          entry: path.resolve(__dirname, 'src/preload/index.ts'),
-          vite: {
-            resolve: {
-              alias: {
-                '~': path.resolve(__dirname, 'src/main')
-              }
-            },
-            build: {
-              outDir: path.resolve(__dirname, 'dist-electron/preload')
-            }
-          }
-        }
-      ])
-    )
-  }
   return {
     root: path.resolve(__dirname, 'src/render'),
     base: './',
     publicDir: 'resources',
-    plugins,
+    plugins: createVitePlugins(mode, command, viteEnv),
     server: {
       port: 3000,
       open: true,
@@ -118,6 +46,7 @@ export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
       }
     },
     envPrefix,
+    optimizeDeps: { include, exclude },
     resolve: {
       alias: {
         '@': path.resolve(__dirname, 'src/render'),