@4399ywkf/cli 0.0.15 → 0.0.18

package/dist/cli.js

@@ -23,12 +23,18 @@ var templates$1 = {
         {
           value: "https://ywgit.gz4399.com/ywkf/webpack-mainApplicate_demo.git",
           name: "webpack-mainApplicate_demo",
+          description: "基于 Webpack 的微前端主应用模板",
+          features: ["qiankun", "react", "antd", "路由管理"],
+          recommended: true,
         },
       ],
       sub: [
         {
           value: "https://ywgit.gz4399.com/ywkf/webpack-subApplicate_demo.git",
           name: "webpack-subApplicate_demo",
+          description: "标准的微前端子应用模板",
+          features: ["react", "antd", "独立运行"],
+          recommended: true,
         },
       ],
     },
@@ -37,12 +43,18 @@ var templates$1 = {
         {
           value: "https://ywgit.gz4399.com/ywkf/vite-mainApplicate_demo.git",
           name: "vite-mainApplicate_demo",
+          description: "基于 Vite 的微前端主应用模板",
+          features: ["qiankun", "react", "antd", "路由管理"],
+          recommended: true,
         },
       ],
       sub: [
         {
           value: "https://ywgit.gz4399.com/ywkf/vite-subApplicate_demo.git",
           name: "vite-subApplicate_demo",
+          description: "标准的微前端子应用模板",
+          features: ["react", "antd", "独立运行"],
+          recommended: true,
         },
       ],
     },
@@ -52,6 +64,9 @@ var templates$1 = {
       {
         value: "https://ywgit.gz4399.com/ywkf/next-dome.git",
         name: "next-demo",
+        description: "基于 Next.js 的全栈应用模板",
+        features: ["react", "antd", "next", "路由管理"],
+        recommended: true,
       },
     ],
   },
@@ -70,7 +85,7 @@ const chalk = require$$7;
 const boxen = require$$8;
 const figlet = require$$9;
 const pkgInfo = {
-  version: "0.0.15",
+  version: "0.0.18",
 };
 
 // 美化输出函数
@@ -104,31 +119,44 @@ function printWarning(message) {
 }
 
 function printFinalInstructions(projectName) {
-  const instructions = [
-    chalk.green("🎉 项目创建成功！"),
-    "",
-    chalk.cyan("接下来的步骤："),
-    chalk.gray("  1. 进入项目目录"),
-    chalk.white(`     cd ${projectName}`),
-    chalk.gray("  2. 切换Node版本"),
-    chalk.white("     nvm use"),
-    chalk.gray("  3. 安装依赖"),
-    chalk.white("     pnpm i"),
-    chalk.gray("  4. 启动项目"),
-    chalk.white("     pnpm start"),
-    "",
-    chalk.magenta("🚀 开始你的开发之旅吧！"),
-  ].join("\n");
-
+  console.log();
   console.log(
-    boxen(instructions, {
-      padding: 1,
-      margin: 1,
-      borderStyle: "round",
-      borderColor: "cyan",
-      backgroundColor: "black",
-    })
+    boxen(
+      [
+        chalk.green.bold("🎉 项目创建成功！"),
+        "",
+        chalk.yellow("📂 项目路径：") + chalk.cyan(projectName),
+        "",
+        chalk.yellow("🚀 下一步："),
+        chalk.white(`  cd ${projectName}`),
+        chalk.white("  npm install      # 或 pnpm install"),
+        chalk.white("  npm run dev      # 启动开发服务器"),
+        "",
+        chalk.gray("💡 提示："),
+        chalk.gray("  - 查看 README.md 了解更多信息"),
+        chalk.gray("  - 检查 package.json 中的可用脚本"),
+        chalk.gray("  - 访问内部文档了解最佳实践"),
+      ].join("\n"),
+      {
+        padding: 1,
+        margin: 1,
+        borderStyle: "round",
+        borderColor: "green",
+      }
+    )
   );
+
+  // 根据项目类型提供特定建议
+  if (architectureType === "microFrontend") {
+    console.log(chalk.blue("🔗 微前端相关："));
+    if (appDirection === "main") {
+      console.log(chalk.gray("  - 配置子应用注册信息"));
+      console.log(chalk.gray("  - 设置路由规则"));
+    } else {
+      console.log(chalk.gray("  - 确认子应用配置正确"));
+      console.log(chalk.gray("  - 测试独立运行"));
+    }
+  }
 }
 
 function cloneRepository(repoUrl, destination) {
@@ -300,30 +328,19 @@ async function configureWebpackSubApp(projectPath, projectName) {
   }
 }
 
