VueMacros

2024-08-26 12:07:57 +08:00
parent 9fe54c151e
commit b7913ae47c
18 changed files with 966 additions and 495 deletions
--- a/vite.config.ts
+++ b/vite.config.ts
@ -1,19 +1,21 @@
 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 VueJsx from '@vitejs/plugin-vue-jsx';
+import ReactivityTransform from '@vue-macros/reactivity-transform/vite';
 import path from 'node:path';
 import { fileURLToPath, URL } from 'node:url';
 import { pinyin } from 'pinyin-pro';
-import type { GetManualChunk } from 'rollup';
+import type { OutputOptions } from 'rollup';
 import UnoCSS from 'unocss/vite';
 import AutoImport from 'unplugin-auto-import/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 { defineConfig, loadEnv } from 'vite';
+import { defineConfig, loadEnv, PluginOption } from 'vite';
 import cdnImport from 'vite-plugin-cdn-import';
 import vueDevTools from 'vite-plugin-vue-devtools';

@ -36,57 +38,76 @@ export default defineConfig(({ mode, command }) => {
    build: {
      sourcemap: mode !== 'production' || env.VITE_SOURCE_MAP === 'true',
      rollupOptions: {
-        output: {
-          // chunkFileNames: 'assets/chunk/[name]_[hash].js',
-          // entryFileNames: 'assets/entry/[name]_[hash].js',
-          // assetFileNames: 'assets/[ext]/[name]_[hash].[ext]',
-          manualChunks: env.VITE_SPLIT_CHUNKS ? createSplitChunk() : undefined,
-        },
+        output: env.VITE_SPLIT_CHUNKS === 'true' ? createSplitChunkOutput() : undefined,
      },
    },
  };
 });

 // packages/vite/src/node/plugins/splitVendorChunk.ts
-function createSplitChunk(): GetManualChunk {
-  return (id /* , { getModuleIds, getModuleInfo } */) => {
-    if (isInNodeModules(id) /* && !isCSSRequest(id) */) {
-      let pkgName = id;
-      pkgName = pkgName.split('.pnpm/')?.[1] || pkgName;
-      pkgName = pkgName.split('node_modules/')?.[1] || pkgName;
-      pkgName = pkgName.startsWith('@') ? pkgName.split('/')[0] + '/' + pkgName.split('/')[1] : pkgName.split('/')[0];
+function createSplitChunkOutput(): OutputOptions {
+  return {
+    chunkFileNames: 'assets/chunk/[name]_[hash].js',
+    entryFileNames: 'assets/entry/[name]_[hash].js',
+    assetFileNames: 'assets/[ext]/[name]_[hash].[ext]',
+    manualChunks: (id /* , { getModuleIds, getModuleInfo } */) => {
+      if (isInNodeModules(id) /* && !isCSSRequest(id) */) {
+        let pkgName = id;
+        pkgName = pkgName.split('.pnpm/')?.[1] || pkgName;
+        pkgName = pkgName.split('node_modules/')?.[1] || pkgName;
+        pkgName = pkgName.startsWith('@') ? pkgName.split('/')[0] + '/' + pkgName.split('/')[1] : pkgName.split('/')[0];

-      if (pkgName.startsWith('@vue/') /* || pkgName === 'vue-demi' */) pkgName = 'vue';
-      /* if (pkgName.includes('vue-router')) pkgName = 'vue-router'; */
+        if (pkgName.startsWith('@vue/') /* || pkgName === 'vue-demi' */) pkgName = 'vue';
+        /* if (pkgName.includes('vue-router')) pkgName = 'vue-router'; */

-      return `libs/${pkgName}`;
-    } else if (id.includes('src/pages')) {
-      let fileName = path
-        .basename(id)
-        .split('?')[0]
-        .replace(/\.\w+$/, '');
-      fileName = pinyin(fileName, { type: 'array' }).join('');
-      return `pages/${fileName}`;
-    }
+        return `libs/${pkgName}`;
+      } else if (id.includes('src/components')) {
+        return formatFilename(id, 'components');
+      } else if (id.includes('src/pages')) {
+        return formatFilename(id, 'pages');
+      }
+    },
  };
-}

-function isInNodeModules(id: string): boolean {
-  return id.includes('node_modules');
+  function formatFilename(id: string, prefix: string) {
+    let filename = path
+      .basename(id)
+      .split('?')[0]
+      .replace(/\.\w+$/, '');
+    filename = pinyin(filename, { type: 'array' }).join('');
+    return `${prefix}/${filename}`;
+  }
+
+  function isInNodeModules(id: string): boolean {
+    return id.includes('node_modules');
+  }
+  /* const CSS_LANGS_RE = /\.(css|less|sass|scss|styl|stylus|pcss|postcss|sss)(?:$|\?)/;
+  const isCSSRequest = (request: string): boolean => CSS_LANGS_RE.test(request); */
 }
-/* const CSS_LANGS_RE = /\.(css|less|sass|scss|styl|stylus|pcss|postcss|sss)(?:$|\?)/;
-const isCSSRequest = (request: string): boolean => CSS_LANGS_RE.test(request); */

 function Plugins() {
-  return [
-    VueRouter({
-      // https://uvr.esm.is/guide/configuration.html
-      exclude: ['**/__*', '**/__*/**/*'],
-      getRouteName: (routeNode) => getPascalCaseRouteName(routeNode),
-      logs: false,
-      extensions: ['.vue', '.page.vue', '.md'],
-    }),
-    // other plugins
+  const plugins: PluginOption[] = [];
+
+  plugins.push(
+    VueMacros({
+      plugins: {
+        vueRouter: VueRouter({
+          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 }),
+    ReactivityTransform(), // https://vue-macros.dev/zh-CN/features/reactivity-transform.html
+  );
+
+  plugins.push(
    AutoImport({
      resolvers: [
        TDesignResolver({
@ -114,23 +135,23 @@ function Plugins() {
        }),
      ],
    }),
-    UnoCSS(),
-    Vue({
-      include: [/\.vue$/, /\.md$/], // <-- allows Vue to compile Markdown files
-    }),
-    vueJsx(),
-    Markdown({
-      headEnabled: true,
-    }),
-    vueDevTools(),
-    // 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,
-    }), */
-  ];
+  );
+
+  plugins.push([vueDevTools()]);
+
+  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;
 }