@4399ywkf/cli 0.0.3 → 0.0.4

package/bin/cli.js

@@ -1,14 +1,75 @@
 #!/usr/bin/env node
-const program = require("commander")
-const inquirer = require("inquirer")
-const path = require("path")
-const ora = require('ora') // 引入ora
-const fs = require('fs-extra')
-const { exec } = require('child_process');
+const program = require("commander");
+const inquirer = require("inquirer");
+const path = require("path");
+const ora = require("ora");
+const fs = require("fs-extra");
+const { exec } = require("child_process");
+
+// 美化输出相关
+const chalk = require("chalk");
+const boxen = require("boxen");
+const figlet = require("figlet");
 
 // const templates = require("./templates.js")
-const { getGitReposList } = require('./api.js')
-const package = require("../package.json")
+const { getGitReposList } = require("./api.js");
+const package = require("../package.json");
+
+// 美化输出函数
+function printBanner() {
+  console.log(
+    chalk.cyan(
+      figlet.textSync("YWKF CLI", {
+        font: "Standard",
+        horizontalLayout: "default",
+        verticalLayout: "default",
+      })
+    )
+  );
+  console.log(chalk.gray(`版本: ${package.version}\n`));
+}
+
+function printSuccess(message) {
+  console.log(chalk.green("✅ " + message));
+}
+
+function printError(message) {
+  console.log(chalk.red("❌ " + message));
+}
+
+function printInfo(message) {
+  console.log(chalk.blue("ℹ️  " + message));
+}
+
+function printWarning(message) {
+  console.log(chalk.yellow("⚠️  " + message));
+}
+
+function printFinalInstructions(projectName) {
+  const instructions = [
+    chalk.green("🎉 项目创建成功！"),
+    "",
+    chalk.cyan("接下来的步骤："),
+    chalk.gray("  1. 进入项目目录"),
+    chalk.white(`     cd ${projectName}`),
+    chalk.gray("  2. 安装依赖"),
+    chalk.white("     pnpm i"),
+    chalk.gray("  3. 启动项目"),
+    chalk.white("     pnpm start"),
+    "",
+    chalk.magenta("🚀 开始你的开发之旅吧！"),
+  ].join("\n");
+
+  console.log(
+    boxen(instructions, {
+      padding: 1,
+      margin: 1,
+      borderStyle: "round",
+      borderColor: "cyan",
+      backgroundColor: "black",
+    })
+  );
+}
 
 function cloneRepository(repoUrl, destination) {
   return new Promise((resolve, reject) => {
@@ -26,119 +87,190 @@ function cloneRepository(repoUrl, destination) {
 program
   .command("create [projectName]")
   .description("创建模版")
-  .option('-t, --template <template>', '模版名称')
+  .option("-t, --template <template>", "模版名称")
   .action(async (projectName, options) => {
-    const getRepoLoading = ora('获取模版列表...')
-    getRepoLoading.start()
-    // const templates = await getGitReposList('Emma-Alpha')
+    // 显示Banner
+    printBanner();
+
+    const getRepoLoading = ora({
+      text: "正在获取模版列表...",
+      spinner: "dots",
+    });
+    getRepoLoading.start();
+
+    // 模拟异步获取模版数据
     const templates = {
       webpack: {
         main: [
           {
-            value: "https://ywgit.gz4399.com/ywkf/webpack-mainApplicate_demo.git",
-            name: "webpack-mainApplicate_demo"
-          }
+            value:
+              "https://ywgit.gz4399.com/ywkf/webpack-mainApplicate_demo.git",
+            name: "webpack-mainApplicate_demo",
+          },
         ],
         sub: [
           {
-            value: "https://ywgit.gz4399.com/ywkf/webpack-subApplicate_demo.git",
-            name: "webpack-subApplicate_demo"
-          }
-        ]
+            value:
+              "https://ywgit.gz4399.com/ywkf/webpack-subApplicate_demo.git",
+            name: "webpack-subApplicate_demo",
+          },
+        ],
       },
       vite: {
         main: [
           {
             value: "https://ywgit.gz4399.com/ywkf/vite-mainApplicate_demo.git",
-            name: "vite-mainApplicate_demo"
-          }
+            name: "vite-mainApplicate_demo",
+          },
         ],
         sub: [
           {
             value: "https://ywgit.gz4399.com/ywkf/vite-subApplicate_demo",
-            name: "vite-subApplicate_demo"
-          }
-        ]
-      }
-    }
+            name: "vite-subApplicate_demo",
+          },
+        ],
+      },
+    };
 
