refactor(vite): 重构 Vite 插件加载机制

vite-plugins/00.vue-macros.ts

@@ -0,0 +1,26 @@
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+import { getPascalCaseRouteName } from 'unplugin-vue-router';
+import vueRouter from 'unplugin-vue-router/vite';
+import type { PluginOption } from 'vite';
+import VueMacros from 'vue-macros/vite';
+
+export default [
+  VueMacros({
+    plugins: {
+      vue: vue({ include: [/\.vue$/, /\.md$/] }),
+      vueJsx: vueJsx(),
+
+      // https://uvr.esm.is/guide/configuration.html
+      // https://github.com/posva/unplugin-vue-router
+      // ⚠️ Vue must be placed after VueRouter()
+      vueRouter: vueRouter({
+        exclude: ['**/__*', '**/__*/**/*'],
+        extensions: ['.page.vue', '.page.md'],
+        getRouteName: (routeNode) => getPascalCaseRouteName(routeNode),
+        logs: false,
+        routesFolder: 'src/pages',
+      }),
+    },
+  }),
+] satisfies PluginOption;

vite-plugins/02.vite-plugin-vue-layouts.disabled.ts

@@ -0,0 +1,6 @@
+import type { PluginOption } from 'vite';
+
+export default [
+  // https://github.com/JohnCampionJr/vite-plugin-vue-layouts?tab=readme-ov-file#configuration
+  // Layouts({ defaultLayout: 'sakai-vue/AppLayout', pagesDirs: [] }),
+] satisfies PluginOption;

vite-plugins/02.vite-plugin-vue-meta-layouts.ts

@@ -0,0 +1,12 @@
+import type { PluginOption } from 'vite';
+import MetaLayouts from 'vite-plugin-vue-meta-layouts';
+
+export default [
+  // https://github.com/dishait/vite-plugin-vue-meta-layouts
+  MetaLayouts({
+    // defaultLayout: 'sakai-vue/AppLayout',
+    // defaultLayout: 'naive-ui/AppLayout',
+    defaultLayout: 'base-layout/base-layout',
+    skipTopLevelRouteLayout: true, // 打开修复 https://github.com/JohnCampionJr/vite-plugin-vue-layouts/issues/134，默认为 false 关闭
+  }),
+] satisfies PluginOption;

vite-plugins/03.unplugin-auto-import.ts

@@ -0,0 +1,29 @@
+import type { PluginOption } from 'vite';
+import AutoImport from 'unplugin-auto-import/vite';
+import { createUtils4uAutoImports } from 'utils4u/auto-imports';
+import { VueRouterAutoImports } from 'unplugin-vue-router';
+
+export default [
+  // https://github.com/antfu/unplugin-auto-import
+  AutoImport({
+    dirs: [
+      // 'src/composables',
+      // 'src/utils',
+      'src/stores',
+    ],
+    imports: [
+      'vue',
+      'vue-i18n',
+      'pinia',
+      '@vueuse/core',
+      VueRouterAutoImports,
+      createUtils4uAutoImports([]),
+      {
+        'consola/browser': ['consola'],
+        'vue-router/auto': ['useLink'],
+        'naive-ui': ['useModal', 'useDialog', 'useMessage', 'useNotification', 'useLoadingBar'],
+      },
+    ],
+    vueTemplate: true,
+  }),
+] satisfies PluginOption;

vite-plugins/03.unplugin-icons.ts

@@ -0,0 +1,17 @@
+import type { PluginOption } from 'vite';
+import { FileSystemIconLoader } from 'unplugin-icons/loaders';
+import Icons from 'unplugin-icons/vite';
+
+export default [
+  Icons({
+    autoInstall: true,
+    customCollections: {
+      svg: FileSystemIconLoader('src/assets/icons/svgs', (svg) => {
+        return svg.replace(/^<svg /, '<svg fill="currentColor" ');
+      }),
+    },
+    iconCustomizer(collection, icon, properties) {
+      properties.class = 'unplugin-icons';
+    },
+  }),
+] satisfies PluginOption;

vite-plugins/03.unplugin-vue-components.ts

