@ljjjjjjj/my-cli 1.1.0 → 1.1.1

package/README.md

@@ -1,3 +1,198 @@
-# Button
-
-Button 组件说明。
+# my-cli
+
+一个基于 Node.js 的前端脚手架工具，帮助你快速生成 Vite 项目模板，并在已有项目中生成组件和页面骨架。
+
+## 功能特点
+
+- 支持创建 Vue3 + Vite 或 React + Vite 项目模板
+- 支持在当前项目中生成组件代码
+- 支持在当前项目中生成页面代码
+- 会自动识别项目是 Vue 还是 React
+- 支持通过配置文件自定义生成目录
+- 支持使用 --force 覆盖已存在文件
+
+## 支持的模板
+
+- Vue3 + Vite
+- React + Vite
+
+## 安装方式
+
+### 方式一：作为公开包使用（推荐给他人）
+
+```bash
+npm install -g @ljjjjjjj/my-cli
+```
+
+安装后可以直接使用：
+
+```bash
+my-cli --help
+```
+
+### 方式二：本地开发调试使用
+
+```bash
+npm install
+npm link
+```
+
+然后就可以在当前环境中直接执行：
+
+```bash
+my-cli create your-project-name
+```
+
+## 命令说明
+
+### 0. 查看帮助
+
+```bash
+my-cli help
+```
+
+或：
+
+```bash
+my-cli --help
+```
+
+会看到当前支持的命令：
+
+```bash
+my-cli create <项目名称>
+my-cli add component <组件名称> [--force]
+my-cli add page <页面名称> [--force]
+my-cli help
+```
+
+### 1. 创建项目
+
+```bash
+my-cli create your-project-name
+```
+
+执行后会提示你：
+
+- 选择项目模板
+- 输入项目描述
+
+创建成功后，会生成一个新的 Vite 项目目录。
+
+### 2. 生成组件
+
+在当前项目中执行：
+
+```bash
+my-cli add component Button
+```
+
+脚手架会先从当前目录向上查找 package.json，定位项目根目录；随后根据项目类型自动选择对应模板。
+
+默认生成位置：
+
+- Vue 项目：src/components/Button/
+- React 项目：src/components/Button/
+
+默认生成内容：
+
+Vue 项目：
+
+```text
+src/components/Button/
+├── Button.vue
+├── Button.module.scss
+├── index.ts
+├── README.md
+└── Button.test.ts
+```
+
+React 项目：
+
+```text
+src/components/Button/
+├── Button.jsx
+├── Button.module.css
+├── index.js
+├── README.md
+└── Button.test.jsx
+```
+
+### 3. 生成页面
+
+```bash
+my-cli add page User
+```
+
+默认生成位置：
+
+- Vue 项目：src/pages/User/
+- React 项目：src/pages/User/
+
+默认生成内容：
+
+```text
+src/pages/User/
+├── index.vue
+├── style.scss
+├── api.ts
+├── hooks.ts
+├── store.ts
+└── types.ts
+```
+
+React 项目则会生成对应的 jsx 和 css 文件。
+
+### 4. 覆盖已存在文件
+
+如果目标文件已存在，默认会询问是否覆盖；如果你想直接覆盖，可以使用：
+
+```bash
+my-cli add component Button --force
+```
+
+或简写：
+
+```bash
+my-cli add page User -f
+```
+
+## 配置说明
+
+脚手架会先从当前目录向上查找 package.json，定位项目根目录。
+
+你可以在项目根目录创建 .my-cli.json 来指定生成目录和框架：
+
+```json
+{
+  "framework": "vue",
+  "componentsDir": "src/components",
+  "pagesDir": "src/pages"
+}
+```
+
+也可以在 package.json 中配置：
+
+```json
+{
+  "myCli": {
+    "framework": "react",
+    "componentsDir": "src/components",
+    "pagesDir": "src/pages"
+  }
+}
+```
+
+如果没有配置，脚手架会自动根据 package.json 或项目文件结构进行检测。
+
+## 适用场景
+
+这个脚手架适合用于：
+
+- 快速初始化前端项目
+- 在已有项目中快速生成组件和页面
+- 作为学习和练习 CLI 工具的示例项目
+
+## 说明
+
+如果你希望把这个脚手架给他人使用，请直接使用发布到 npm 的包名进行安装。

