@4399ywkf/cli 0.0.7 → 0.0.10

package/README.md

@@ -1,28 +1,180 @@
-# 学习搭建cli脚手架
+# YWKF CLI
 
-## 安装
+🚀 运维开发部脚手架工具 - 快速创建现代化前端项目
+
+## ✨ 特性
+
+- 🏗️ **多架构支持** - 微前端架构和独立应用架构
+- ⚡ **多种构建工具** - 支持 Webpack 和 Vite
+- 🎯 **智能模板选择** - 根据架构和工具类型智能推荐模板
+- 🛠️ **自动化配置** - Webpack 子应用自动配置环境变量
+- 🎨 **美观界面** - 彩色输出和进度指示器
+- 📦 **开箱即用** - 内置最佳实践和常用配置
+
+## 📦 安装
+
+### 全局安装（推荐）
 
-### 全局安装
 ```bash
 pnpm install -g @4399ywkf/cli
 ```
 
-### 使用
-创建模版
+### 使用 npx（无需安装）
+
+```bash
+npx @4399ywkf/cli create <项目名称>
+```
+
+## 🎯 使用方法
+
+### 基本用法
+
+```bash
+# 交互式创建项目
+ywkf-cli create my-project
+
+# 指定模板创建项目
+ywkf-cli create my-project -t webpack-mainApplicate_demo
+```
+
+### 命令参数
+
+```bash
+ywkf-cli create [项目名称] [选项]
+```
+
+**选项：**
+
+- `-t, --template <模板名称>` - 指定要使用的模板
+- `-h, --help` - 显示帮助信息
+- `-V, --version` - 显示版本号
+
+## 🏗️ 支持的架构
+
+### 微前端架构
+
+适用于大型应用的微前端解决方案，支持主应用和子应用：
+
+#### Webpack 模板
+
+- **主应用**: `webpack-mainApplicate_demo` - 微前端主应用模板
+- **子应用**: `webpack-subApplicate_demo` - 微前端子应用模板
+
+#### Vite 模板
+
+- **主应用**: `vite-mainApplicate_demo` - 基于 Vite 的微前端主应用
+- **子应用**: `vite-subApplicate_demo` - 基于 Vite 的微前端子应用
+
+### 独立应用架构
+
+适用于中小型项目的单体应用：
+
+#### Next.js 模板
+
+- **Next.js**: `next-demo` - React 全栈框架模板
+
+## 📋 使用示例
+
+### 创建微前端主应用
+
+```bash
+# 使用 Webpack
+ywkf-cli create main-app -t webpack-mainApplicate_demo
+
+# 使用 Vite
+ywkf-cli create main-app -t vite-mainApplicate_demo
+```
+
+### 创建微前端子应用
+
 ```bash
-@4399ywkf/cli create <name> [-t|--template]
+# 使用 Webpack
+ywkf-cli create sub-app -t webpack-subApplicate_demo
+
+# 使用 Vite
+ywkf-cli create sub-app -t vite-subApplicate_demo
 ```
-示例
+
+### 创建独立应用
+
 ```bash
-@4399ywkf/cli create hello-cli -t dumi2-demo
+# Next.js 应用
+ywkf-cli create my-nextjs-app -t next-demo
 ```
 
-### 不全局安装，借助npx
-创建模版
+## ⚙️ 特殊功能
+
+### Webpack 子应用自动配置
+
+当创建 Webpack 子应用时，CLI 会自动帮你配置环境变量：
+
+- **应用代码名称** (APP_NAME) - 应用的唯一标识符
+- **应用名称** (APP_CNAME) - 应用的显示名称
+- **Sentry 配置** - 错误监控配置
+- **构建配置** - 输出路径和公共路径
+
+### 交互式选择流程
+
+1. 🏗️ **选择架构类型** - 微前端 or 独立应用
+2. 🔧 **选择构建工具** - Webpack or Vite
+3. 🎯 **选择应用类型** - 主应用 or 子应用
+4. 📋 **选择模板** - 根据前面的选择显示可用模板
+5. ⚙️ **配置环境** - 自动配置应用参数
+
+## 🚀 快速开始
+
+创建项目后，按照以下步骤启动开发：
+
 ```bash
-npx @4399ywkf/cli create <name> [-t|--template]
+# 1. 进入项目目录
+cd your-project-name
+
+# 2. 切换到推荐的 Node.js 版本
+nvm use
+
+# 3. 安装依赖
+pnpm install
+
+# 4. 启动开发服务器
+pnpm start
 ```