-    getRepoLoading.succeed('获取模版列表成功!')
+    getRepoLoading.succeed();
+    printSuccess("模版列表获取成功！");
+    console.log(); // 空行
 
     // 1. 如果用户没有传入名称就交互式输入
     if (!projectName) {
       const { name } = await inquirer.prompt({
         type: "input",
         name: "name",
-        message: "请输入项目名称：",
-      })
-      projectName = name // 赋值输入的项目名称
+        message: chalk.cyan("📝 请输入项目名称："),
+        validate: (input) => {
+          if (!input.trim()) {
+            return "项目名称不能为空！";
+          }
+          return true;
+        },
+      });
+      projectName = name;
     }
-    console.log('项目名称：', projectName)
+    printInfo(`项目名称：${chalk.bold(projectName)}`);
 
     // 2. 选择工具类型
     const { toolType } = await inquirer.prompt({
-      type: 'list',
-      name: 'toolType',
-      message: '请选择工具类型：',
-      choices: ['webpack', 'vite']
-    })
-    console.log('工具类型：', toolType)
+      type: "list",
+      name: "toolType",
+      message: chalk.cyan("🔧 请选择工具类型："),
+      choices: [
+        {
+          name: `${chalk.blue("📦 Webpack")} - 成熟稳定的打包工具`,
+          value: "webpack",
+        },
+        { name: `${chalk.green("⚡ Vite")} - 快速的构建工具`, value: "vite" },
+      ],
+    });
+    printInfo(`工具类型：${chalk.bold(toolType)}`);
 
     // 3. 选择应用方向
     const { appDirection } = await inquirer.prompt({
-      type: 'list',
-      name: 'appDirection',
-      message: '请选择应用方向：',
-      choices: ['main', 'sub']
-    })
-    console.log('应用方向：', appDirection)
+      type: "list",
+      name: "appDirection",
+      message: chalk.cyan("🎯 请选择应用方向："),
+      choices: [
+        { name: `${chalk.magenta("🏠 主应用")} - 微前端主应用`, value: "main" },
+        { name: `${chalk.yellow("🧩 子应用")} - 微前端子应用`, value: "sub" },
+      ],
+    });
+    printInfo(
+      `应用方向：${chalk.bold(appDirection === "main" ? "主应用" : "子应用")}`
+    );
 
     // 4. 选择模版
     let projectTemplate;
     if (options.template) {
-      projectTemplate = templates[toolType][appDirection].find(template => template.name === options.template)?.value;
+      projectTemplate = templates[toolType][appDirection].find(
+        (template) => template.name === options.template
+      )?.value;
+      if (projectTemplate) {
+        printSuccess(`使用指定模版：${chalk.bold(options.template)}`);
+      } else {
+        printWarning(`未找到指定模版 "${options.template}"，请重新选择`);
+      }
     }
 
     if (!projectTemplate) {
       const { template } = await inquirer.prompt({
-        type: 'list',
-        name: 'template',
-        message: '请选择模版：',
-        choices: templates[toolType][appDirection]
-      })
-      projectTemplate = template; // 赋值选择的项目模板
+        type: "list",
+        name: "template",
+        message: chalk.cyan("📋 请选择模版："),
+        choices: templates[toolType][appDirection].map((t) => ({
+          name: `${chalk.white(t.name)}`,
+          value: t.value,
+        })),
+      });
+      projectTemplate = template;
     }