package/bin/index.js

@@ -5,11 +5,15 @@ import fs from 'fs-extra';
 import ora from 'ora';
 import inquirer from 'inquirer';
 import { fileURLToPath } from 'url';
+import { program } from 'commander';   // ← 关键新增
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-// ---------- 模板映射（不变） ----------
+// ---------- 读取 package.json ----------
+const pkg = await fs.readJson(path.join(__dirname, '../package.json'));
+
+// ---------- 模板映射 ----------
 const TEMPLATE_MAP = {
     'Vue3 + Vite': path.resolve(__dirname, '../templates/vue3-vite'),
     'React + Vite': path.resolve(__dirname, '../templates/react-vite')
@@ -27,14 +31,6 @@ function renderTemplate(templatePath, replacements) {
     return template.replace(/\{\{(\w+)\}\}/g, (_, key) => replacements[key] ?? '');
 }
 
-function printHelp() {
-    console.log(`使用方法：
-  my-cli create <项目名称>
-  my-cli add component <组件名称> [--force]
-  my-cli add page <页面名称> [--force]
-  my-cli help`);
-}
-
 // ---------- 查找项目根目录 ----------
 function findProjectRoot(startDir = process.cwd()) {
     let current = startDir;
@@ -45,29 +41,27 @@ function findProjectRoot(startDir = process.cwd()) {
         }
         current = path.dirname(current);
     }
-    return startDir; // 未找到则返回当前目录
+    return startDir;
 }
 
 // ---------- 加载项目配置 ----------
 function loadProjectConfig(projectRoot) {
     const config = {
-        framework: null,      // 'vue' | 'react' | null
+        framework: null,
         componentsDir: 'src/components',
         pagesDir: 'src/pages'
     };
 
-    // 1. 读取 .my-cli.json
     const cliConfigPath = path.join(projectRoot, '.my-cli.json');
     if (fs.existsSync(cliConfigPath)) {
         try {
             const userConfig = fs.readJsonSync(cliConfigPath);
             Object.assign(config, userConfig);
-        } catch (err) {
+        } catch {
             console.warn('⚠️  解析 .my-cli.json 失败，使用默认配置');
         }
     }
 
-    // 2. 读取 package.json 中的 myCli 字段
     const pkgPath = path.join(projectRoot, 'package.json');
     if (fs.existsSync(pkgPath)) {
         try {
@@ -75,21 +69,16 @@ function loadProjectConfig(projectRoot) {
             if (pkg.myCli) {
                 Object.assign(config, pkg.myCli);
             }
-        } catch (err) {
-            // ignore
-        }
+        } catch { }
     }
 
-    // 确保路径使用相对路径（相对于项目根）
     config.componentsDir = config.componentsDir.replace(/^\.?\//, '');
     config.pagesDir = config.pagesDir.replace(/^\.?\//, '');
-
     return config;
 }
 
-// ---------- 检测项目类型（增强版） ----------
+// ---------- 检测项目类型 ----------
 function detectProjectType(projectRoot, config) {
-    // 优先使用配置文件指定的框架
     if (config.framework) {
         if (config.framework === 'react' || config.framework === 'vue') {
             return config.framework;
@@ -97,7 +86,6 @@ function detectProjectType(projectRoot, config) {
         console.warn(`⚠️  未知框架 "${config.framework}"，将自动检测`);
     }
 
-    // 自动检测
     const pkgPath = path.join(projectRoot, 'package.json');
     if (fs.existsSync(pkgPath)) {
         try {
@@ -106,37 +94,23 @@ function detectProjectType(projectRoot, config) {
                 ...(pkg.dependencies || {}),
                 ...(pkg.devDependencies || {})
             };
-            if (deps.react || deps['@vitejs/plugin-react'] || deps.preact) {
-                return 'react';
-            }
-            if (deps.vue || deps['@vitejs/plugin-vue']) {
-                return 'vue';
-            }
-        } catch (err) {
-            // ignore
-        }
+            if (deps.react || deps['@vitejs/plugin-react'] || deps.preact) return 'react';
+            if (deps.vue || deps['@vitejs/plugin-vue']) return 'vue';
+        } catch { }
     }
 
-    // 通过文件存在性检测
     const srcPath = path.join(projectRoot, 'src');
     if (fs.existsSync(srcPath)) {
         const files = fs.readdirSync(srcPath);
-        if (files.some(f => f.endsWith('.jsx') || f.endsWith('.tsx'))) {
-            return 'react';
-        }
-        if (files.some(f => f.endsWith('.vue'))) {
-            return 'vue';
-        }
+        if (files.some(f => f.endsWith('.jsx') || f.endsWith('.tsx'))) return 'react';
+        if (files.some(f => f.endsWith('.vue'))) return 'vue';
     }
-
-    // 默认返回 vue（兼容旧逻辑）
     return 'vue';
 }
 
 // ---------- 获取脚手架配置 ----------
 function getScaffoldConfig(projectRoot, projectType) {
     const templateRoot = path.resolve(__dirname, '../templates/generator');
-
     if (projectType === 'react') {
         return {
             projectType,
@@ -154,10 +128,9 @@ function getScaffoldConfig(projectRoot, projectType) {
                 { name: 'types.ts', templatePath: path.join(templateRoot, 'page/react/types.ts.tpl') }
             ],
             testTemplate: (componentName) =>
-                `import { describe, it, expect } from 'vitest';\n\n\ndescribe('${componentName}', () => {\n  it('renders correctly', () => {\n    expect(true).toBe(true);\n  });\n});\n`
+                `import { describe, it, expect } from 'vitest';\n\ndescribe('${componentName}', () => {\n  it('renders correctly', () => {\n    expect(true).toBe(true);\n  });\n});\n`
         };
     }
-
     // vue
     return {
         projectType: 'vue',
@@ -175,11 +148,11 @@ function getScaffoldConfig(projectRoot, projectType) {
             { name: 'types.ts', templatePath: path.join(templateRoot, 'page/vue/types.ts.tpl') }
         ],
         testTemplate: (componentName) =>
-            `import { describe, it, expect } from 'vitest';\n\n\ndescribe('${componentName}', () => {\n  it('renders correctly', () => {\n    expect(true).toBe(true);\n  });\n});\n`
+            `import { describe, it, expect } from 'vitest';\n\ndescribe('${componentName}', () => {\n  it('renders correctly', () => {\n    expect(true).toBe(true);\n  });\n});\n`
     };
 }
 
-// ---------- 辅助：安全写入文件（带覆盖确认） ----------
+// ---------- 安全写入文件 ----------
 async function safeWriteFile(filePath, content, force = false) {
     if (fs.existsSync(filePath) && !force) {
         const { overwrite } = await inquirer.prompt([
@@ -190,12 +163,10 @@ async function safeWriteFile(filePath, content, force = false) {
                 default: false
             }
         ]);
-        if (!overwrite) {
-            return false; // 跳过
-        }
+        if (!overwrite) return false;
     }
     await fs.outputFile(filePath, content);
-    return true; // 写入成功
+    return true;
 }
 
 // ---------- 生成组件 ----------
@@ -205,7 +176,6 @@ async function generateComponentFiles(name, projectRoot, config, force) {
     await fs.ensureDir(baseDir);
 
     const scaffoldConfig = getScaffoldConfig(projectRoot, config.framework || detectProjectType(projectRoot, config));
-
     const replacements = {
         componentName,
         componentNameLower: componentName.toLowerCase()
@@ -234,18 +204,11 @@ async function generateComponentFiles(name, projectRoot, config, force) {
         }
     ];
 
-    let overwrittenCount = 0;
-    let skippedCount = 0;
-
+    let overwrittenCount = 0, skippedCount = 0;
     for (const file of filesToGenerate) {
         const result = await safeWriteFile(file.path, file.content, force);
-        if (result) {
-            overwrittenCount++;
-        } else {
-            skippedCount++;
-        }
+        result ? overwrittenCount++ : skippedCount++;
     }
-
     return { overwrittenCount, skippedCount, baseDir };
 }
 
@@ -256,7 +219,6 @@ async function generatePageFiles(name, projectRoot, config, force) {
     await fs.ensureDir(baseDir);
 
     const scaffoldConfig = getScaffoldConfig(projectRoot, config.framework || detectProjectType(projectRoot, config));
-
     const replacements = {
         pageName,
         pageNameLower: pageName.toLowerCase()
@@ -272,8 +234,6 @@ async function generatePageFiles(name, projectRoot, config, force) {
             content: renderTemplate(scaffoldConfig.pageStyleTemplatePath, replacements)
         }
     ];
-
-    // 添加额外的页面文件（api.ts, hooks.ts 等）
     for (const pageFile of scaffoldConfig.pageFiles) {
         filesToGenerate.push({
             path: path.join(baseDir, pageFile.name),
@@ -281,123 +241,110 @@ async function generatePageFiles(name, projectRoot, config, force) {
         });
     }
 
-    let overwrittenCount = 0;
-    let skippedCount = 0;
-
+    let overwrittenCount = 0, skippedCount = 0;
     for (const file of filesToGenerate) {
         const result = await safeWriteFile(file.path, file.content, force);
-        if (result) {
-            overwrittenCount++;
-        } else {
-            skippedCount++;
-        }
+        result ? overwrittenCount++ : skippedCount++;
     }
-
     return { overwrittenCount, skippedCount, baseDir };
 }
 
-// ---------- 主函数 ----------
-(async function run() {
-    const args = process.argv.slice(2);
-    let command = args[0];
-    let rest = args.slice(1);
-
-    // 解析 --force / -f
-    let force = false;
-    const filteredArgs = [];
-    for (const arg of rest) {
-        if (arg === '--force' || arg === '-f') {
-            force = true;
-        } else {
-            filteredArgs.push(arg);
-        }
-    }
-    rest = filteredArgs;
-
-    if (!command || command === 'help' || command === '--help' || command === '-h') {
-        printHelp();
-        process.exit(0);
-    }
+// ---------- Commander 配置 ----------
+program
+    .version(pkg.version, '-V, --version', '显示版本号')
+    .description('一个快速生成 Vue3/React + Vite 项目的脚手架工具');
+
+// ---------- create 命令 ----------
+program
+    .command('create <project-name>')
+    .description('创建一个新项目')
+    .option('-t, --template <name>', '指定模板名称（Vue3 + Vite / React + Vite）')
+    .option('-d, --description <desc>', '项目描述')
+    .action(async (projectName, options) => {
+        console.log(`✨ 正在创建项目: ${projectName}`);
 
-    if (command === 'create') {
-        const projectName = rest[0];
-        if (!projectName) {
-            printHelp();
-            process.exit(0);
+        let templateKey = options.template;
+        let description = options.description;
+
+        if (!templateKey) {
+            const answer = await inquirer.prompt([
+                {
+                    type: 'select',
+                    name: 'templateKey',
+                    message: '请选择项目模板:',
+                    choices: Object.keys(TEMPLATE_MAP)
+                }
+            ]);
+            templateKey = answer.templateKey;
+        } else if (!Object.keys(TEMPLATE_MAP).includes(templateKey)) {
+            console.error(`❌ 未知模板: ${templateKey}`);
+            console.log(`可用模板: ${Object.keys(TEMPLATE_MAP).join(', ')}`);
+            process.exit(1);
         }
 
-        console.log(`✨ 正在创建项目: ${projectName}`);
-
-        const answers = await inquirer.prompt([
-            {
-                type: 'select',
-                name: 'templateKey',
-                message: '请选择项目模板:',
-                choices: Object.keys(TEMPLATE_MAP)
-            },
-            {
-                type: 'input',
-                name: 'description',
-                message: '项目描述:',
-                default: 'A new project'
-            }
-        ]);
+        if (!description) {
+            const answer = await inquirer.prompt([
+                {
+                    type: 'input',
+                    name: 'description',
+                    message: '项目描述:',
+                    default: 'A new project'
+                }
+            ]);
+            description = answer.description;
+        }
 
         const targetPath = path.resolve(process.cwd(), projectName);
-        const sourceTemplatePath = TEMPLATE_MAP[answers.templateKey];
+        const sourceTemplatePath = TEMPLATE_MAP[templateKey];
 
         const spinner = ora('正在复制模板文件...').start();
         try {
             await fs.copy(sourceTemplatePath, targetPath);
-
             const pkgJsonPath = path.join(targetPath, 'package.json');
             const pkg = await fs.readJson(pkgJsonPath);
-            pkg.description = answers.description;
+            pkg.description = description;
             await fs.writeJson(pkgJsonPath, pkg, { spaces: 2 });
-
             spinner.succeed('✅ 项目创建成功！');
             console.log(`
 接下来执行命令：
-cd ${projectName}
-npm install
-npm run dev
+  cd ${projectName}
+  npm install
+  npm run dev
 `);
         } catch (err) {
             spinner.fail('❌ 创建项目失败');
             console.error(err);
         }
-        return;
-    }
-
-    if (command === 'add') {
-        const type = rest[0];
-        const name = rest[1];
-
-        if (!type || !name || !['component', 'page'].includes(type)) {
-            printHelp();
-            process.exit(0);
+    });
+
+// ---------- add 命令 ----------
+program
+    .command('add <type> <name>')
+    .description('添加组件或页面（type: component | page）')
+    .option('-f, --force', '强制覆盖已存在的文件')
+    .action(async (type, name, options) => {
+        if (!['component', 'page'].includes(type)) {
+            console.error('❌ 类型必须是 component 或 page');
+            process.exit(1);
         }
 
-        // 定位项目根目录
         const projectRoot = findProjectRoot(process.cwd());
         const projectConfig = loadProjectConfig(projectRoot);
-
-        // 确定框架类型（用于模板选择）
         const framework = projectConfig.framework || detectProjectType(projectRoot, projectConfig);
-        projectConfig.framework = framework; // 确保后续使用
+        projectConfig.framework = framework;
 
         const spinner = ora('正在生成业务代码...').start();
         try {
             let result;
             if (type === 'component') {
-                result = await generateComponentFiles(name, projectRoot, projectConfig, force);
+                result = await generateComponentFiles(name, projectRoot, projectConfig, options.force);
                 spinner.succeed(
                     `✅ 已生成组件文件: ${toPascalCase(name)}\n` +
                     `   位置: ${path.relative(projectRoot, result.baseDir)}\n` +
                     `   覆盖: ${result.overwrittenCount} 个文件，跳过: ${result.skippedCount} 个`
                 );
             } else {
-                result = await generatePageFiles(name, projectRoot, projectConfig, force);
+                result = await generatePageFiles(name, projectRoot, projectConfig, options.force);
                 spinner.succeed(
                     `✅ 已生成页面文件: ${toPascalCase(name)}\n` +
                     `   位置: ${path.relative(projectRoot, result.baseDir)}\n` +
@@ -408,9 +355,15 @@ npm run dev
             spinner.fail('❌ 生成业务代码失败');
             console.error(err);
         }
-        return;
-    }
+    });
+
+program.on('command:*', () => {
+    console.error('❌ 未知命令: %s', program.args.join(' '));
+    program.help();
+});
+
+program.parse(process.argv);
 
-    printHelp();
-    process.exit(0);
-})();
+if (!process.argv.slice(2).length) {
+    program.help();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ljjjjjjj/my-cli",
-    "version": "1.1.0",
+    "version": "1.1.1",
     "description": "vite脚手架，快速生成Vue3/React+vite项目模板",
     "main": "./bin/index.js",
     "scripts": {