-示例
+
+## 🛠️ 开发调试
+
+对于 CLI 工具的开发和调试，可以使用以下命令：
+
 ```bash
-npx @4399ywkf/cli create hello-cli -template dumi2-demo
+# 开发模式运行
+pnpm dev
+
+# 调试模式
+pnpm debug
+
+# 调试创建命令
+pnpm debug:create
+
+# 调试帮助命令
+pnpm debug:help
 ```
+
+## 📝 版本信息
+
+当前版本: `v0.0.8`
+
+查看版本信息：
+
+```bash
+ywkf-cli --version
+```
+
+## 🤝 贡献
+
+欢迎提交 Issue 和 Pull Request 来帮助改进这个工具！
+
+## 📄 许可证
+
+ISC License
+
+---
+
+🎉 **开始你的开发之旅吧！**

package/{bin → dist}/api.js

@@ -1,5 +1,13 @@
+'use strict';
+
+var require$$0 = require('https');
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
 // bin/api.js
-const https = require('https')
+const https = require$$0;
 
 /** 获取用户git仓库列表信息 */
 function getGitReposList(username) {
@@ -9,24 +17,28 @@ function getGitReposList(username) {
         'User-Agent': username
       }
     }, (res) => {
-      let data = ''
+      let data = '';
       res.on('data', (chunk) => {
-        data += chunk.toString()
-      })
+        data += chunk.toString();
+      });
       res.on('end', () => {
-        const list = JSON.parse(data)
+        const list = JSON.parse(data);
         resolve(list.map(item => ({ // 组合成模版所需要的name，value结构
           name: item.name,
           value: `https://github.com:${username}/${item.name}`
-        })))
-      })
+        })));
+      });
       res.on('error', (err) => {
-        reject(err)
-      })
-    }).end()
+        reject(err);
+      });
+    }).end();
   })
 }
 
-module.exports = {
+var api = {
   getGitReposList
-}
+};
+
+var api$1 = /*@__PURE__*/getDefaultExportFromCjs(api);
+
+module.exports = api$1;

package/{bin → dist}/cli.js

@@ -1,19 +1,34 @@
 #!/usr/bin/env node
-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");
+#!/usr/bin/env node
+'use strict';
+
+var require$$0 = require('commander');
+var require$$1 = require('inquirer');
+var require$$2 = require('path');
+var require$$3 = require('ora');
+var require$$4 = require('fs-extra');
+var require$$5 = require('child_process');
+var require$$7 = require('chalk');
+var require$$8 = require('boxen');
+var require$$9 = require('figlet');
+require('https');
+
+var cli = {};
+
+const program = require$$0;
+const inquirer = require$$1;
+const path = require$$2;
+const ora = require$$3;
+const fs = require$$4;
+const { exec } = require$$5;
 
 // 美化输出相关
-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 chalk = require$$7;
+const boxen = require$$8;
+const figlet = require$$9;
+const pkgInfo = {
+  version: "0.0.10",
+};
 
 // 美化输出函数
 function printBanner() {
@@ -26,7 +41,7 @@ function printBanner() {
       })
     )
   );
