style: add some notes

vben
1 parent 7658f4d6
Showing 14 changed files with 101 additions and 29 deletions
.eslintignore
build/constant.ts
build/getShortName.ts
build/script/buildConf.ts
build/utils.ts
build/vite/hm.ts
build/vite/plugin/gzip/index.ts
build/vite/proxy.ts
mock/_createProductionServer.ts
src/App.vue
src/main.ts
src/useApp.ts
src/utils/http/axios/const.ts
vite.config.ts
@@ -20,9 +20,6 @@ lib
 Dockerfile
 vue.config.js
 commit-lint.js
-/src/assets/iconfont/
-/types/shims
-/src/types/shims
 postcss.config.js
 stylelint.config.js
 commitlint.config.js
+/**
+ * The name of the configuration file entered in the production environment
+ */
 export const GLOB_CONFIG_FILE_NAME = '_app.config.js';
+/**
+ * Get the configuration file variable name
+ * @param env
+ */
 export const getShortName = (env: any) => {
   return `__PRODUCTION__${env.VITE_GLOB_APP_SHORT_NAME || '__APP'}__CONF__`
     .toUpperCase()
+/**
+ * Generate additional configuration files when used for packaging. The file can be configured with some global variables, so that it can be changed directly externally without repackaging
+ */
 import { GLOB_CONFIG_FILE_NAME } from '../constant';
 import fs, { writeFileSync } from 'fs-extra';
  
 import viteConfig from '../../vite.config';
 import { errorConsole, successConsole, getCwdPath, getEnvConfig } from '../utils';
-
-const getShortName = (env: any) => {
-  return `__PRODUCTION__${env.VITE_GLOB_APP_SHORT_NAME || '__APP'}__CONF__`
-    .toUpperCase()
-    .replace(/\s/g, '');
-};
+import { getShortName } from '../getShortName';
  
 function createConfig(
   {
@@ -20,6 +18,7 @@ function createConfig(
   try {
     const windowConf = `window.${configName}`;
     const outDir = viteConfig.outDir || 'dist';
+    // Ensure that the variable will not be modified
     const configStr = `${windowConf}=${JSON.stringify(config)};
  
       Object.freeze(${windowConf});
@@ -7,6 +7,7 @@ import chalk from &#39;chalk&#39;;
  
 export const isFunction = (arg: unknown): arg is (...args: any[]) => any =>
   typeof arg === 'function';
+
 export const isRegExp = (arg: unknown): arg is RegExp =>
   Object.prototype.toString.call(arg) === '[object RegExp]';
  
@@ -43,6 +44,9 @@ export function readAllFile(root: string, reg: RegExp) {
   return resultArr;
 }
  
+/**
+ * get client ip address
+ */
 export function getIPAddress() {
   let interfaces = networkInterfaces();
   for (let devName in interfaces) {
@@ -67,12 +71,23 @@ export function isProdFn(): boolean {
   return process.env.NODE_ENV === 'production';
 }
  
+/**
+ * Whether to generate package preview
+ */
 export function isReportMode(): boolean {
   return process.env.REPORT === 'true';
 }
+
+/**
+ * Whether to generate gzip for packaging
+ */
 export function isBuildGzip(): boolean {
   return process.env.VITE_BUILD_GZIP === 'true';
 }
+
+/**
+ *  Whether to generate package site
+ */
 export function isSiteMode(): boolean {
   return process.env.SITE === 'true';
 }
@@ -89,6 +104,7 @@ export interface ViteEnv {
   VITE_BUILD_GZIP: boolean;
 }
  
+// Read all environment variable configuration files to process.env
 export function loadEnv(): ViteEnv {
   const env = process.env.NODE_ENV;
   const ret: any = {};
@@ -116,6 +132,11 @@ export function loadEnv(): ViteEnv {
   return ret;
 }
  
+/**
+ * Get the environment variables starting with the specified prefix
+ * @param match prefix
+ * @param confFiles ext
+ */
 export function getEnvConfig(match = 'VITE_GLOB_', confFiles = ['.env', '.env.production']) {
   let envConfig = {};
   confFiles.forEach((item) => {
@@ -142,18 +163,34 @@ function consoleFn(color: string, message: any) {
   );
 }
  
+/**
+ * warnConsole
+ * @param message
+ */
 export function successConsole(message: any) {
   consoleFn('green', '✨ ' + message);
 }
  
+/**
+ * warnConsole
+ * @param message
+ */
 export function errorConsole(message: any) {
   consoleFn('red', '✨ ' + message);
 }
  
+/**
+ * warnConsole
+ * @param message message
+ */
 export function warnConsole(message: any) {
   consoleFn('yellow', '✨ ' + message);
 }
  
+/**
+ * Get user root directory
+ * @param dir file path
+ */
 export function getCwdPath(...dir: string[]) {
   return path.resolve(process.cwd(), ...dir);
 }
-// 百度统计代码 用于站点部署
-// 只在build:site开启
+// Baidu statistics code for site deployment
+// Only open in build:site
 export const hmScript = `<script>
 var _hmt = _hmt || [];
 (function() {
 // 修改自https://github.com/kryops/rollup-plugin-gzip
 // 因为rollup-plugin-gzip不支持vite
 // vite对css打包独立的。所以不能在打包的时候顺带打包css
+// TODO rc.9会支持 configurBuild 配置项。到时候重新修改
  
 import { readFile, writeFile } from 'fs';
 import { basename } from 'path';
@@ -3,6 +3,11 @@ type ProxyItem = [string, string];
 type ProxyList = ProxyItem[];
  
 const reg = /^https:\/\//;
+
+/**
+ * Generate proxy
+ * @param list
+ */
 export function createProxy(list: ProxyList = []) {
   const ret: any = {};
   for (const [prefix, target] of list) {
@@ -12,6 +17,7 @@ export function createProxy(list: ProxyList = []) {
       target: target,
       changeOrigin: true,
       rewrite: (path: string) => path.replace(new RegExp(`^${prefix}`), ''),
+      // https is require secure=false
       ...(isHttps ? { secure: false } : {}),
     };
   }
@@ -3,6 +3,9 @@ import userMock from &#39;./sys/user&#39;;
 import menuMock from './sys/menu';
 import tableDemoMock from './demo/table-demo';
  
+/**
+ * Used in a production environment. Need to manually import all modules
+ */
 export function setupProdMockServer() {
   createProdMockServer([...userMock, ...menuMock, ...tableDemoMock]);
 }
@@ -23,14 +23,20 @@
     name: 'App',
     components: { ConfigProvider },
     setup() {
+      // Initialize application settings
       useInitAppConfigStore();
+      // Initialize network monitoring
       useListenerNetWork();
+      // Initialize breakpoint monitoring
       createBreakpointListen();
+      // Get system configuration
       const { projectSetting } = useSetting();
+      // Get ConfigProvider configuration
       const { transformCellText } = useConfigProvider();
  
       let lockOn = {};
       if (projectSetting.lockTime) {
+        // Monitor the mouse or keyboard time, used to recalculate the lock screen time
         const { on } = useLockPage();
         lockOn = on;
       }
@@ -22,8 +22,10 @@ setupRouter(app);
 // store
 setupStore(app);
  
+// Directives
 setupDirectives(app);
  
+// error-handle
 setupErrorHandle(app);
  
 router.isReady().then(() => {
@@ -35,8 +37,10 @@ if (isDevMode()) {
   window.__APP__ = app;
 }
  
+// If you do not need to use the mock service in the production environment, you can comment the code
 if (isProdMode() && isUseMock()) {
   setupProdMockServer();
 }
  
+// Used to share app instances in other modules
 setApp(app);
+// Application related functions
 import type { ProjectConfig } from '/@/types/config';
 import type { App } from 'vue';
 import { computed, ref } from 'vue';
+// 接口返回值data不能为这个，否则会判为请求失败
 export const errorResult = '__ERROR_RESULT__';
@@ -35,79 +35,89 @@ const viteConfig: UserConfig = {
   // TODO build error
   // entry: './public/index.html',
   /**
-   * 端口号
+   * port
    * @default '3000'
    */
   port: VITE_PORT,
   /**
-   * 服务地址
    * @default 'localhost'
    */
   hostname: 'localhost',
   /**
-   * 运行自动打开浏览器·
+   * Run to open the browser automatically
    * @default 'false'
    */
   open: false,
   /**
-   * 压缩代码
-   *  boolean | 'terser' | 'esbuild'
+   * Set to `false` to disable minification, or specify the minifier to use.
+   * Available options are 'terser' or 'esbuild'.
    * @default 'terser'
    */
   minify: isDevFn() ? 'esbuild' : 'terser',
   /**
-   * 基本公共路径
+   * Base public path when served in production.
    * @default '/'
    */
   base: VITE_PUBLIC_PATH,
  
   /**
-   * 打包输入路径
+   * Directory relative from `root` where build output will be placed. If the
+   * directory exists, it will be removed before the build.
    * @default 'dist'
    */
   outDir: 'dist',
   /**
-   * @default 'false'
+   * Whether to generate sourcemap
+   * @default false
    */
   sourcemap: false,
   /**
-   * 资源输出路径
+   * Directory relative from `outDir` where the built js/css/image assets will
+   * be placed.
    * @default '_assets'
    */
   assetsDir: '_assets',
   /**
-   * 静态资源小于该大小将会内联，默认4096kb
-   * @default '4096'
+   * Static asset files smaller than this number (in bytes) will be inlined as
+   * base64 strings. Default limit is `4096` (4kb). Set to `0` to disable.
+   * @default 4096
    */
   assetsInlineLimit: 4096,
   /**
-   * esbuild转换目标。
+   * Transpile target for esbuild.
    * @default 'es2020'
    */
   esbuildTarget: 'es2020',
+  /**
+   * Whether to log asset info to console
+   * @default false
+   */
   silent: false,
-  // 别名
+  /**
+   * Import alias. The entries can either be exact request -> request mappings
+   * (exact, no wildcard syntax), or request path -> fs directory mappings.
+   * When using directory mappings, the key **must start and end with a slash**.
+   * ```
+   */
   alias: {
     '/@/': pathResolve('src'),
   },
-  // terser配置
+  // terser options
   terserOptions: {
     compress: {
-      // 是否删除console
       drop_console: VITE_DROP_CONSOLE,
     },
   },
   define: {
     __VERSION__: pkg.version,
   },
-  // css预处理
   cssPreprocessOptions: {
     less: {
       modifyVars: modifyVars,
       javascriptEnabled: true,
     },
   },
-  // 会使用 rollup 对 包重新编译，将编译成符合 esm 模块规范的新的包放入 node_modules/.vite_opt_cache
+  // The package will be recompiled using rollup, and the new package compiled into the esm module specification will be put into node_modules/.vite_opt_cache
   optimizeDeps: {
     include: [
       'echarts',
@@ -118,7 +128,7 @@ const viteConfig: UserConfig = {
     ],
   },
  
-  // 本地跨域代理
+  // Local cross-domain proxy
   proxy: createProxy(VITE_PROXY),
   plugins: createVitePlugins(viteEnv),
   rollupInputOptions: {