feat: add archive plug-in to output dist.zip after build (#4272)

* feat: add the archiver plug-in to output dist.zip after build * chore: update env
vbenjs · Aug 29, 2024 · 98da067 · 98da067
1 parent be3bcc1
commit 98da067
Show file tree

Hide file tree

Showing 21 changed files with 200 additions and 44 deletions.
diff --git a/.lintstagedrc.mjs b/.lintstagedrc.mjs
@@ -1,7 +1,4 @@
 export default {
- '{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': [
- 'prettier --cache --write--parser json',
- ],
  '*.{js,jsx,ts,tsx}': [
  'prettier --cache --ignore-unknown --write',
  'eslint --cache --fix',
@@ -16,5 +13,8 @@ export default {
  'eslint --cache --fix',
  'stylelint --fix --allow-empty-input',
  ],
+ '{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': [
+ 'prettier --cache --write--parser json',
+ ],
  'package.json': ['prettier --cache --write'],
 };
diff --git a/apps/web-antd/.env.production b/apps/web-antd/.env.production
@@ -14,3 +14,6 @@ VITE_ROUTER_HISTORY=hash
 
 # 是否注入全局loading
 VITE_INJECT_APP_LOADING=true
+
+# 打包后是否生成dist.zip
+VITE_ARCHIVER=true
diff --git a/apps/web-ele/.env.production b/apps/web-ele/.env.production
@@ -14,3 +14,6 @@ VITE_ROUTER_HISTORY=hash
 
 # 是否注入全局loading
 VITE_INJECT_APP_LOADING=true
+
+# 打包后是否生成dist.zip
+VITE_ARCHIVER=true
diff --git a/apps/web-naive/.env.production b/apps/web-naive/.env.production
@@ -14,3 +14,6 @@ VITE_ROUTER_HISTORY=hash
 
 # 是否注入全局loading
 VITE_INJECT_APP_LOADING=true
+
+# 打包后是否生成dist.zip
+VITE_ARCHIVER=true
diff --git a/docs/.vitepress/config/shared.mts b/docs/.vitepress/config/shared.mts
@@ -3,6 +3,8 @@ import type { HeadConfig } from 'vitepress';
 
 import { resolve } from 'node:path';
 
+import { viteArchiverPlugin } from '@vben/vite-config';
+
 import {
  GitChangelog,
  GitChangelogMarkdownSection,
@@ -76,6 +78,7 @@ export const shared = defineConfig({
  repoURL: () => 'https://github.com/vbenjs/vue-vben-admin',
  }),
  GitChangelogMarkdownSection(),
+ viteArchiverPlugin({ outputDir: '.vitepress' }),
  ],
  server: {
  fs: {

diff --git a/docs/package.json b/docs/package.json
@@ -20,6 +20,7 @@
  "devDependencies": {
  "@nolebase/vitepress-plugin-git-changelog": "^2.4.0",
  "@types/markdown-it": "^14.1.2",
+ "@vben/vite-config": "workspace:*",
  "@vite-pwa/vitepress": "^0.5.0",
  "vitepress": "^1.3.4",
  "vue": "^3.4.38"

diff --git a/docs/src/components/common-ui/vben-drawer.md b/docs/src/components/common-ui/vben-drawer.md
@@ -58,22 +58,26 @@ const [Drawer, drawerApi] = useVbenDrawer({
 
 所有属性都可以传入 `useVbenDrawer` 的第一个参数中。
 
-| 属性名 | 描述 | 类型 | 默认值 |
-| ------------------ | ------------------- | --------------- | ------- |
-| title | 标题 | `string\|slot` | - |
-| titleTooltip | 标题提示信息 | `string\|slot` | - |
-| description | 描述信息 | `string\|slot` | - |
-| isOpen | 弹窗打开状态 | `boolean` | `false` |
-| loading | 弹窗加载状态 | `boolean` | `false` |
-| closable | 显示关闭按钮 | `boolean` | `true` |
-| modal | 显示遮罩 | `boolean` | `true` |
-| header | 显示header | `boolean` | `true` |
-| footer | 显示footer | `boolean\|slot` | `true` |
-| confirmLoading | 确认按钮loading状态 | `boolean` | `false` |
-| closeOnClickModal | 点击遮罩关闭弹窗 | `boolean` | `true` |
-| closeOnPressEscape | esc 关闭弹窗 | `boolean` | `true` |
-| confirmText | 确认按钮文本 | `boolean\|slot` | `确认` |
-| cancelText | 取消按钮文本 | `boolean\|slot` | `取消` |
+| 属性名 | 描述 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| title | 标题 | `string\|slot` | - |
+| titleTooltip | 标题提示信息 | `string\|slot` | - |
+| description | 描述信息 | `string\|slot` | - |
+| isOpen | 弹窗打开状态 | `boolean` | `false` |
+| loading | 弹窗加载状态 | `boolean` | `false` |
+| closable | 显示关闭按钮 | `boolean` | `true` |
+| modal | 显示遮罩 | `boolean` | `true` |
+| header | 显示header | `boolean` | `true` |
+| footer | 显示footer | `boolean\|slot` | `true` |
+| confirmLoading | 确认按钮loading状态 | `boolean` | `false` |
+| closeOnClickModal | 点击遮罩关闭弹窗 | `boolean` | `true` |
+| closeOnPressEscape | esc 关闭弹窗 | `boolean` | `true` |
+| confirmText | 确认按钮文本 | `string\|slot` | `确认` |
+| cancelText | 取消按钮文本 | `string\|slot` | `取消` |
+| class | modal的class，宽度通过这个配置 | `string` | - |
+| contentClass | modal内容区域的class | `string` | - |
+| footerClass | modal底部区域的class | `string` | - |
+| headerClass | modal顶部区域的class | `string` | - |
 
 ### Event
 

diff --git a/docs/src/components/common-ui/vben-modal.md b/docs/src/components/common-ui/vben-modal.md
@@ -64,26 +64,30 @@ const [Modal, modalApi] = useVbenModal({
 
 所有属性都可以传入 `useVbenModal` 的第一个参数中。
 
-| 属性名 | 描述 | 类型 | 默认值 |
-| ------------------ | ------------------- | --------------- | ------- |
-| title | 标题 | `string\|slot` | - |
-| titleTooltip | 标题提示信息 | `string\|slot` | - |
-| description | 描述信息 | `string\|slot` | - |
-| isOpen | 弹窗打开状态 | `boolean` | `false` |
-| loading | 弹窗加载状态 | `boolean` | `false` |
-| fullscreen | 全屏显示 | `boolean` | `false` |
-| fullscreenButton | 显示全屏按钮 | `boolean` | `true` |
-| draggable | 可拖拽 | `boolean` | `false` |
-| closable | 显示关闭按钮 | `boolean` | `true` |
-| centered | 居中显示 | `boolean` | `false` |
-| modal | 显示遮罩 | `boolean` | `true` |
-| header | 显示header | `boolean` | `true` |
-| footer | 显示footer | `boolean\|slot` | `true` |
-| confirmLoading | 确认按钮loading状态 | `boolean` | `false` |
-| closeOnClickModal | 点击遮罩关闭弹窗 | `boolean` | `true` |
-| closeOnPressEscape | esc 关闭弹窗 | `boolean` | `true` |
-| confirmText | 确认按钮文本 | `boolean\|slot` | `确认` |
-| cancelText | 取消按钮文本 | `boolean\|slot` | `取消` |
+| 属性名 | 描述 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| title | 标题 | `string\|slot` | - |
+| titleTooltip | 标题提示信息 | `string\|slot` | - |
+| description | 描述信息 | `string\|slot` | - |
+| isOpen | 弹窗打开状态 | `boolean` | `false` |
+| loading | 弹窗加载状态 | `boolean` | `false` |
+| fullscreen | 全屏显示 | `boolean` | `false` |
+| fullscreenButton | 显示全屏按钮 | `boolean` | `true` |
+| draggable | 可拖拽 | `boolean` | `false` |
+| closable | 显示关闭按钮 | `boolean` | `true` |
+| centered | 居中显示 | `boolean` | `false` |
+| modal | 显示遮罩 | `boolean` | `true` |
+| header | 显示header | `boolean` | `true` |
+| footer | 显示footer | `boolean\|slot` | `true` |
+| confirmLoading | 确认按钮loading状态 | `boolean` | `false` |
+| closeOnClickModal | 点击遮罩关闭弹窗 | `boolean` | `true` |
+| closeOnPressEscape | esc 关闭弹窗 | `boolean` | `true` |
+| confirmText | 确认按钮文本 | `string\|slot` | `确认` |
+| cancelText | 取消按钮文本 | `string\|slot` | `取消` |
+| class | modal的class，宽度通过这个配置 | `string` | - |
+| contentClass | modal内容区域的class | `string` | - |
+| footerClass | modal底部区域的class | `string` | - |
+| headerClass | modal顶部区域的class | `string` | - |
 
 ### Event
 

diff --git a/docs/src/en/guide/essentials/settings.md b/docs/src/en/guide/essentials/settings.md
@@ -55,6 +55,9 @@ VITE_DEVTOOLS=true
 
 # Whether to inject global loading
 VITE_INJECT_APP_LOADING=true
+
+# Whether to generate after packaging dist.zip
+VITE_ARCHIVER=true
 ```
 
 :::

diff --git a/docs/src/guide/essentials/settings.md b/docs/src/guide/essentials/settings.md
@@ -55,6 +55,7 @@ VITE_DEVTOOLS=true
 
 # 是否注入全局loading
 VITE_INJECT_APP_LOADING=true
+
 ```
 
 ```bash [.env.production]
@@ -75,6 +76,10 @@ VITE_ROUTER_HISTORY=hash
 
 # 是否注入全局loading
 VITE_INJECT_APP_LOADING=true
+
+# 打包后是否生成dist.zip
+VITE_ARCHIVER=true
+
 ```
 
 :::

diff --git a/internal/lint-configs/eslint-config/src/configs/perfectionist.ts b/internal/lint-configs/eslint-config/src/configs/perfectionist.ts
@@ -68,7 +68,7 @@ export async function perfectionist(): Promise<Linter.Config[]> {
  ignorePattern: ['children'],
  order: 'asc',
  partitionByComment: 'Part:**',
- type: 'alphabetical',
+ type: 'natural',
  },
  ],
  'perfectionist/sort-vue-attributes': [

diff --git a/internal/tailwind-config/src/index.ts b/internal/tailwind-config/src/index.ts
@@ -190,8 +190,8 @@ export default {
  },
  float: {
  '0%': { transform: 'translateY(0)' },
- '100%': { transform: 'translateY(0)' },
  '50%': { transform: 'translateY(-20px)' },
+ '100%': { transform: 'translateY(0)' },
  },
  },
  zIndex: {
@@ -228,11 +228,11 @@ function createColorsPalette(name: string) {
  // • backgroundDarkest (#172554): 适用于最深的背景，可能用于非常深色的区域或极端对比色。
 
  return {
+ 50: `hsl(var(--${name}-50))`,
  100: `hsl(var(--${name}-100))`,
  200: `hsl(var(--${name}-200))`,
  300: `hsl(var(--${name}-300))`,
  400: `hsl(var(--${name}-400))`,
- 50: `hsl(var(--${name}-50))`,
  500: `hsl(var(--${name}-500))`,
  600: `hsl(var(--${name}-600))`,
  700: `hsl(var(--${name}-700))`,

diff --git a/internal/vite-config/package.json b/internal/vite-config/package.json
@@ -29,6 +29,7 @@
  "dependencies": {
  "@intlify/unplugin-vue-i18n": "^4.0.0",
  "@jspm/generator": "^2.1.3",
+ "archiver": "^7.0.1",
  "cheerio": "1.0.0",
  "get-port": "^7.1.0",
  "html-minifier-terser": "^7.2.0",
@@ -39,6 +40,7 @@
  "vite-plugin-vue-devtools": "^7.3.9"
  },
  "devDependencies": {
+ "@types/archiver": "^6.0.2",
  "@types/html-minifier-terser": "^7.0.2",
  "@vben/node-utils": "workspace:*",
  "@vitejs/plugin-vue": "^5.1.2",

diff --git a/internal/vite-config/src/config/application.ts b/internal/vite-config/src/config/application.ts
@@ -24,6 +24,8 @@ function defineApplicationConfig(userConfigPromise?: DefineApplicationOptions) {
  const env = loadEnv(mode, root);
 
  const plugins = await loadApplicationPlugins({
+ archiver: true,
+ archiverPluginOptions: {},
  compress: false,
  compressTypes: ['brotli', 'gzip'],
  devtools: true,

diff --git a/internal/vite-config/src/plugins/archiver.ts b/internal/vite-config/src/plugins/archiver.ts
@@ -0,0 +1,67 @@
+import type { PluginOption } from 'vite';
+
+import type { ArchiverPluginOptions } from '../typing';
+
+import fs from 'node:fs';
+import { join } from 'node:path';
+
+import archiver from 'archiver';
+
+export const viteArchiverPlugin = (
+ options: ArchiverPluginOptions = {},
+): PluginOption => {
+ return {
+ apply: 'build',
+ closeBundle: {
+ handler() {
+ const { name = 'dist', outputDir = '.' } = options;
+
+ setTimeout(async () => {
+ const folderToZip = 'dist';
+ const zipOutputPath = join(process.cwd(), outputDir, `${name}.zip`);
+
+ try {
+ await zipFolder(folderToZip, zipOutputPath);
+ console.log(`Folder has been zipped to: ${zipOutputPath}`);
+ } catch (error) {
+ console.error('Error zipping folder:', error);
+ }
+ }, 0);
+ },
+ order: 'post',
+ },
+ enforce: 'post',
+ name: 'vite:archiver',
+ };
+};
+
+async function zipFolder(
+ folderPath: string,
+ outputPath: string,
+): Promise<void> {
+ return new Promise((resolve, reject) => {
+ const output = fs.createWriteStream(outputPath);
+ const archive = archiver('zip', {
+ zlib: { level: 9 }, // 设置压缩级别为 9 以实现最高压缩率
+ });
+
+ output.on('close', () => {
+ console.log(
+ `ZIP file created: ${outputPath} (${archive.pointer()} total bytes)`,
+ );
+ resolve();
+ });
+
+ archive.on('error', (err) => {
+ reject(err);
+ });
+
+ archive.pipe(output);
+
+ // 使用 directory 方法以流的方式压缩文件夹，减少内存消耗
+ archive.directory(folderPath, false);
+
+ // 流式处理完成
+ archive.finalize();
+ });
+}
diff --git a/internal/vite-config/src/plugins/index.ts b/internal/vite-config/src/plugins/index.ts
@@ -18,6 +18,7 @@ import { libInjectCss as viteLibInjectCss } from 'vite-plugin-lib-inject-css';
 import { VitePWA } from 'vite-plugin-pwa';
 import viteVueDevTools from 'vite-plugin-vue-devtools';
 
+import { viteArchiverPlugin } from './archiver';
 import { viteExtraAppConfigPlugin } from './extra-app-config';
 import { viteImportMapPlugin } from './importmap';
 import { viteInjectAppLoadingPlugin } from './inject-app-loading';
@@ -92,6 +93,8 @@ async function loadApplicationPlugins(
  const env = options.env;
 
  const {
+ archiver,
+ archiverPluginOptions,
  compress,
  compressTypes,
  extraAppConfig,
@@ -138,6 +141,7 @@ async function loadApplicationPlugins(
  return [await viteNitroMockPlugin(nitroMockOptions)];
  },
  },
+
  {
  condition: injectAppLoading,
  plugins: async () => [await viteInjectAppLoadingPlugin(!!isBuild, env)],
@@ -184,7 +188,6 @@ async function loadApplicationPlugins(
  condition: !!html,
  plugins: () => [viteHtmlPlugin({ minify: true })],
  },
-
  {
  condition: isBuild && importmap,
  plugins: () => {
@@ -197,6 +200,12 @@ async function loadApplicationPlugins(
  await viteExtraAppConfigPlugin({ isBuild: true, root: process.cwd() }),
  ],
  },
+ {
+ condition: archiver,
+ plugins: async () => {
+ return [await viteArchiverPlugin(archiverPluginOptions)];
+ },
+ },
  ]);
 }
 
@@ -226,6 +235,7 @@ async function loadLibraryPlugins(
 export {
  loadApplicationPlugins,
  loadLibraryPlugins,
+ viteArchiverPlugin,
  viteCompressPlugin,
  viteDtsPlugin,
  viteHtmlPlugin,