-  console.log(chalk.gray(`版本: ${package.version}\n`));
+  console.log(chalk.gray(`版本: ${pkgInfo.version}\n`));
 }
 
 function printSuccess(message) {
@@ -75,10 +90,24 @@ function printFinalInstructions(projectName) {
 
 function cloneRepository(repoUrl, destination) {
   return new Promise((resolve, reject) => {
-    const command = `git clone ${repoUrl} ${destination}`;
-    exec(command, (error, stdout, stderr) => {
+    // 确保URL格式正确，移除可能的末尾斜杠
+    const cleanUrl = repoUrl.replace(/\/$/, "");
+    const command = `git clone ${cleanUrl} ${destination}`;
+
+    // 设置子进程选项
+    const options = {
+      cwd: process.cwd(),
+      env: process.env,
+      stdio: "pipe",
+    };
+
+    exec(command, options, (error, stdout, stderr) => {
       if (error) {
-        reject(`Error cloning repository: ${stderr}`);
+        console.error(`命令执行失败: ${command}`);
+        console.error(`错误代码: ${error.code}`);
+        console.error(`错误信息: ${error.message}`);
+        console.error(`stderr: ${stderr}`);
+        reject(`Error cloning repository: ${stderr || error.message}`);
       } else {
         resolve(`Repository cloned successfully: ${stdout}`);
       }
@@ -243,38 +272,7 @@ program
     getRepoLoading.start();
 
     // 模拟异步获取模版数据
-    const templates = {
-      webpack: {
-        main: [
-          {
-            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",
-          },
-        ],
-      },
-      vite: {
-        main: [
-          {
-            value: "https://ywgit.gz4399.com/ywkf/vite-mainApplicate_demo.git",
-            name: "vite-mainApplicate_demo",
-          },
-        ],
-        sub: [
-          {
-            value: "https://ywgit.gz4399.com/ywkf/vite-subApplicate_demo",
-            name: "vite-subApplicate_demo",
-          },
-        ],
-      },
-    };
+    const templates = templates;
 
     getRepoLoading.succeed();
     printSuccess("模版列表获取成功！");
@@ -297,68 +295,154 @@ program
     }
     printInfo(`项目名称：${chalk.bold(projectName)}`);
 
-    // 2. 选择工具类型
-    const { toolType } = await inquirer.prompt({
+    // 2. 选择架构类型
+    const { architectureType } = await inquirer.prompt({
       type: "list",
-      name: "toolType",
-      message: chalk.cyan("🔧 请选择工具类型："),
+      name: "architectureType",
+      message: chalk.cyan("🏗️  请选择架构类型："),
       choices: [
         {
-          name: `${chalk.blue("📦 Webpack")} - 成熟稳定的打包工具`,
-          value: "webpack",
+          name: `${chalk.blue("🧩 微前端架构")} - 支持主应用和子应用`,
+          value: "microFrontend",
+        },
+        {
+          name: `${chalk.green("📱 独立应用")} - 单体应用架构`,
+          value: "standalone",
         },
-        { name: `${chalk.green("⚡ Vite")} - 快速的构建工具`, value: "vite" },
-      ],
-    });
-    printInfo(`工具类型：${chalk.bold(toolType)}`);
-
-    // 3. 选择应用方向
-    const { appDirection } = await inquirer.prompt({
-      type: "list",
-      name: "appDirection",
-      message: chalk.cyan("🎯 请选择应用方向："),
-      choices: [
-        { name: `${chalk.magenta("🏠 主应用")} - 微前端主应用`, value: "main" },
-        { name: `${chalk.yellow("🧩 子应用")} - 微前端子应用`, value: "sub" },
       ],
     });
     printInfo(
-      `应用方向：${chalk.bold(appDirection === "main" ? "主应用" : "子应用")}`
+      `架构类型：${chalk.bold(
+        architectureType === "microFrontend" ? "微前端架构" : "独立应用"
+      )}`
     );
 
-    // 4. 选择模版
     let projectTemplate;
-
-    if (options.template) {
-      const foundTemplate = templates[toolType][appDirection].find(
-        (template) => template.name === options.template
+    let toolType, appDirection;
+
+    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 (foundTemplate) {
-        projectTemplate = foundTemplate.value;
-        printSuccess(`使用指定模版：${chalk.bold(options.template)}`);
-      } else {
-        printWarning(`未找到指定模版 "${options.template}"，请重新选择`);
+
+      // 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 (!projectTemplate) {
-      const availableTemplates = templates[toolType][appDirection];
+      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: `${chalk.white(t.name)}`,
+              value: t.value,
+            })),
+          });
+          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}"，请重新选择`);
+        }
+      }
 
-      // 如果只有一个模版，直接使用它
-      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.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;
+        }
       }
     }
 
@@ -391,7 +475,7 @@ program
     });
     loading.start();
 
-    // 5. 开始下载模版
+    // 6. 开始下载模版
     try {
       const result = await cloneRepository(projectTemplate, dest);
       loading.succeed();
@@ -405,7 +489,11 @@ program
       }
 
       // 新添加：如果是 webpack 子应用，进行环境配置
