feat: 重构 Vite 配置，提取插件配置到单独文件并简化 tsconfig 配置

2024-11-25 16:44:36 +08:00
parent bb27e0107d
commit 3883fad98d
6 changed files with 488 additions and 476 deletions
--- a/vite.config.plugins.ts
+++ b/vite.config.plugins.ts
@ -0,0 +1,152 @@
+import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
+import { PrimeVueResolver } from '@primevue/auto-import-resolver';
+import { unheadVueComposablesImports } from '@unhead/vue';
+import { VantResolver } from '@vant/auto-import-resolver';
+import Vue from '@vitejs/plugin-vue';
+import VueJsx from '@vitejs/plugin-vue-jsx';
+import path from 'node:path';
+import UnoCSS from 'unocss/vite';
+import { type ImportsMap } from 'unplugin-auto-import/types';
+import AutoImport from 'unplugin-auto-import/vite';
+import { FileSystemIconLoader } from 'unplugin-icons/loaders';
+import IconsResolver from 'unplugin-icons/resolver';
+import Icons from 'unplugin-icons/vite';
+import { TDesignResolver } from 'unplugin-vue-components/resolvers';
+import Components from 'unplugin-vue-components/vite';
+import VueMacros from 'unplugin-vue-macros/vite';
+import Markdown from 'unplugin-vue-markdown/vite';
+import { getPascalCaseRouteName, VueRouterAutoImports } from 'unplugin-vue-router';
+import VueRouter from 'unplugin-vue-router/vite';
+import { PluginOption } from 'vite';
+import cdnImport from 'vite-plugin-cdn-import';
+import { vitePluginFakeServer } from 'vite-plugin-fake-server';
+import vueDevTools from 'vite-plugin-vue-devtools';
+import { ViteWebfontDownload } from 'vite-plugin-webfont-dl';
+
+export function Plugins() {
+  const plugins: PluginOption[] = [];
+
+  plugins.push(
+    VueMacros({
+      plugins: {
+        vueRouter: VueRouter({
+          dts: './src/types/typed-router.d.ts',
+          routesFolder: 'src/pages',
+          exclude: ['**/__*', '**/__*/**/*'],
+          getRouteName: (routeNode) => getPascalCaseRouteName(routeNode),
+          logs: false,
+          extensions: ['.vue', '.page.vue', '.md'],
+        }), // https://uvr.esm.is/guide/configuration.html
+        vue: Vue({ include: [/\.vue$/, /\.md$/] }),
+        vueJsx: VueJsx(), // 如有需要
+      },
+    }), // https://vue-macros.dev/zh-CN/guide/bundler-integration.html
+    UnoCSS(),
+    Markdown({ headEnabled: true }),
+  );
+
+  // TODO: import { Utils4uAutoImports } from 'utils4u';
+  // https://github.com/unplugin/unplugin-auto-import?tab=readme-ov-file#configuration
+  const Utils4uAutoImports: ImportsMap = {
+    'utils4u/vue-use': [
+      // alias
+      ['useCountdown', 'useVueCountdown'],
+    ],
+  };
+
+  plugins.push(
+    AutoImport({
+      dts: './src/types/auto-imports.d.ts',
+      resolvers: [TDesignResolver({ library: 'mobile-vue', esm: true }), VantResolver({ importStyle: true })],
+      imports: [
+        'vue',
+        'pinia',
+        '@vueuse/core',
+        VueRouterAutoImports,
+        unheadVueComposablesImports,
+        Utils4uAutoImports,
+        'vue-i18n',
+      ],
+    }),
+    Components({
+      dts: './src/types/components.d.ts',
+      // 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: [
+        IconsResolver({
+          prefix: 'icon',
+          customCollections: ['svg'],
+        }), // https://github.com/unplugin/unplugin-icons?tab=readme-ov-file#auto-importing
+        TDesignResolver({ library: 'mobile-vue', esm: true }),
+        VantResolver({ importStyle: true }),
+        PrimeVueResolver(/* { components: { prefix: 'P' } } */),
+      ],
+    }),
+    Icons({
+      autoInstall: true,
+      customCollections: {
+        svg: FileSystemIconLoader('src/assets/icons/svgs', (svg) => {
+          return svg.replace(/^<svg /, '<svg fill="currentColor" ');
+        }),
+      },
+    }),
+  );
+
+  plugins.push(
+    vueDevTools({
+      // launchEditor: env.LAUNCH_EDITOR,
+    }),
+  );
+
+  plugins.push(
+    // 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',
+    ]),
+  );
+
+  plugins.push(
+    VueI18nPlugin({
+      /* options */
+      // locale messages resource pre-compile option
+      include: [path.resolve(__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;
+      // },
+    }),
+  );
+
+  plugins.push(
+    // https://github.com/condorheroblog/vite-plugin-fake-server?tab=readme-ov-file#usage
+    vitePluginFakeServer({
+      include: 'fake',
+      basename: 'fake-api',
+      enableProd: true,
+    }),
+  );
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const unused = () => {
+    plugins.push(
+      // https://github.com/unplugin/unplugin-vue-components/issues/664$0
+      // https://github.com/VaJoy/vite-plugin-cdn-import-async$0
+      // https://github.com/mmf-fe/vite-plugin-cdn-import/blob/HEAD/README.zh-CN.md
+      // 会对 Components 插件的自动导入产生影响。
+      cdnImport({
+        modules: ['vue'],
+        prodUrl: '//fastly.jsdelivr.net/npm/{name}@{version}/{path}',
+        enableInDevMode: true,
+      }),
+    );
+  };
+
+  return plugins;
+}