[WebComponentsEditor] 美化打包时的控制台输出, 其他优化代码

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

Hide file tree

Showing 4 changed files with 17 additions and 8 deletions.
diff --git a/WebComponentsEditor/package.json b/WebComponentsEditor/package.json
@@ -25,6 +25,7 @@
     "@types/fs-extra": "^9.0.13",
     "@types/lodash-es": "^4.17.6",
     "@types/node": "^18.0.6",
+    "@types/prompts": "^2.0.14",
     "@vitejs/plugin-vue": "^3.0.1",
     "@vitejs/plugin-vue-jsx": "^2.0.0",
     "@vue/compiler-sfc": "^3.2.37",

diff --git a/WebComponentsEditor/pnpm-lock.yaml b/WebComponentsEditor/pnpm-lock.yaml
diff --git a/WebComponentsEditor/scripts/build.ts b/WebComponentsEditor/scripts/build.ts
@@ -3,14 +3,14 @@ import fs from 'fs-extra';
 import prompts from 'prompts';
 import chalk from 'chalk';
 import { type InlineConfig, build, mergeConfig } from 'vite';
-import { camelCase, chunk } from 'lodash-es';
+import { camelCase } from 'lodash-es';
 import { createViteBaseConfig } from '../vite.config';
 
 // Get components info start
 import * as fpsInfoInfo from '@/web-components/fps-info/info';
 import * as memoryInfoInfo from '@/web-components/memory-info/info';
 
-const componentsInfo = {
+const componentsInfo: Record<string, { name: string; info: { name: string; tag: string }; indexPath: string; viteConfigPath?: string }> = {
   fpsInfo: {
     name: 'fps-info',
     info: fpsInfoInfo,
@@ -23,7 +23,7 @@ const componentsInfo = {
     indexPath: 'web-components/memory-info/index.ts',
     viteConfigPath: undefined,
   },
-} as Record<string, { name: string; info: { name: string; tag: string }; indexPath: string; viteConfigPath?: string }>;
+};
 // Get components info end
 
 const rootPath = resolve(__dirname, '../');
@@ -40,7 +40,7 @@ const outDirPath = resolve(rootPath, 'dist');
     instructions: false,
   });
 
-  if (response.value.length) {
+  if (response.value?.length) {
     // 清空代码输出目录
     await fs.emptyDir(outDirPath);
 
@@ -64,7 +64,7 @@ const outDirPath = resolve(rootPath, 'dist');
         },
       };
 
-      console.log(chalk.green(`- 开始打包 ${info.name} ( ${info.tag} ) 组件`));
+      console.log(`\n${chalk.green(`- 开始打包 ${chalk.blue(`${info.name} ( ${info.tag} )`)} 组件`)}`);
 
       await build(
         mergeConfig(viteBaseConfig, viteExtraConfig),
@@ -73,7 +73,7 @@ const outDirPath = resolve(rootPath, 'dist');
   }
   else {
     console.log(
-      chalk.red('没有选择任何组件'),
+      chalk.red('× 没有选择任何组件'),
     );
   }
 })();
diff --git a/WebComponentsEditor/scripts/fetchComponents.ts b/WebComponentsEditor/scripts/fetchComponents.ts
@@ -46,7 +46,7 @@ readFile(buildFilePath, 'utf8').then((code) => {
 
   // 将所有的组件信息放到对象中
   componentsCode += '\n';
-  componentsCode += 'const componentsInfo = {\n';
+  componentsCode += 'const componentsInfo: Record<string, { name: string; info: { name: string; tag: string }; indexPath: string; viteConfigPath?: string }> = {\n';
   Object.entries(components).forEach(([name, { index, viteConfig }]) => {
     componentsCode += `  ${camelCase(name)}: {\n`;
     componentsCode += `    name: '${name}',\n`;
@@ -55,7 +55,7 @@ readFile(buildFilePath, 'utf8').then((code) => {
     componentsCode += `    viteConfigPath: ${viteConfig ? `'${viteConfig}'` : undefined},\n`;
     componentsCode += '  },\n';
   });
-  componentsCode += '} as Record<string, { name: string; info: { name: string; tag: string }; indexPath: string; viteConfigPath?: string }>;';
+  componentsCode += '};';
 
   // 输出打包代码
   outputFile(