chore: add some notes

build/vite/plugin/gzip.ts

@@ -1,6 +1,11 @@
+/**
+ * Used to package and output gzip. Note that this does not work properly in Vite, the specific reason is still being investigated
+ */
+import type { Plugin } from 'vite';
+
 import gzipPlugin from 'rollup-plugin-gzip';
 import { isBuildGzip } from '../../utils';
-import { Plugin } from 'vite';
+
 export function configGzipPlugin(isBuild: boolean): Plugin | Plugin[] {
   const useGzip = isBuild && isBuildGzip();
 

build/vite/plugin/html.ts

@@ -1,5 +1,10 @@
+/**
+ * Plugin to minimize and use ejs template syntax in index.html.
+ * https://github.com/anncwb/vite-plugin-html
+ */
 import type { Plugin } from 'vite';
 import type { ViteEnv } from '../../utils';
+
 import html from 'vite-plugin-html';
 
 import pkg from '../../../package.json';
@@ -7,22 +12,27 @@ import { GLOB_CONFIG_FILE_NAME } from '../../constant';
 
 export function configHtmlPlugin(env: ViteEnv, isBuild: boolean) {
   const { VITE_GLOB_APP_TITLE, VITE_PUBLIC_PATH } = env;
+
   const path = VITE_PUBLIC_PATH.endsWith('/') ? VITE_PUBLIC_PATH : `${VITE_PUBLIC_PATH}/`;
 
+  const getAppConfigSrc = () => {
+    return `${path || '/'}${GLOB_CONFIG_FILE_NAME}?v=${pkg.version}-${new Date().getTime()}`;
+  };
+
   const htmlPlugin: Plugin[] = html({
     minify: isBuild,
     inject: {
+      // Inject data into ejs template
       injectData: {
         title: VITE_GLOB_APP_TITLE,
       },
+      // Embed the generated app.config.js file
       tags: isBuild
         ? [
             {
               tag: 'script',
               attrs: {
-                src: `${path || '/'}${GLOB_CONFIG_FILE_NAME}?v=${
-                  pkg.version
-                }-${new Date().getTime()}`,
+                src: getAppConfigSrc(),
               },
             },
           ]

build/vite/plugin/imagemin.ts

@@ -1,3 +1,5 @@
+// Image resource files used to compress the output of the production environment
+
 import viteImagemin from 'vite-plugin-imagemin';
 
 export function configImageminPlugin() {

build/vite/plugin/index.ts

@@ -1,6 +1,9 @@
 import type { Plugin } from 'vite';
 
 import PurgeIcons from 'vite-plugin-purge-icons';
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+import legacy from '@vitejs/plugin-legacy';
 
 import { ViteEnv } from '../../utils';
 import { configHtmlPlugin } from './html';
@@ -12,11 +15,18 @@ import { configVisualizerConfig } from './visualizer';
 import { configThemePlugin } from './theme';
 import { configImageminPlugin } from './imagemin';
 
-// gen vite plugins
 export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
-  const { VITE_USE_IMAGEMIN, VITE_USE_MOCK } = viteEnv;
+  const { VITE_USE_IMAGEMIN, VITE_USE_MOCK, VITE_LEGACY } = viteEnv;
 
-  const vitePlugins: (Plugin | Plugin[])[] = [];
+  const vitePlugins: (Plugin | Plugin[])[] = [
+    // have to
+    vue(),
+    // have to
+    vueJsx(),
+  ];
+
+  // @vitejs/plugin-legacy
+  VITE_LEGACY && isBuild && vitePlugins.push(legacy());
 
   // vite-plugin-html
   vitePlugins.push(configHtmlPlugin(viteEnv, isBuild));
@@ -36,6 +46,7 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
   //vite-plugin-theme
   vitePlugins.push(configThemePlugin());
 
+  // The following plugins only work in the production environment
   if (isBuild) {
     //vite-plugin-imagemin
     VITE_USE_IMAGEMIN && vitePlugins.push(configImageminPlugin());

build/vite/plugin/mock.ts

@@ -1,3 +1,7 @@
+/**
+ * Mock plugin for development and production.
+ * https://github.com/anncwb/vite-plugin-mock
+ */
 import { viteMockServe } from 'vite-plugin-mock';
 
 export function configMockPlugin(isBuild: boolean) {

build/vite/plugin/pwa.ts

@@ -1,3 +1,8 @@
+/**
+ * Zero-config PWA for Vite
+ * https://github.com/antfu/vite-plugin-pwa
+ */
+
 import { VitePWA } from 'vite-plugin-pwa';
 
 import { ViteEnv } from '../../utils';

build/vite/plugin/styleImport.ts

@@ -1,3 +1,8 @@
+/**
+ *  Introduces component library styles on demand.
+ * https://github.com/anncwb/vite-plugin-style-import
+ */
+
 import styleImport from 'vite-plugin-style-import';
 
 export function configStyleImportPlugin() {

build/vite/plugin/theme.ts

@@ -1,3 +1,7 @@
+/**
+ * Vite plugin for website theme color switching
+ * https://github.com/anncwb/vite-plugin-theme
+ */
 import { viteThemePlugin, mixLighten, mixDarken, tinycolor } from 'vite-plugin-theme';
 import { getThemeColors, generateColors } from '../../config/themeConfig';
 

build/vite/plugin/visualizer.ts

@@ -1,3 +1,6 @@
+/**
+ * Package file volume analysis
+ */
 import visualizer from 'rollup-plugin-visualizer';
 import { isReportMode } from '../../utils';