chore: add some notes

vben
1 parent 23657547
Showing 22 changed files with 116 additions and 87 deletions
.editorconfig
.eslintignore
.eslintrc.js
.husky/pre-commit
build/vite/optimizer.ts
build/vite/plugin/gzip.ts
build/vite/plugin/html.ts
build/vite/plugin/imagemin.ts
build/vite/plugin/index.ts
build/vite/plugin/mock.ts
build/vite/plugin/pwa.ts
build/vite/plugin/styleImport.ts
build/vite/plugin/theme.ts
build/vite/plugin/visualizer.ts
build/vite/proxy.ts
mock/_util.ts
mock/demo/select-demo.ts
package.json
prettier.config.js
src/components/Description/src/index.tsx
@@ -3,7 +3,7 @@ root = true
 [*]
 charset=utf-8
 end_of_line=lf
-insert_final_newline=false
+insert_final_newline=true
 indent_style=space
 indent_size=2
 *.sh
 node_modules
-lib
 *.md
-*.scss
 *.woff
 *.ttf
 .vscode
 .idea
-/dist/
-/mock/
+dist
 /public
 /docs
-.vscode
+.husky
 .local
 /bin
-/build
-/config
 Dockerfile
-vue.config.js
-commit-lint.js
-postcss.config.js
-stylelint.config.js
-commitlint.config.js
@@ -23,21 +23,7 @@ module.exports = {
     '@typescript-eslint/no-empty-function': 'off',
     'vue/custom-event-name-casing': 'off',
     'no-use-before-define': 'off',
-    // 'no-setting-before-define': [
-    //   'error',
-    //   {
-    //     functions: false,
-    //     classes: true,
-    //   },
-    // ],
     '@typescript-eslint/no-use-before-define': 'off',
-    // '@typescript-eslint/no-setting-before-define': [
-    //   'error',
-    //   {
-    //     functions: false,
-    //     classes: true,
-    //   },
-    // ],
     '@typescript-eslint/ban-ts-comment': 'off',
     '@typescript-eslint/ban-types': 'off',
     '@typescript-eslint/no-non-null-assertion': 'off',
@@ -4,5 +4,9 @@
 [ -n "$CI" ] && exit 0
+# Check the file name
+# ! ls-lint cannot be used normally in mac pro of M1 system.
 npm run lint:ls-lint
+
+# Format and submit code according to lintstagedrc.js configuration
 npm run lint:lint-staged
+// TODO
 import type { GetManualChunk, GetManualChunkApi } from 'rollup';
 //
@@ -10,6 +11,7 @@ const vendorLibs: { match: string[]; output: string }[] = [
 // @ts-ignore
 export const configManualChunk: GetManualChunk = (id: string, api: GetManualChunkApi) => {
+  console.log(api);
   if (/[\\/]node_modules[\\/]/.test(id)) {
     const matchItem = vendorLibs.find((item) => {
       const reg = new RegExp(`[\\/]node_modules[\\/]_?(${item.match.join('|')})(.*)`, 'ig');
+/**
+ * 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();
+/**
+ * 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 &#39;../../constant&#39;;
 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(),
               },
             },
           ]
+// Image resource files used to compress the output of the production environment
+
 import viteImagemin from 'vite-plugin-imagemin';
 export function configImageminPlugin() {
 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 &#39;./visualizer&#39;;
 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());
+/**
+ * Mock plugin for development and production.
+ * https://github.com/anncwb/vite-plugin-mock
+ */
 import { viteMockServe } from 'vite-plugin-mock';
 export function configMockPlugin(isBuild: boolean) {
+/**
+ * Zero-config PWA for Vite
+ * https://github.com/antfu/vite-plugin-pwa
+ */
+
 import { VitePWA } from 'vite-plugin-pwa';
 import { ViteEnv } from '../../utils';
+/**
+ *  Introduces component library styles on demand.
+ * https://github.com/anncwb/vite-plugin-style-import
+ */
+
 import styleImport from 'vite-plugin-style-import';
 export function configStyleImportPlugin() {
+/**
+ * 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';
+/**
+ * Package file volume analysis
+ */
 import visualizer from 'rollup-plugin-visualizer';
 import { isReportMode } from '../../utils';
+/**
+ * Used to parse the .env.development proxy configuration
+ */
 import type { ServerOptions } from 'http-proxy';
 type ProxyItem = [string, string];
@@ -38,7 +38,7 @@ export function resultError(message = &#39;Request failed&#39;, { code = -1, result = nu
 }
 export function pagination<T = any>(pageNo: number, pageSize: number, array: T[]): T[] {
-  let offset = (pageNo - 1) * Number(pageSize);
+  const offset = (pageNo - 1) * Number(pageSize);
   const ret =
     offset + Number(pageSize) >= array.length
       ? array.slice(offset, array.length)
@@ -18,6 +18,7 @@ export default [
     timeout: 4000,
     method: 'get',
     response: ({ query }) => {
+      console.log(query);
       return resultSuccess(demoList);
     },
   },
@@ -14,8 +14,7 @@
     "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
     "clean:lib": "npx rimraf node_modules",
     "typecheck": "vuedx-typecheck .",
-    "lint:eslint": "eslint \"{src,mock}/**/*.{vue,ts,tsx}\" ",
-    "lint:eslint:fix": "eslint \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
+    "lint:eslint": "eslint \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
     "lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
     "lint:stylelint": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
     "lint:ls-lint": "ls-lint",
@@ -17,12 +17,4 @@ module.exports = {
   htmlWhitespaceSensitivity: 'strict',
   endOfLine: 'lf',
   rangeStart: 0,
-  overrides: [
-    {
-      files: '*.md',
-      options: {
-        tabWidth: 2,
-      },
-    },
-  ],
 };
@@ -84,35 +84,36 @@ export default defineComponent({
     function renderItem() {
       const { schema, data } = unref(getProps);
-      return unref(schema).map((item) => {
-        const { render, field, span, show, contentMinWidth } = item;
-
-        if (show && isFunction(show) && !show(data)) {
-          return null;
-        }
-
-        const getContent = () => {
-          const _data = unref(data);
-          const getField = get(_data, field);
-          return isFunction(render) ? render(getField, _data) : getField ?? '';
-        };
-
-        const width = contentMinWidth;
-        return (
-          <Descriptions.Item label={renderLabel(item)} key={field} span={span}>
-            {() => {
-              if (!contentMinWidth) {
-                return getContent();
-              }
-              const style: CSSProperties = {
-                minWidth: `${width}px`,
-              };
-              return <div style={style}>{getContent()}</div>;
-            }}
-          </Descriptions.Item>
-        );
-      })
-      .filter((item) => !!item);
+      return unref(schema)
+        .map((item) => {
+          const { render, field, span, show, contentMinWidth } = item;
+
+          if (show && isFunction(show) && !show(data)) {
+            return null;
+          }
+
+          const getContent = () => {
+            const _data = unref(data);
+            const getField = get(_data, field);
+            return isFunction(render) ? render(getField, _data) : getField ?? '';
+          };
+
+          const width = contentMinWidth;
+          return (
+            <Descriptions.Item label={renderLabel(item)} key={field} span={span}>
+              {() => {
+                if (!contentMinWidth) {
+                  return getContent();
+                }
+                const style: CSSProperties = {
+                  minWidth: `${width}px`,
+                };
+                return <div style={style}>{getContent()}</div>;
+              }}
+            </Descriptions.Item>
+          );
+        })
+        .filter((item) => !!item);
     }
     const renderDesc = () => {
@@ -28,7 +28,7 @@ module.exports = {
         ignore: ['after-comment', 'first-nested'],
       },
     ],
-    // 指定声明块内属性的字母顺序
+    // Specify the alphabetical order of the attributes in the declaration block
     'order/properties-order': [
       'position',
       'top',
 import type { UserConfig, ConfigEnv } from 'vite';
-import { resolve } from 'path';
-import vue from '@vitejs/plugin-vue';
-import vueJsx from '@vitejs/plugin-vue-jsx';
-import legacy from '@vitejs/plugin-legacy';
 import { loadEnv } from 'vite';
+import { resolve } from 'path';
 import { generateModifyVars } from './build/config/themeConfig';
 import { createProxy } from './build/vite/proxy';
@@ -18,11 +15,14 @@ function pathResolve(dir: string) {
   return resolve(__dirname, '.', dir);
 }
-const root = process.cwd();
-
 export default ({ command, mode }: ConfigEnv): UserConfig => {
+  const root = process.cwd();
+
   const env = loadEnv(mode, root);
+
+  // The boolean type read by loadEnv is a string. This function can be converted to boolean type
   const viteEnv = wrapperEnv(env);
+
   const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY, VITE_DROP_CONSOLE, VITE_LEGACY } = viteEnv;
   const isBuild = command === 'build';
@@ -32,12 +32,14 @@ export default ({ command, mode }: ConfigEnv): UserConfig =&gt; {
     root,
     alias: [
       {
+        // /@/xxxx  =>  src/xxx
         find: /^\/@\//,
         replacement: pathResolve('src') + '/',
       },
     ],
     server: {
       port: VITE_PORT,
+      // Load proxy configuration from .env
       proxy: createProxy(VITE_PROXY),
       hmr: {
         overlay: true,
@@ -50,9 +52,11 @@ export default ({ command, mode }: ConfigEnv): UserConfig =&gt; {
       terserOptions: {
         compress: {
           keep_infinity: true,
+          // Used to delete console in production environment
           drop_console: VITE_DROP_CONSOLE,
         },
       },
+      // Turning off brotliSize display can slightly reduce packaging time
       brotliSize: false,
       chunkSizeWarningLimit: 1200,
     },
@@ -68,6 +72,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig =&gt; {
       preprocessorOptions: {
         less: {
           modifyVars: {
+            // Used for global import to avoid the need to import each style file separately
             // reference:  Avoid repeated references
             hack: `true; @import (reference) "${resolve('src/design/config.less')}";`,
             ...generateModifyVars(),
@@ -77,14 +82,11 @@ export default ({ command, mode }: ConfigEnv): UserConfig =&gt; {
       },
     },
-    plugins: [
-      vue(),
-      vueJsx(),
-      ...(VITE_LEGACY && isBuild ? [legacy()] : []),
-      ...createVitePlugins(viteEnv, isBuild),
-    ],
+    // The vite plugin used by the project. The quantity is large, so it is separately extracted and managed
+    plugins: createVitePlugins(viteEnv, isBuild),
     optimizeDeps: {
+      // @iconify/iconify: The dependency is dynamically and virtually loaded by @purge-icons/generated, so it needs to be specified explicitly
       include: ['@iconify/iconify'],
     },
   };