@4399ywkf/cli 0.0.3 → 0.0.5

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) => {
@@ -23,122 +84,351 @@ function cloneRepository(repoUrl, destination) {
   });
 }
 
+// 新添加：更新环境模板文件
+async function updateEnvTemplate(filePath, config) {
+  try {
+    // 读取模板文件内容
+    let templateContent = await fs.readFile(filePath, "utf8");
+
+    // 替换模板变量
+    const replacements = {
+      "{{APP_CNAME}}": `"${config.appCname}"`,
+      "{{APP_NAME}}": `"${config.appName}"`,
+      "{{SENTRY_ENABLED}}": `"${config.sentryEnabled ? "true" : "false"}"`,
+      "{{SENTRY_DSN}}": `"${config.sentryDsn}"`,
+    };
+
+    // 执行替换
+    for (const [placeholder, value] of Object.entries(replacements)) {
+      templateContent = templateContent.replace(
+        new RegExp(placeholder, "g"),
+        value
+      );
+    }
+
+    // 写回文件
+    await fs.writeFile(filePath, templateContent, "utf8");
+  } catch (error) {
+    throw new Error(`更新模板文件失败: ${error.message}`);
+  }
+}
+
+// 配置 webpack 子应用的环境变量（填充模板）
+async function configureWebpackSubApp(projectPath, projectName) {
+  printInfo("正在配置 Webpack 子应用环境变量...");
+
+  const envFilePath = path.join(projectPath, "config", "env", ".env.public");
+
+  // 检查模板文件是否存在
+  if (!fs.existsSync(envFilePath)) {
+    printWarning("未找到 .env.public 模板文件，跳过配置");
+    return;
+  }
+
+  // 询问用户配置选项
+  const { configureEnv } = await inquirer.prompt({
+    type: "confirm",
+    name: "configureEnv",
+    message: chalk.cyan("🔧 是否要自定义应用配置？"),
+    default: true,
+  });
+
+  if (!configureEnv) {
+    // 如果不配置，使用默认值填充模板
+    const defaultConfig = {
+      appCname: projectName.toLowerCase().replace(/[^a-z0-9-]/g, "-"),
+      appName: projectName
+        .toLowerCase()
+        .replace(/[^a-z0-9-]/g, "-")
+        .split("-")
+        .map((word, index) =>
+          index === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1)
+        )
+        .join(""),
+      outputPath: "dist",
+      publicPath: "/",
+    };
+
+    await updateEnvTemplate(envFilePath, defaultConfig);
+    printInfo("已使用默认配置填充模板");
+    return;
+  }
+
+  // 获取用户输入的配置
+  const config = await inquirer.prompt([
+    {
+      type: "input",
+      name: "appName",
+      message: chalk.cyan("📝 请输入应用代码名称(APP_NAME)："),
+      default: projectName.toLowerCase().replace(/[^a-z0-9-_]/g, "-"),
+      validate: (input) => {
+        if (!input.trim()) {
+          return "应用代码名称不能为空！";
+        }
+        if (!/^[a-z0-9-_]+$/.test(input)) {
+          return "应用代码名称只能包含小写字母、数字、横线和下划线！";
+        }
+        return true;
+      },
+    },
+    {
+      type: "input",
+      name: "appCname",
+      message: chalk.cyan("📝 请输入应用名称 (APP_CNAME)："),
+      default: projectName.toLowerCase().replace(/[^a-z0-9-_]/g, "-"),
+      validate: (input) => {
+        if (!input.trim()) {
+          return "应用名称不能为空！";
+        }
+
+        // 支持中文、英文、数字、横线、下划线，必须以字母或中文开头
+        if (
+          !/^[\u4e00-\u9fff\u3400-\u4dbfa-zA-Z][\u4e00-\u9fff\u3400-\u4dbfa-zA-Z0-9_-]*$/.test(
+            input
+          )
+        ) {
+          return "应用名称必须以中文或字母开头，可包含中文、字母、数字、横线和下划线！";
+        }
+
+        return true;
+      },
+    },
+    {
+      type: "confirm",
+      name: "sentryEnabled",
+      message: chalk.cyan("📝 是否开启 Sentry？"),
+      default: true,
+    },
+    // 如果开启 sentry 则需要输入 sentry 的 dsn
+    {
+      type: "input",
+      name: "sentryDsn",
+      message: chalk.cyan("📝 请输入 Sentry 的 DSN："),
+      default: "https://207b65a59562963635abde2cfce82651@sentry.gz4399.com/28",
+      when: (answers) => answers.sentryEnabled,
+    },
+  ]);
+
+  try {
+    // 更新模板文件
+    await updateEnvTemplate(envFilePath, config);
+    printSuccess(`已更新环境配置文件：${chalk.bold(".env.public")}`);
+
+    // 显示配置信息
+    console.log();
+    printInfo("应用配置信息：");
+    console.log(chalk.gray(`  应用代码名称: ${chalk.white(config.appCname)}`));
+    console.log(chalk.gray(`  应用名称: ${chalk.white(config.appName)}`));
+    console.log();
+  } catch (error) {
+    printError(`更新环境配置文件失败：${error.message}`);
+    throw error;
+  }
+}
+
 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;
+      const foundTemplate = templates[toolType][appDirection].find(
+        (template) => template.name === options.template
+      );
+      if (foundTemplate) {
+        projectTemplate = foundTemplate.value;
+        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; // 赋值选择的项目模板
+      const availableTemplates = templates[toolType][appDirection];
+
+      // 如果只有一个模版，直接使用它
+      if (availableTemplates.length === 1) {
+        projectTemplate = availableTemplates[0].value;
+      } else {
+        // 多个模版时让用户选择
+        const { template } = await inquirer.prompt({
+          type: "list",
+          name: "template",
+          message: chalk.cyan("📋 请选择模版："),
+          choices: availableTemplates.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 文件夹");
+      }
+
+      // 新添加：如果是 webpack 子应用，进行环境配置
+      if (toolType === "webpack" && appDirection === "sub") {
+        console.log(); // 空行
+        await configureWebpackSubApp(dest, projectName);
+      }
+
+      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.5",
   "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"
+  }
+}