+// 支持无参数创建（在当前目录）
 program
-  .command("create [projectName]")
-  .description("创建模版")
-  .option("-t, --template <template>", "模版名称")
+  .command("create [project-name]") // 使project-name可选
+  .description("创建新项目")
+  .option("-t, --template <template>", "指定模版")
   .action(async (projectName, options) => {
-    // 显示Banner
-    printBanner();
-
-    const getRepoLoading = ora({
-      text: "正在获取模版列表...",
-      spinner: "dots",
-    });
-    getRepoLoading.start();
-
-    getRepoLoading.succeed();
-    printSuccess("模版列表获取成功！");
-    console.log(); // 空行
-
-    // 1. 如果用户没有传入名称就交互式输入
+    // 如果没有提供项目名，询问用户
     if (!projectName) {
       const { name } = await inquirer.prompt({
         type: "input",
         name: "name",
         message: chalk.cyan("📝 请输入项目名称："),
+        default: "my-project",
         validate: (input) => {
           if (!input.trim()) {
             return "项目名称不能为空！";
@@ -335,218 +352,319 @@ program
     }
     printInfo(`项目名称：${chalk.bold(projectName)}`);
 
-    // 2. 选择架构类型
-    const { architectureType } = await inquirer.prompt({
-      type: "list",
-      name: "architectureType",
-      message: chalk.cyan("🏗️  请选择架构类型："),
-      choices: [
-        {
-          name: `${chalk.blue("🧩 微前端架构")} - 支持主应用和子应用`,
-          value: "microFrontend",
-        },
-        {
-          name: `${chalk.green("📱 独立应用")} - 单体应用架构`,
-          value: "standalone",
-        },
-      ],
+    // 添加预设选择（移到这里）
+    const { usePreset } = await inquirer.prompt({
+      type: "confirm",
+      name: "usePreset",
+      message: chalk.cyan("🎯 是否使用推荐预设？"),
+      default: true,
     });
-    printInfo(
-      `架构类型：${chalk.bold(
-        architectureType === "microFrontend" ? "微前端架构" : "独立应用"
-      )}`
-    );
-
-    let projectTemplate;
-    let toolType, appDirection;
-
-    if (architectureType === "microFrontend") {
-      // 微前端架构流程
-      // 3. 选择工具类型
-      const toolTypeResult = await inquirer.prompt({
+
+    let architectureType, toolType, appDirection;
+
+    if (usePreset) {
+      // 预设选择逻辑
+      const { preset } = await inquirer.prompt({
         type: "list",
-        name: "toolType",
-        message: chalk.cyan("🔧 请选择工具类型："),
+        name: "preset",
+        message: chalk.cyan("📋 请选择预设："),
         choices: [
           {
-            name: `${chalk.blue("📦 Webpack")} - 成熟稳定的打包工具`,
-            value: "webpack",
+            name: `${chalk.blue("🏠 Webpack 主应用")} - 企业级微前端主应用`,
+            value: {
+              architecture: "microFrontend",
+              tool: "webpack",
+              direction: "main",
+            },
+          },
+          {
+            name: `${chalk.green("🧩 Webpack 子应用")} - 业务子应用`,
+            value: {
+              architecture: "microFrontend",
+              tool: "webpack",
+              direction: "sub",
+            },
+          },
+          {
+            name: `${chalk.purple("⚡ Vite 主应用")} - 高性能微前端主应用`,
+            value: {
+              architecture: "microFrontend",
+              tool: "vite",
+              direction: "main",
+            },
+          },
+          {
+            name: `${chalk.yellow("📱 Next.js 应用")} - 全栈应用`,
+            value: { architecture: "standalone", framework: "nextjs" },
+          },
+          {
+            name: `${chalk.gray("⚙️  自定义配置")} - 手动选择所有选项`,
+            value: null,
           },
-          { name: `${chalk.green("⚡ Vite")} - 快速的构建工具`, value: "vite" },
         ],
       });
-      toolType = toolTypeResult.toolType;
-      printInfo(`工具类型：${chalk.bold(toolType)}`);
 
-      // 4. 选择应用方向
-      const appDirectionResult = await inquirer.prompt({
+      if (preset) {
+        architectureType = preset.architecture;
+        toolType = preset.tool;
+        appDirection = preset.direction;
+        printSuccess(`使用预设：${chalk.bold("快速配置")}`);
+      }
+    }
+
+    // 如果没有使用预设，或者选择了自定义配置，继续原有的选择流程
+    if (!usePreset || !preset) {
+      // 2. 选择架构类型
+      const { architectureType: selectedArchitecture } = await inquirer.prompt({
         type: "list",
-        name: "appDirection",
-        message: chalk.cyan("🎯 请选择应用方向："),
+        name: "architectureType",
+        message: chalk.cyan("🏗️  请选择架构类型："),
         choices: [
           {
-            name: `${chalk.magenta("🏠 主应用")} - 微前端主应用`,
-            value: "main",
+            name: `${chalk.blue("🧩 微前端架构")} - 支持主应用和子应用`,
+            value: "microFrontend",
+          },
+          {
+            name: `${chalk.green("📱 独立应用")} - 单体应用架构`,
+            value: "standalone",
           },
-          { name: `${chalk.yellow("🧩 子应用")} - 微前端子应用`, value: "sub" },
         ],
       });
-      appDirection = appDirectionResult.appDirection;
+      architectureType = selectedArchitecture;
       printInfo(
-        `应用方向：${chalk.bold(appDirection === "main" ? "主应用" : "子应用")}`
+        `架构类型：${chalk.bold(
+          architectureType === "microFrontend" ? "微前端架构" : "独立应用"
+        )}`
       );
 
-      // 5. 选择模版
-      if (options.template) {
-        const foundTemplate = templates.microFrontend[toolType][
-          appDirection
-        ].find((template) => template.name === options.template);
-        if (foundTemplate) {
-          projectTemplate = foundTemplate.value;
-          printSuccess(`使用指定模版：${chalk.bold(options.template)}`);
-        } else {
-          printWarning(`未找到指定模版 "${options.template}"，请重新选择`);
-        }
-      }
+      let projectTemplate;
+
+      if (architectureType === "microFrontend") {
+        // 微前端架构流程
+        // 3. 选择工具类型
+        const toolTypeResult = await inquirer.prompt({
+          type: "list",
+          name: "toolType",
+          message: chalk.cyan("🔧 请选择工具类型："),
+          choices: [
+            {
+              name: `${chalk.blue("📦 Webpack")} - 成熟稳定的打包工具`,
+              value: "webpack",
+            },
+            {
+              name: `${chalk.green("⚡ Vite")} - 快速的构建工具`,
+              value: "vite",
+            },
+          ],
+        });
+        toolType = toolTypeResult.toolType;
+        printInfo(`工具类型：${chalk.bold(toolType)}`);
+
+        // 4. 选择应用方向
+        const appDirectionResult = await inquirer.prompt({
+          type: "list",
+          name: "appDirection",
+          message: chalk.cyan("🎯 请选择应用方向："),
+          choices: [
+            {
+              name: `${chalk.magenta("🏠 主应用")} - 微前端主应用`,
+              value: "main",
+            },
+            {
+              name: `${chalk.yellow("🧩 子应用")} - 微前端子应用`,
+              value: "sub",
+            },
+          ],
+        });
+        appDirection = appDirectionResult.appDirection;
+        printInfo(
+          `应用方向：${chalk.bold(
+            appDirection === "main" ? "主应用" : "子应用"
+          )}`
+        );
 
-      if (!projectTemplate) {
-        const availableTemplates =
-          templates.microFrontend[toolType][appDirection];
+        // 5. 选择模版
+        if (options.template) {
+          const foundTemplate = templates.microFrontend[toolType][
+            appDirection
+          ].find((template) => template.name === options.template);
+          if (foundTemplate) {
+            projectTemplate = foundTemplate.value;
+            printSuccess(`使用指定模版：${chalk.bold(options.template)}`);
+          } else {
+            printWarning(`未找到指定模版 "${options.template}"，请重新选择`);
+          }
+        }
 
-        // 如果只有一个模版，直接使用它
-        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;
+        if (!projectTemplate) {
+          const availableTemplates =
+            templates.microFrontend[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: [
+                  `${t.recommended ? chalk.green("⭐") : "  "} ${chalk.white(
+                    t.name
+                  )}`,
+                  `   ${chalk.gray(t.description)}`,
+                  `   ${chalk.blue(`特性: ${t.features.join(", ")}`)}`,
+                ].join("\n"),
+                value: t.value,
+                short: t.name,
+              })),
+              pageSize: 10,
+            });
+            projectTemplate = template;
+          }
+        }
+      } else {
+        // 独立应用架构流程
+        // 3. 选择框架类型
+        const { frameworkType } = await inquirer.prompt({
+          type: "list",
+          name: "frameworkType",
+          message: chalk.cyan("⚛️  请选择框架类型："),
+          default: "nextjs",
+          choices: [
+            {
+              name: `${chalk.black("▲")} ${chalk.white(
+                "Next.js"
+              )} - React 全栈框架`,
+              value: "nextjs",
+            },
+            // 可以在这里添加更多独立应用框架
+          ],
+        });
+        printInfo(`框架类型：${chalk.bold(frameworkType)}`);
+
+        // 4. 选择模版
+        if (options.template) {
+          const foundTemplate = templates.standalone[frameworkType].find(
+            (template) => template.name === options.template
+          );
+          if (foundTemplate) {
+            projectTemplate = foundTemplate.value;
+            printSuccess(`使用指定模版：${chalk.bold(options.template)}`);
+          } else {
+            printWarning(`未找到指定模版 "${options.template}"，请重新选择`);
+          }
         }
-      }
-    } else {
-      // 独立应用架构流程
-      // 3. 选择框架类型
-      const { frameworkType } = await inquirer.prompt({
-        type: "list",
-        name: "frameworkType",
-        message: chalk.cyan("⚛️  请选择框架类型："),
-        default: "nextjs",
-        choices: [
-          {
-            name: `${chalk.black("▲")} ${chalk.white(
-              "Next.js"
-            )} - React 全栈框架`,
-            value: "nextjs",
-          },
-          // 可以在这里添加更多独立应用框架
-        ],
-      });
-      printInfo(`框架类型：${chalk.bold(frameworkType)}`);
 
-      // 4. 选择模版
-      if (options.template) {
-        const foundTemplate = templates.standalone[frameworkType].find(
-          (template) => template.name === options.template
-        );
-        if (foundTemplate) {
-          projectTemplate = foundTemplate.value;
-          printSuccess(`使用指定模版：${chalk.bold(options.template)}`);
-        } else {
-          printWarning(`未找到指定模版 "${options.template}"，请重新选择`);
+        if (!projectTemplate) {
+          const availableTemplates = templates.standalone[frameworkType];
+
+          // 如果只有一个模版，直接使用它
+          if (availableTemplates.length === 1) {
+            projectTemplate = availableTemplates[0].value;
+            printInfo(`使用模版：${chalk.bold(availableTemplates[0].name)}`);
+          } 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;
+          }
         }
       }
 
-      if (!projectTemplate) {
-        const availableTemplates = templates.standalone[frameworkType];
+      console.log(); // 空行
 
-        // 如果只有一个模版，直接使用它
-        if (availableTemplates.length === 1) {
-          projectTemplate = availableTemplates[0].value;
-          printInfo(`使用模版：${chalk.bold(availableTemplates[0].name)}`);
+      // 获取目标文件夹路径
+      const dest = path.join(process.cwd(), projectName);
+      // 判断文件夹是否存在，存在就交互询问用户是否覆盖
+      if (fs.existsSync(dest)) {
+        printWarning(`目录 "${projectName}" 已存在！`);
+        const { force } = await inquirer.prompt({
+          type: "confirm",
+          name: "force",
+          message: chalk.yellow("⚠️  是否覆盖现有目录？"),
+          default: false,
+        });
+        if (force) {
+          fs.removeSync(dest);
+          printSuccess("已删除现有目录");
         } 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;
+          printInfo("操作已取消");
+          process.exit(1);
         }
       }
-    }
 
-    console.log(); // 空行
-
-    // 获取目标文件夹路径
-    const dest = path.join(process.cwd(), projectName);
-    // 判断文件夹是否存在，存在就交互询问用户是否覆盖
-    if (fs.existsSync(dest)) {
-      printWarning(`目录 "${projectName}" 已存在！`);
-      const { force } = await inquirer.prompt({
-        type: "confirm",
-        name: "force",
-        message: chalk.yellow("⚠️  是否覆盖现有目录？"),
-        default: false,
+      // 开始loading
+      const loading = ora({
+        text: "正在下载模版...",
+        spinner: "bouncingBar",
       });
-      if (force) {
-        fs.removeSync(dest);
-        printSuccess("已删除现有目录");
-      } else {
-        printInfo("操作已取消");
-        process.exit(1);
-      }
-    }
+      loading.start();
+
+      // 6. 开始下载模版
+      try {
+        const result = await cloneRepository(projectTemplate, dest);
+        loading.succeed();
+        printSuccess("模版下载成功！");
+
+        // 删除.git文件夹
+        const gitDir = path.join(dest, ".git");
+        if (fs.existsSync(gitDir)) {
+          fs.removeSync(gitDir);
+          printSuccess("已清理 .git 文件夹");
+        }
 
-    // 开始loading
-    const loading = ora({
-      text: "正在下载模版...",
-      spinner: "bouncingBar",
-    });
-    loading.start();
-
-    // 6. 开始下载模版
-    try {
-      const result = await cloneRepository(projectTemplate, dest);
-      loading.succeed();
-      printSuccess("模版下载成功！");
-
-      // 删除.git文件夹
-      const gitDir = path.join(dest, ".git");
-      if (fs.existsSync(gitDir)) {
-        fs.removeSync(gitDir);
-        printSuccess("已清理 .git 文件夹");
-      }
+        // 新添加：如果是 webpack 子应用，进行环境配置
+        if (
+          architectureType === "microFrontend" &&
+          toolType === "webpack" &&
+          appDirection === "sub"
+        ) {
+          console.log(); // 空行
+          await configureWebpackSubApp(dest, projectName);
+        }
 
-      // 新添加：如果是 webpack 子应用，进行环境配置
-      if (
-        architectureType === "microFrontend" &&
-        toolType === "webpack" &&
-        appDirection === "sub"
-      ) {
         console.log(); // 空行
-        await configureWebpackSubApp(dest, projectName);
+        printFinalInstructions(projectName);
+      } catch (error) {
+        loading.fail();
+        printError("模版下载失败：" + error);
+        process.exit(1);
       }
-
-      console.log(); // 空行
-      printFinalInstructions(projectName);
-    } catch (error) {
-      loading.fail();
-      printError("模版下载失败：" + error);
-      process.exit(1);
     }
   });
 
+// 在环境配置前添加说明
+console.log();
+console.log(
+  boxen(
+    [
+      chalk.blue.bold("🔧 环境配置"),
+      "",
+      chalk.gray("接下来将配置应用的基本信息："),
+      chalk.gray("• 应用名称 - 用于标识和显示"),
+      chalk.gray("• 构建配置 - 输出路径和公共路径"),
+      chalk.gray("• 监控配置 - Sentry 错误监控（可选）"),
+      "",
+      chalk.yellow("💡 提示：所有配置后续都可以在代码中修改"),
+    ].join("\n"),
+    {
+      padding: 1,
+      borderStyle: "round",
+      borderColor: "blue",
+    }
+  )
+);
+
 // 定义当前版本
 program.version(`v${pkgInfo.version}`);
 program.on("--help", () => {

package/dist/templates.js

@@ -13,12 +13,18 @@ var templates = {
         {
           value: "https://ywgit.gz4399.com/ywkf/webpack-mainApplicate_demo.git",
           name: "webpack-mainApplicate_demo",
+          description: "基于 Webpack 的微前端主应用模板",
+          features: ["qiankun", "react", "antd", "路由管理"],
+          recommended: true,
         },
       ],
       sub: [
         {
           value: "https://ywgit.gz4399.com/ywkf/webpack-subApplicate_demo.git",
           name: "webpack-subApplicate_demo",
+          description: "标准的微前端子应用模板",
+          features: ["react", "antd", "独立运行"],
+          recommended: true,
         },
       ],
     },
@@ -27,12 +33,18 @@ var templates = {
         {
           value: "https://ywgit.gz4399.com/ywkf/vite-mainApplicate_demo.git",
           name: "vite-mainApplicate_demo",
+          description: "基于 Vite 的微前端主应用模板",
+          features: ["qiankun", "react", "antd", "路由管理"],
+          recommended: true,
         },
       ],
       sub: [
         {
           value: "https://ywgit.gz4399.com/ywkf/vite-subApplicate_demo.git",
           name: "vite-subApplicate_demo",
+          description: "标准的微前端子应用模板",
+          features: ["react", "antd", "独立运行"],
+          recommended: true,
         },
       ],
     },
@@ -42,6 +54,9 @@ var templates = {
       {
         value: "https://ywgit.gz4399.com/ywkf/next-dome.git",
         name: "next-demo",
+        description: "基于 Next.js 的全栈应用模板",
+        features: ["react", "antd", "next", "路由管理"],
+        recommended: true,
       },
     ],
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4399ywkf/cli",
-  "version": "0.0.15",
+  "version": "0.0.18",
   "description": "运维开发部脚手架",
   "main": "dist/index.js",
   "bin": {