-    console.log('模版：', projectTemplate)
+
+    console.log(); // 空行
 
     // 获取目标文件夹路径
-    const dest = path.join(process.cwd(), projectName)
+    const dest = path.join(process.cwd(), projectName);
     // 判断文件夹是否存在，存在就交互询问用户是否覆盖
     if (fs.existsSync(dest)) {
+      printWarning(`目录 "${projectName}" 已存在！`);
       const { force } = await inquirer.prompt({
-        type: 'confirm',
-        name: 'force',
-        message: '目录已存在，是否覆盖？'
-      })
-      // 如果覆盖就删除文件夹继续往下执行，否的话就退出进程
-      force ? fs.removeSync(dest) : process.exit(1)
+        type: "confirm",
+        name: "force",
+        message: chalk.yellow("⚠️  是否覆盖现有目录？"),
+        default: false,
+      });
+      if (force) {
+        fs.removeSync(dest);
+        printSuccess("已删除现有目录");
+      } else {
+        printInfo("操作已取消");
+        process.exit(1);
+      }
     }
 
     // 开始loading
-    const loading = ora('正在下载模版...')
-    loading.start()
+    const loading = ora({
+      text: "正在下载模版...",
+      spinner: "bouncingBar",
+    });
+    loading.start();
+
     // 5. 开始下载模版
     try {
       const result = await cloneRepository(projectTemplate, dest);
-      loading.succeed('创建模版成功!') // 成功loading
-      console.log(`\ncd ${projectName}`)
-      console.log('pnpm i')
-      console.log('pnpm start\n')
+      loading.succeed();
+      printSuccess("模版下载成功！");
+
+      // 删除.git文件夹
+      const gitDir = path.join(dest, ".git");
+      if (fs.existsSync(gitDir)) {
+        fs.removeSync(gitDir);
+        printSuccess("已清理 .git 文件夹");
+      }
+
+      console.log(); // 空行
+      printFinalInstructions(projectName);
     } catch (error) {
-      loading.fail('创建模版失败：' + error) // 失败loading
+      loading.fail();
+      printError("模版下载失败：" + error);
+      process.exit(1);
     }
-  })
+  });
 
 // 定义当前版本
-program.version(`v${package.version}`)
-program.on('--help', () => { }) // 添加--help
-program.parse(process.argv)
+program.version(`v${package.version}`);
+program.on("--help", () => {
+  printBanner();
+  console.log(chalk.gray("使用示例："));
+  console.log(chalk.white("  @4399ywkf/cli create my-project"));
+  console.log(
+    chalk.white(
+      "  @4399ywkf/cli create my-project -t webpack-mainApplicate_demo"
+    )
+  );
+  console.log();
+});
+
+program.parse(process.argv);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4399ywkf/cli",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "运维开发部脚手架",
   "main": "index.js",
   "bin": {
@@ -9,9 +9,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "repository": {
     "type": "git"
   },
@@ -24,12 +21,25 @@
     "download-git-repo": "^3.0.2",
     "fs-extra": "^11.1.1",
     "inquirer": "^8.2.5",
-    "ora": "^5.4.1"
+    "ora": "^5.4.1",
+    "chalk": "^4.1.2",
+    "boxen": "^5.1.2",
+    "figlet": "^1.5.2"
   },
   "files": [
     "bin"
   ],
   "authors": [
     "ywjszx@4399.com"
-  ]
-}
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "node bin/cli.js",
+    "debug": "node --inspect-brk bin/cli.js",
+    "debug:create": "node --inspect-brk bin/cli.js create test-project",
+    "debug:create-with-template": "node --inspect-brk bin/cli.js create test-project -t webpack-mainApplicate_demo",
+    "debug:help": "node --inspect-brk bin/cli.js --help",
+    "link": "npm link",
+    "unlink": "npm unlink -g"
+  }
+}