chore: organizing vite configuration files

Author: coderwyd

.vscode/settings.json

@@ -96,6 +96,7 @@
   "cSpell.language": "en,en-US",
   "cSpell.words": [
     "antfu",
+    "brotli",
     "browserslist",
     "coderwyd",
     "commitlint",

build/constant.ts

@@ -0,0 +1,2 @@
+export * from './plugins'
+export * from './utils'

build/index.ts

@@ -0,0 +1,34 @@
+import compressPlugin from 'vite-plugin-compression'
+import type { PluginOption } from 'vite'
+
+export function configCompressPlugin({
+  compress,
+  deleteOriginFile = false,
+}: {
+  compress: string
+  deleteOriginFile?: boolean
+}): PluginOption[] {
+  const compressList = compress.split(',')
+
+  const plugins: PluginOption[] = []
+
+  if (compressList.includes('gzip')) {
+    plugins.push(
+      compressPlugin({
+        ext: '.gz',
+        deleteOriginFile,
+      }),
+    )
+  }
+
+  if (compressList.includes('brotli')) {
+    plugins.push(
+      compressPlugin({
+        ext: '.br',
+        algorithm: 'brotliCompress',
+        deleteOriginFile,
+      }),
+    )
+  }
+  return plugins
+}

build/plugins/compress.ts

@@ -1,16 +1,9 @@
 import { createHtmlPlugin } from 'vite-plugin-html'
 import type { PluginOption } from 'vite'
 
-export function configHtmlPlugin(env: ViteEnv, isBuild: boolean) {
-  const { VITE_GLOB_APP_TITLE } = env
-
+export function configHtmlPlugin({ isBuild }: { isBuild: boolean }) {
   const htmlPlugin: PluginOption[] = createHtmlPlugin({
     minify: isBuild,
-    inject: {
-      data: {
-        title: VITE_GLOB_APP_TITLE,
-      },
-    },
   })
   return htmlPlugin
 }

build/vite/plugin/html.ts build/plugins/html.tsbuild/vite/plugin/html.ts renamed to build/plugins/html.ts

@@ -1,12 +1,10 @@
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
-import UnoCSS from 'unocss/vite'
-import VueDevTools from 'vite-plugin-vue-devtools'
-
+import unocss from 'unocss/vite'
+import vueDevTools from 'vite-plugin-vue-devtools'
 import { configCompressPlugin } from './compress'
 import { configHtmlPlugin } from './html'
 import { viteBuildInfo } from './info'
-
 import unplugin from './unplugin'
 import type { PluginOption } from 'vite'
 
@@ -16,20 +14,20 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
   } = viteEnv
 
   const vitePlugins: (PluginOption | PluginOption[])[] = [
-    VueDevTools(),
     vue(),
     vueJsx(),
-    UnoCSS(),
+    vueDevTools(),
+    unocss(),
     ...unplugin,
   ]
 
   // vite-plugin-html
-  vitePlugins.push(configHtmlPlugin(viteEnv, isBuild))
+  vitePlugins.push(configHtmlPlugin({ isBuild }))
 
   // The following plugins only work in the production environment
   if (isBuild) {
     // rollup-plugin-gzip
-    vitePlugins.push(configCompressPlugin(VITE_BUILD_COMPRESS))
+    vitePlugins.push(configCompressPlugin({ compress: VITE_BUILD_COMPRESS }))
   }
 
   // build info

build/vite/plugin/index.ts build/plugins/index.tsbuild/vite/plugin/index.ts renamed to build/plugins/index.ts

@@ -0,0 +1,44 @@
+import dayjs from 'dayjs'
+import duration from 'dayjs/plugin/duration'
+import { bold, green } from 'picocolors'
+import { getPackageSize } from '../utils'
+import type { Plugin } from 'vite'
+import type { Dayjs } from 'dayjs'
+
+dayjs.extend(duration)
+
+export function viteBuildInfo(): Plugin {
+  let startTime: Dayjs
+  let endTime: Dayjs
+  let outDir: string
+  let config: { command: string }
+  return {
+    name: 'vite:buildInfo',
+    configResolved(resolvedConfig) {
+      config = resolvedConfig
+      outDir = resolvedConfig.build?.outDir ?? 'dist'
+    },
+    buildStart() {
+      if (config.command === 'build')
+        startTime = dayjs(new Date())
+    },
+    closeBundle() {
+      if (config.command === 'build') {
+        endTime = dayjs(new Date())
+        getPackageSize(outDir, (size: string) => {
+          console.log(
+            bold(
+              green(
+                `🎉恭喜打包完成（总用时${dayjs
+                  .duration(endTime.diff(startTime))
+                  .format('mm分ss秒')}，打包后的大小为${
+                    size
+                  }）`,
+              ),
+            ),
+          )
+        })
+      }
+    },
+  }
+}

build/plugins/info.ts

@@ -0,0 +1,88 @@
+import { readdir, stat } from 'node:fs'
+import process from 'node:process'
+import path from 'node:path'
+
+// Read all environment variable configuration files to process.env
+export function wrapperEnv(envConf: Recordable): ViteEnv {
+  const ret: any = {}
+
+  for (const envName of Object.keys(envConf)) {
+    let realName = envConf[envName].replace(/\\n/g, '\n')
+    realName = realName === 'true' ? true : realName === 'false' ? false : realName
+
+    if (envName === 'VITE_PORT')
+      realName = Number(realName)
+
+    ret[envName] = realName
+    if (typeof realName === 'string')
+      process.env[envName] = realName
+    else if (typeof realName === 'object')
+      process.env[envName] = JSON.stringify(realName)
+  }
+  return ret
+}
+
+function sum(arr: number[]) {
+  return arr.reduce((t: number, c: number) => {
+    return t + c
+  }
+  , 0)
+}
+
+function formatBytes(bytes: number, decimals = 2) {
+  if (!+bytes)
+    return '0 Bytes'
+
+  const k = 1024
+  const dm = decimals < 0 ? 0 : decimals
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+  return `${Number.parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export function getPackageSize(folder: string, callback: Function, fileListTotal: number[] = []): void {
+  readdir(folder, (err, files: string[]) => {
+    if (err)
+      throw err
+    let count = 0
+    const checkEnd = () => {
+      ++count === files.length && callback(formatBytes(sum(fileListTotal)))
+    }
+    files.forEach((item: string) => {
+      stat(`${folder}/${item}`, async (err, stats) => {
+        if (err)
+          throw err
+        if (stats.isFile()) {
+          fileListTotal.push(stats.size)
+          checkEnd()
+        }
+        else if (stats.isDirectory()) {
+          getPackageSize(`${folder}/${item}/`, checkEnd, fileListTotal)
+        }
+      })
+    })
+    files.length === 0 && callback()
+  })
+}
+
+/**
+ * 获取项目根路径
+ * @descrition 末尾不带斜杠
+ */
+export function getRootPath() {
+  return path.resolve(process.cwd())
+}
+
+/**
+ * 获取项目src路径
+ * @param srcName - src目录名称(默认: "src")
+ * @descrition 末尾不带斜杠
+ */
+export function getSrcPath(srcName = 'src') {
+  const rootPath = getRootPath()
+
+  return `${rootPath}/${srcName}`
+}