@@ -0,0 +1,36 @@
+import type { PluginOption } from 'vite';
+import { PrimeVueResolver } from '@primevue/auto-import-resolver';
+import { VantResolver } from '@vant/auto-import-resolver';
+import IconsResolver from 'unplugin-icons/resolver';
+import Components from 'unplugin-vue-components/vite';
+import {
+  AntDesignVueResolver,
+  NaiveUiResolver,
+  TDesignResolver,
+} from 'unplugin-vue-components/resolvers';
+
+export default [
+  // https://github.com/antfu/unplugin-vue-components
+  Components({
+    // `__`开头的
+    excludeNames: [/^__/],
+    // allow auto load markdown components under `./src/components/`
+    extensions: ['vue', 'md'],
+    // allow auto import and register components used in markdown
+    include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
+    resolvers: [
+      AntDesignVueResolver({
+        importStyle: false, // css in js
+        resolveIcons: true,
+      }),
+      IconsResolver({
+        customCollections: ['svg'],
+        prefix: 'icon' /* <icon-svg:demo /> or <icon-svg-demo /> */,
+      }), // https://github.com/unplugin/unplugin-icons?tab=readme-ov-file#auto-importing
+      TDesignResolver({ esm: true, library: 'mobile-vue' }),
+      VantResolver({ importStyle: true }),
+      PrimeVueResolver(/* { components: { prefix: 'P' } } */),
+      NaiveUiResolver(),
+    ],
+  }),
+] satisfies PluginOption;

vite-plugins/999.index-html-plugin.ts

@@ -0,0 +1,28 @@
+import type { PluginOption } from 'vite';
+import { minify as minifyHtml } from 'html-minifier-terser';
+
+function IndexHtmlPlugin(): PluginOption {
+  return {
+    name: 'index-html-plugin',
+    apply: 'build',
+    async transformIndexHtml(html) {
+      console.time('minifyHtml');
+      // 压缩 HTML
+      const minifiedHtml = await minifyHtml(html, {
+        collapseWhitespace: true,
+        removeComments: true,
+        removeRedundantAttributes: true,
+        removeScriptTypeAttributes: true,
+        removeStyleLinkTypeAttributes: true,
+        useShortDoctype: true,
+        minifyCSS: true,
+        minifyJS: true,
+      });
+      console.log();
+      console.timeEnd('minifyHtml');
+      return minifiedHtml;
+    },
+  };
+}
+
+export default [IndexHtmlPlugin()] satisfies PluginOption[];

vite-plugins/_x-demo.disabled.ts

@@ -0,0 +1,9 @@
+import type { ConfigEnv, PluginOption } from 'vite';
+
+export default [
+  // ...
+] satisfies PluginOption;
+
+export function loadPlugin(_configEnv: ConfigEnv): PluginOption {
+  return [];
+}

vite-plugins/cloudflare.ts

@@ -0,0 +1,4 @@
+import type { PluginOption } from 'vite';
+import { cloudflare } from '@cloudflare/vite-plugin';
+
+export default [cloudflare()] satisfies PluginOption;

vite-plugins/unocss.ts

@@ -0,0 +1,8 @@
+import type { PluginOption } from 'vite';
+import UnoCSS from 'unocss/vite';
+
+export default [
+  // https://github.com/antfu/unocss
+  // see uno.config.ts for config
+  UnoCSS(),
+] satisfies PluginOption;

vite-plugins/unplugin-vue-i18n.ts

@@ -0,0 +1,19 @@
+import type { PluginOption } from 'vite';
+import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
+import path from 'node:path';
+
+export default [
+  // https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n
+  VueI18nPlugin({
+    /* options */
+    // locale messages resource pre-compile option
+    include: [path.resolve(import.meta.dirname, './src/locales/**')],
+
+    // https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n#transformi18nblock
+    // transformI18nBlock(src) {
+    //   console.debug(`src :>> `, src);
+    //   console.debug(`typeof src :>> `, typeof src);
+    //   return src as string;
+    // },
+  }),
+] satisfies PluginOption;

vite-plugins/unplugin-vue-markdown.ts

@@ -0,0 +1,9 @@
+import type { PluginOption } from 'vite';
+import Markdown from 'unplugin-vue-markdown/vite';
+
+export default [
+  // https://github.com/unplugin/unplugin-vue-markdown
+  Markdown({
+    headEnabled: true,
+  }),
+] satisfies PluginOption;

vite-plugins/vite-plugin-checker.ts

@@ -0,0 +1,19 @@
+import type { PluginOption } from 'vite';
+import checker from 'vite-plugin-checker';
+
+export default [
+  // https://vite-plugin-checker.netlify.app/introduction/introduction.html
+  checker({
+    eslint: {
+      lintCommand: 'eslint "./src/**/*.{js,jsx,ts,tsx,vue}"',
+      useFlatConfig: true,
+    },
+    vueTsc: true,
+    overlay: {
+      initialIsOpen: false,
+    },
+    terminal: true,
+    enableBuild: true,
+    // XXX: pnpm add vls vti -D
+  }),
+] satisfies PluginOption;

