From 07c18d602ec47215c0390096a3fa66b40004d041 Mon Sep 17 00:00:00 2001
From: vben <anncwb@126.com>
Date: 星期二, 09 二月 2021 23:47:14 +0800
Subject: [PATCH] chore: add some notes
---
prettier.config.js | 8 --
build/vite/plugin/mock.ts | 4 +
build/vite/plugin/gzip.ts | 7 +
build/vite/plugin/styleImport.ts | 5 +
mock/_util.ts | 2
src/components/Description/src/index.tsx | 53 ++++++------
build/vite/plugin/theme.ts | 4 +
build/vite/plugin/imagemin.ts | 2
vite.config.ts | 26 +++---
build/vite/plugin/pwa.ts | 5 +
.eslintrc.js | 14 ---
build/vite/plugin/visualizer.ts | 3
build/vite/proxy.ts | 3
build/vite/plugin/html.ts | 16 +++
stylelint.config.js | 2
.husky/pre-commit | 4 +
mock/demo/select-demo.ts | 1
package.json | 3
build/vite/plugin/index.ts | 17 +++
.eslintignore | 14 ---
.editorconfig | 2
build/vite/optimizer.ts | 2
22 files changed, 113 insertions(+), 84 deletions(-)
diff --git a/.editorconfig b/.editorconfig
index 9a71884..1ed2d57 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -3,7 +3,7 @@
[*]
charset=utf-8
end_of_line=lf
-insert_final_newline=false
+insert_final_newline=true
indent_style=space
indent_size=2
diff --git a/.eslintignore b/.eslintignore
index 1148278..348631b 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,25 +1,15 @@
*.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
diff --git a/.eslintrc.js b/.eslintrc.js
index 68cccde..abda4d3 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -23,21 +23,7 @@
'@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',
diff --git a/.husky/pre-commit b/.husky/pre-commit
index 4ee3050..08d387c 100755
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -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
diff --git a/build/vite/optimizer.ts b/build/vite/optimizer.ts
index 0825be7..518ea2a 100644
--- a/build/vite/optimizer.ts
+++ b/build/vite/optimizer.ts
@@ -1,3 +1,4 @@
+// TODO
import type { GetManualChunk, GetManualChunkApi } from 'rollup';
//
@@ -10,6 +11,7 @@
// @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');
diff --git a/build/vite/plugin/gzip.ts b/build/vite/plugin/gzip.ts
index b9cac89..600c35e 100644
--- a/build/vite/plugin/gzip.ts
+++ b/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();
diff --git a/build/vite/plugin/html.ts b/build/vite/plugin/html.ts
index f90d35d..6612dc8 100644
--- a/build/vite/plugin/html.ts
+++ b/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 @@
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(),
},
},
]
diff --git a/build/vite/plugin/imagemin.ts b/build/vite/plugin/imagemin.ts
index f4c5532..1aa083c 100644
--- a/build/vite/plugin/imagemin.ts
+++ b/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() {
diff --git a/build/vite/plugin/index.ts b/build/vite/plugin/index.ts
index 3fbf28c..108c270 100644
--- a/build/vite/plugin/index.ts
+++ b/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 { 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 @@
//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());
diff --git a/build/vite/plugin/mock.ts b/build/vite/plugin/mock.ts
index f55050a..c1d61ff 100644
--- a/build/vite/plugin/mock.ts
+++ b/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) {
diff --git a/build/vite/plugin/pwa.ts b/build/vite/plugin/pwa.ts
index 82b75e3..f273017 100644
--- a/build/vite/plugin/pwa.ts
+++ b/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';
diff --git a/build/vite/plugin/styleImport.ts b/build/vite/plugin/styleImport.ts
index 4cce909..c656093 100644
--- a/build/vite/plugin/styleImport.ts
+++ b/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() {
diff --git a/build/vite/plugin/theme.ts b/build/vite/plugin/theme.ts
index 865e748..beb8251 100644
--- a/build/vite/plugin/theme.ts
+++ b/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';
diff --git a/build/vite/plugin/visualizer.ts b/build/vite/plugin/visualizer.ts
index 52a3a53..a0e2c34 100644
--- a/build/vite/plugin/visualizer.ts
+++ b/build/vite/plugin/visualizer.ts
@@ -1,3 +1,6 @@
+/**
+ * Package file volume analysis
+ */
import visualizer from 'rollup-plugin-visualizer';
import { isReportMode } from '../../utils';
diff --git a/build/vite/proxy.ts b/build/vite/proxy.ts
index 0cf1874..4ec57b9 100644
--- a/build/vite/proxy.ts
+++ b/build/vite/proxy.ts
@@ -1,3 +1,6 @@
+/**
+ * Used to parse the .env.development proxy configuration
+ */
import type { ServerOptions } from 'http-proxy';
type ProxyItem = [string, string];
diff --git a/mock/_util.ts b/mock/_util.ts
index 4cd7d1c..912c544 100644
--- a/mock/_util.ts
+++ b/mock/_util.ts
@@ -38,7 +38,7 @@
}
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)
diff --git a/mock/demo/select-demo.ts b/mock/demo/select-demo.ts
index d564406..a785a16 100644
--- a/mock/demo/select-demo.ts
+++ b/mock/demo/select-demo.ts
@@ -18,6 +18,7 @@
timeout: 4000,
method: 'get',
response: ({ query }) => {
+ console.log(query);
return resultSuccess(demoList);
},
},
diff --git a/package.json b/package.json
index 4d0d755..5d321cb 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/prettier.config.js b/prettier.config.js
index e0f42b9..0c20bc9 100644
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -17,12 +17,4 @@
htmlWhitespaceSensitivity: 'strict',
endOfLine: 'lf',
rangeStart: 0,
- overrides: [
- {
- files: '*.md',
- options: {
- tabWidth: 2,
- },
- },
- ],
};
diff --git a/src/components/Description/src/index.tsx b/src/components/Description/src/index.tsx
index ab03437..a6ab995 100644
--- a/src/components/Description/src/index.tsx
+++ b/src/components/Description/src/index.tsx
@@ -84,35 +84,36 @@
function renderItem() {
const { schema, data } = unref(getProps);
- return unref(schema).map((item) => {
- const { render, field, span, show, contentMinWidth } = item;
+ return unref(schema)
+ .map((item) => {
+ const { render, field, span, show, contentMinWidth } = item;
- if (show && isFunction(show) && !show(data)) {
- return null;
- }
+ 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 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 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 = () => {
diff --git a/stylelint.config.js b/stylelint.config.js
index 297925c..f76f740 100644
--- a/stylelint.config.js
+++ b/stylelint.config.js
@@ -28,7 +28,7 @@
ignore: ['after-comment', 'first-nested'],
},
],
- // 鎸囧畾澹版槑鍧楀唴灞炴�х殑瀛楁瘝椤哄簭
+ // Specify the alphabetical order of the attributes in the declaration block
'order/properties-order': [
'position',
'top',
diff --git a/vite.config.ts b/vite.config.ts
index 71a4e53..b344f6f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,10 +1,7 @@
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 @@
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 @@
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 @@
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 @@
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 @@
},
},
- 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'],
},
};
--
Gitblit v1.8.0