-      if (toolType === "webpack" && appDirection === "sub") {
+      if (
+        architectureType === "microFrontend" &&
+        toolType === "webpack" &&
+        appDirection === "sub"
+      ) {
         console.log(); // 空行
         await configureWebpackSubApp(dest, projectName);
       }
@@ -420,7 +508,7 @@ program
   });
 
 // 定义当前版本
-program.version(`v${package.version}`);
+program.version(`v${pkgInfo.version}`);
 program.on("--help", () => {
   printBanner();
   console.log(chalk.gray("使用示例："));
@@ -434,3 +522,5 @@ program.on("--help", () => {
 });
 
 program.parse(process.argv);
+
+module.exports = cli;

package/dist/index.js

@@ -0,0 +1 @@
+module.exports = require('./cli.js');

package/dist/templates.js

@@ -0,0 +1,52 @@
+'use strict';
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+/** 暴露模版代码 */
+
+var templates = {
+  microFrontend: {
+    webpack: {
+      main: [
+        {
+          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",
+        },
+      ],
+    },
+    vite: {
+      main: [
+        {
+          value: "https://ywgit.gz4399.com/ywkf/vite-mainApplicate_demo.git",
+          name: "vite-mainApplicate_demo",
+        },
+      ],
+      sub: [
+        {
+          value: "https://ywgit.gz4399.com/ywkf/vite-subApplicate_demo.git",
+          name: "vite-subApplicate_demo",
+        },
+      ],
+    },
+  },
+  standalone: {
+    nextjs: [
+      {
+        value: "https://ywgit.gz4399.com/ywkf/next-dome.git",
+        name: "next-demo",
+      },
+    ],
+  },
+};
+
+var templates$1 = /*@__PURE__*/getDefaultExportFromCjs(templates);
+
+module.exports = templates$1;

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@4399ywkf/cli",
-  "version": "0.0.7",
+  "version": "0.0.10",
   "description": "运维开发部脚手架",
-  "main": "index.js",
+  "type": "module",
+  "main": "dist/index.js",
   "bin": {
-    "ywkf-cli": "./bin/cli.js"
+    "ywkf-cli": "./dist/cli.js"
   },
   "publishConfig": {
     "access": "public"
@@ -16,18 +17,27 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@changesets/cli": "^2.29.5",
+    "boxen": "^5.1.2",
+    "chalk": "^4.1.2",
     "child_process": "^1.0.2",
     "commander": "^10.0.1",
     "download-git-repo": "^3.0.2",
+    "figlet": "^1.5.2",
     "fs-extra": "^11.1.1",
     "inquirer": "^8.2.5",
-    "ora": "^5.4.1",
-    "chalk": "^4.1.2",
-    "boxen": "^5.1.2",
-    "figlet": "^1.5.2"
+    "ora": "^5.4.1"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.8",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.3.1",
+    "@rollup/plugin-replace": "^5.0.7",
+    "rollup": "^4.46.3",
+    "rollup-plugin-copy": "^3.5.0"
   },
   "files": [
-    "bin"
+    "dist"
   ],
   "authors": [
     "ywjszx@4399.com"
@@ -39,7 +49,13 @@
     "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",
+    "build": "rollup -c && node scripts/postbuild.js",
+    "build:watch": "rollup -c -w",
     "link": "npm link",
-    "unlink": "npm unlink -g"
+    "unlink": "npm unlink -g",
+    "changeset": "changeset",
+    "changeset:version": "changeset version",
+    "changeset:publish": "changeset publish",
+    "release": "pnpm build && pnpm changeset && pnpm changeset:version && pnpm changeset:publish"
   }
 }

package/bin/templates.js

@@ -1,15 +0,0 @@
-/** 暴露模版代码 */
-module.exports = [
-  {
-    name: 'webpack5-react-ts',
-    value: 'https://github.com:guojiongwei/webpack5-react-ts'
-  },
-  {
-    name: 'react18-vite2-ts',
-    value: 'https://github.com:guojiongwei/react18-vite2-ts'
-  },
-  {
-    name: 'dumi2-demo',
-    value: 'https://github.com:guojiongwei/dumi2-demo'
-  }
-]