FranklinWH-Toolbox/vitePlugins.config.ts

import type { PluginOption } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import VueMacros from 'vue-macros/vite'
import viteCompression from 'vite-plugin-compression'
import VueDevTools from 'vite-plugin-vue-devtools'
import UnoCSS from 'unocss/vite'
import AutoImport from 'unplugin-auto-import/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'
import type { ImportMetaEnv } from './env'

/**
 * 创建 vite 插件
 * @param ImportMetaEnv
 */
export const createVitePlugins = (viteEnv: ImportMetaEnv): (PluginOption | PluginOption[])[] => {
  const { VITE_GLOB_APP_TITLE, VITE_REPORT, VITE_DEVTOOLS, VITE_CODEINSPECTOR } = viteEnv
  return [
    VueMacros({
      plugins: {
        vue: vue(),
        // vue 可以使用 jsx/tsx 语法
        vueJsx: vueJsx(),
      },
    }),
    UnoCSS(),
    // NaiveUi 按需引入
    AutoImport({
      imports: [
        'vue',
        {
          'naive-ui': ['useDialog', 'useMessage', 'useNotification', 'useLoadingBar', 'useModal'],
        },
      ],
      dts: 'src/types/auto-imports.d.ts',
    }),
    Components({
      resolvers: [NaiveUiResolver()],
      // dts: 'src/types/components.d.ts',
      dts: false,
    }),
    // vue devTools
    VITE_DEVTOOLS === 'true' && VueDevTools({ launchEditor: 'code' }),
    // 创建打包压缩配置
    createCompression(viteEnv),
    // 查看配置信息
    // {
    //   name: 'debug-config',
    //   configResolved(config) {
    //     console.log('🚀 Vite Final Config:', config)
    //   },
    // },
    // 查看中间件信息
    {
      name: 'inspect-middleware',
      configureServer(server) {
        console.log('🔍 Middlewares:')
        server.middlewares.stack.forEach((layer, i) => {
          const route = layer.route || '(root)'
          const name = 'name' in layer.handle ? layer.handle['name'] : '(anonymous)'
          const handleType = typeof layer.handle
          console.log(`${i + 1}. [${route}] → ${name} (${handleType})`)
        })
      },
    },
    // 中间件监控
    // {
    //   name: 'middleware-tracker',
    //   configureServer(server) {
    //     const stack = server.middlewares.stack

    //     stack.forEach((layer, i) => {
    //       const originalHandle = layer.handle
    //       const name = originalHandle.name || `(anonymous-${i})`
    //       const handleInfo = originalHandle.toString()

    //       layer.handle = function wrappedHandle(req, res, next) {
    //         console.log(`🔥 Middleware [${name}] triggered by: ${req.method} ${req.url}`)
    //         // if (!originalHandle.name) console.log(`handleInfo: ${handleInfo}`)
    //         return originalHandle(req, res, next)
    //       }
    //     })
    //   },
    // },
  ]
}

/**
 * @description 根据 compress 配置，生成不同的压缩规则
 * @param ImportMetaEnv
 */
const createCompression = (viteEnv: ImportMetaEnv): PluginOption | PluginOption[] => {
  const { VITE_BUILD_COMPRESS = 'none', VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv
  const compressList = VITE_BUILD_COMPRESS.split(',')
  const plugins: PluginOption[] = []
  if (compressList.includes('gzip')) {
    plugins.push(
      viteCompression({
        ext: '.gz',
        algorithm: 'gzip',
        deleteOriginFile: VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE === 'true',
      }),
    )
  }
  if (compressList.includes('brotli')) {
    plugins.push(
      viteCompression({
        ext: '.br',
        algorithm: 'brotliCompress',
        deleteOriginFile: VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE === 'true',
      }),
    )
  }
  return plugins
}