vite-plugins/vite-plugin-fake-server.ts

@@ -0,0 +1,16 @@
+import type { ConfigEnv, PluginOption } from 'vite';
+import { vitePluginFakeServer } from 'vite-plugin-fake-server';
+// https://github.com/condorheroblog/vite-plugin-fake-server?tab=readme-ov-file#usage
+
+// // if (mode !== 'test') {}
+// export default [
+
+// ] satisfies PluginOption;
+
+export function loadPlugin(_configEnv: ConfigEnv): PluginOption {
+  return vitePluginFakeServer({
+    basename: 'fake-api',
+    enableProd: true,
+    include: 'fake',
+  });
+}

vite-plugins/vite-plugin-image-optimizer.ts

@@ -0,0 +1,11 @@
+import type { PluginOption } from 'vite';
+import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
+
+// env.VITE_ENABLE_VUE_DEVTOOLS === 'true'
+
+export default [
+  // https://github.com/FatehAK/vite-plugin-image-optimizer?tab=readme-ov-file#default-configuration
+  ViteImageOptimizer({
+    /* pass your config */
+  }),
+] satisfies PluginOption;

vite-plugins/vite-plugin-vue-devtools.ts

@@ -0,0 +1,6 @@
+import type { PluginOption } from 'vite';
+import vueDevTools from 'vite-plugin-vue-devtools';
+
+// env.VITE_ENABLE_VUE_DEVTOOLS === 'true'
+
+export default [vueDevTools()] satisfies PluginOption;

vite-plugins/vite-plugin-webfont-dl.ts

@@ -0,0 +1,11 @@
+import type { PluginOption } from 'vite';
+import { ViteWebfontDownload } from 'vite-plugin-webfont-dl';
+
+export default [
+  // https://github.com/feat-agency/vite-plugin-webfont-dl?tab=readme-ov-file#-usage-simple-config-method-b-
+  ViteWebfontDownload([
+    'https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap',
+    'https://fonts.googleapis.com/css2?family=Fira+Code&display=swap',
+    'https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,900',
+  ]),
+] satisfies PluginOption;

vite-plugins/x-vite-plugin-purgecss-v5.ts

@@ -0,0 +1,8 @@
+import type { PluginOption } from 'vite';
+
+export default [
+  //   // https://github.com/rsnakdmx/vite-plugin-purgecss-v5?tab=readme-ov-file#-usage
+  //   pluginPurgeCss({
+  //     variables: true,
+  //   }),
+] satisfies PluginOption;

vite-plugins/x-vite-plugin-singlefile.ts

@@ -0,0 +1,5 @@
+import type { PluginOption } from 'vite';
+
+export default [
+  // ...
+] satisfies PluginOption;

vite-plugins/x-vite-plugin-static-copy.ts

@@ -0,0 +1,15 @@
+import type { PluginOption } from 'vite';
+
+export default [
+  // plugins.push(
+  //   viteStaticCopy({
+  //     targets: [
+  //       // globalThis.CESIUM_BASE_URL = 'https://digitalarsenal.io/';
+  //       { dest: cesiumBaseUrl, src: `${cesiumSource}/ThirdParty` },
+  //       { dest: cesiumBaseUrl, src: `${cesiumSource}/Workers` },
+  //       { dest: cesiumBaseUrl, src: `${cesiumSource}/Assets` },
+  //       { dest: cesiumBaseUrl, src: `${cesiumSource}/Widgets` },
+  //     ],
+  //   }),
+  // )
+] satisfies PluginOption;

vite-plugins/x-vite-plugin-zip-file.ts

@@ -0,0 +1,17 @@
+import type { PluginOption } from 'vite';
+
+export default [
+  // // 检查是否在VS Code终端中运行
+  // if (process.env.TERM_PROGRAM === 'vscode' || process.env.VSCODE_PID) {
+  //   // plugins.push(
+  //   //   // 构建后自动将dist目录打包成zip文件
+  //   //   viteArchiverPlugin({
+  //   //     addTimestamp: false, // 是否添加时间戳到输出文件名
+  //   //     format: 'zip', // 输出的压缩文件格式
+  //   //     outputDir: '', // 输出目录，默认为项目根目录
+  //   //     outputFileName: 'dist', // 输出的zip文件名（不含扩展名）
+  //   //     sourceDir: 'dist', // 要打包的源目录
+  //   //   }),
+  //   // )
+  // }
+] satisfies PluginOption;