[WebComponentsEditor] 打包组件时支持可选打包

MoomFE · Jul 25, 2022 · 373538d · 373538d
1 parent f444f54
commit 373538d
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 23 deletions.
diff --git a/WebComponentsEditor/package.json b/WebComponentsEditor/package.json
@@ -28,11 +28,13 @@
     "@vitejs/plugin-vue": "^3.0.1",
     "@vitejs/plugin-vue-jsx": "^2.0.0",
     "@vue/compiler-sfc": "^3.2.37",
+    "chalk": "^5.0.1",
     "eslint": "^8.20.0",
     "fast-glob": "^3.2.11",
     "fs-extra": "^10.1.0",
     "magic-string": "^0.26.2",
     "pnpm": "^7.5.2",
+    "prompts": "^2.4.2",
     "sass": "^1.53.0",
     "tsx": "^3.8.0",
     "typescript": "^4.7.4",

diff --git a/WebComponentsEditor/pnpm-lock.yaml b/WebComponentsEditor/pnpm-lock.yaml
diff --git a/WebComponentsEditor/scripts/build.ts b/WebComponentsEditor/scripts/build.ts
@@ -1,7 +1,9 @@
 import { resolve } from 'path';
 import fs from 'fs-extra';
+import prompts from 'prompts';
+import chalk from 'chalk';
 import { type InlineConfig, build, mergeConfig } from 'vite';
-import { camelCase } from 'lodash-es';
+import { camelCase, chunk } from 'lodash-es';
 import { createViteBaseConfig } from '../vite.config';
 
 // Get components info start
@@ -28,32 +30,50 @@ const rootPath = resolve(__dirname, '../');
 const srcPath = resolve(rootPath, 'src');
 const outDirPath = resolve(rootPath, 'dist');
 
-// 清空代码输出目录
-fs.emptyDirSync(outDirPath);
-
 // 打包所有单个组件
 (async () => {
-  for (const key in componentsInfo) {
-    const { name, indexPath, viteConfigPath } = componentsInfo[key];
-    const viteBaseConfig = createViteBaseConfig();
-    const viteExtraConfig: InlineConfig = {
-      configFile: viteConfigPath ? resolve(srcPath, viteConfigPath) : false,
-      publicDir: resolve(rootPath, 'public', name),
-      build: {
-        minify: true,
-        outDir: resolve(outDirPath, name),
-        emptyOutDir: false,
-        lib: {
-          entry: resolve(srcPath, indexPath),
-          formats: ['iife'],
-          name: camelCase(name),
-          fileName: () => 'index.js',
+  const response = await prompts({
+    type: 'multiselect',
+    name: 'value',
+    message: '请选择需要打包的组件',
+    choices: Object.values(componentsInfo).map(info => ({ title: `${info.info.name} ( ${info.info.tag} )`, value: info.name })),
+    instructions: false,
+  });
+
+  if (response.value.length) {
+    // 清空代码输出目录
+    await fs.emptyDir(outDirPath);
+
+    // 打包组件
+    for (const key of response.value) {
+      const { name, info, indexPath, viteConfigPath } = Object.values(componentsInfo).find(info => info.name === key)!;
+      const viteBaseConfig = createViteBaseConfig();
+      const viteExtraConfig: InlineConfig = {
+        configFile: viteConfigPath ? resolve(srcPath, viteConfigPath) : false,
+        publicDir: resolve(rootPath, 'public', name),
+        build: {
+          minify: true,
+          outDir: resolve(outDirPath, name),
+          emptyOutDir: false,
+          lib: {
+            entry: resolve(srcPath, indexPath),
+            formats: ['iife'],
+            name: camelCase(name),
+            fileName: () => 'index.js',
+          },
         },
-      },
-    };
+      };
 
-    await build(
-      mergeConfig(viteBaseConfig, viteExtraConfig),
+      console.log(chalk.green(`- 开始打包 ${info.name} ( ${info.tag} ) 组件`));
+
+      await build(
+        mergeConfig(viteBaseConfig, viteExtraConfig),
+      );
+    }
+  }
+  else {
+    console.log(
+      chalk.red('没有选择任何组件'),
     );
   }
 })();