@ysjdemo/umi-create-cli 0.0.2 → 0.0.4

package/README.md

@@ -2,26 +2,46 @@
 
 一个用于创建Umi4项目的脚手架工具
 
-## 安装
+## 使用方式（推荐npx）
 
 ```bash
-# 全局安装
-npm install -g @ysjdemo/umi-create-cli
+# 🔥 推荐：使用 npx 直接创建（无需安装）
+# 会自动提示选择模板，默认推荐 qiankun + antd + umi
+npx @ysjdemo/umi-create-cli create my-project
 
-# 或使用 yarn
-yarn global add @ysjdemo/umi-create-cli
+# 或直接指定模板
+npx @ysjdemo/umi-create-cli create my-project -t antd
+npx @ysjdemo/umi-create-cli create my-project -t basic
+npx @ysjdemo/umi-create-cli create my-project -t qiankun
+
+# 查看帮助
+npx @ysjdemo/umi-create-cli --help
 ```
 
-## 使用
+## 交互式模板选择
+
+当您运行创建命令时，会看到如下交互界面：
+
+```
+🚀 创建 Umi4 项目...
+📋 请选择项目模板:
+❯ 🎨 antd - Ant Design Pro 模板 (推荐)
+  📦 basic - 基础模板
+```
+
+## 安装方式（可选）
+
+如果需要频繁使用，可以选择全局安装：
 
 ```bash
-# 创建新项目
-ysj-umi create my-project
+# 全局安装
+npm install -g @ysjdemo/umi-create-cli
 
-# 查看帮助
-ysj-umi --help
+# 或使用 yarn
+yarn global add @ysjdemo/umi-create-cli
 
-# 查看版本
+# 安装后使用
+ysj-umi create my-project
 ysj-umi --version
 ```
 
@@ -31,19 +51,33 @@ ysj-umi --version
 - 📦 内置常用配置模板
 - 🎨 支持TypeScript
 - 📱 支持多种UI库选择
+- ⚡️ 支持npx直接使用，无需安装
+- 🎯 交互式模板选择，默认推荐最佳实践
 
 ## 模板选项
 
-- 基础模板：包含基本的Umi4配置
-- TypeScript模板：包含TypeScript配置
-- Ant Design模板：集成Ant Design组件库
-- 移动端模板：适配移动端开发
+- **🎨 Ant Design Pro 模板**（推荐）：企业级后台管理系统
+  ```bash
+  npx @ysjdemo/umi-create-cli create my-admin -t antd
+  ```
+  - 集成 Ant Design 5.0
+  - Pro Components 组件库
+  - 完整的后台管理界面
+  - 仪表盘、用户管理、设置页面
+
+- **📦 基础模板**：轻量级起始项目
+  ```bash
+  npx @ysjdemo/umi-create-cli create my-project -t basic
+  ```
+  - 基础 Umi 4 配置
+  - TypeScript 支持
+  - 简洁的项目结构
 
 ## 开发
 
 ```bash
 # 克隆项目
-git clone https://github.com/yourusername/ysj-cli.git
+git clone https://github.com/Ivan-YangSj/umi-cli.git
 
 # 安装依赖
 npm install

package/bin/cli.js

@@ -12,7 +12,7 @@ program
 program
   .command('create <project-name>')
   .description('创建一个新的 Umi4 项目')
-  .option('-t, --template <template>', '使用指定模板 (basic, antd)', 'basic')
+  .option('-t, --template <template>', '使用指定模板 (basic, antd, qiankun)')
   .action(async (projectName, options) => {
     try {
       await createProject(projectName, options);
@@ -26,7 +26,7 @@ program
 program
   .command('init')
   .description('在当前目录初始化 Umi4 项目')
-  .option('-t, --template <template>', '使用指定模板 (basic, antd)', 'basic')
+  .option('-t, --template <template>', '使用指定模板 (basic, antd, qiankun)')
   .action(async (options) => {
     try {
       await initProject(options);

package/lib/constants/index.js

@@ -0,0 +1,5 @@
+module.exports.TEMPLATES_TYPES = {
+  qiankun: 'qiankun',
+  antd: 'antd',
+  umi: 'umi',
+};

package/lib/create.js

@@ -1,146 +1,182 @@
-const fs = require('fs-extra');
-const path = require('path');
-const inquirer = require('inquirer');
-const chalk = require('chalk');
-const ora = require('ora');
-const { generateTemplate, getAvailableTemplates } = require('./templates');
+const fs = require("fs-extra");
+const path = require("path");
+const inquirer = require("inquirer");
+const chalk = require("chalk");
+const ora = require("ora");
+const { generateTemplate, getAvailableTemplates } = require("./templates");
+const { TEMPLATES_TYPES } = require("./constants");
+
+// 默认选择的模板
+const BASE_TEMPLATE = TEMPLATES_TYPES.qiankun;
+
+const templateChoices = [
+  {
+    name: `🏗️  ${TEMPLATES_TYPES.qiankun} + antd + umi - 微前端模板 ${chalk.cyan("(推荐)")}`,
+    value: TEMPLATES_TYPES.qiankun,
+    short: TEMPLATES_TYPES.qiankun,
+  },
+  {
+    name: `🎨 ${TEMPLATES_TYPES.antd} + umi - Ant Design Pro 模板`,
+    value: TEMPLATES_TYPES.antd,
+    short: TEMPLATES_TYPES.antd,
+  },
+  {
+    name: `📦 ${TEMPLATES_TYPES.umi} - 基础模板`,
+    value: TEMPLATES_TYPES.umi,
+    short: TEMPLATES_TYPES.umi,
+  },
+];
 
 async function createProject(projectName, options) {
-  const { template = 'basic' } = options;
-  
+  const { template } = options;
+
   console.log(`🚀 创建 Umi4 项目...`);
-  
+
   // 获取可用模板列表
   const availableTemplates = await getAvailableTemplates();
-  
-  // 如果指定的模板不存在，让用户选择
+
   let selectedTemplate = template;
-  if (!availableTemplates.includes(template)) {
-    console.log(chalk.yellow(`⚠️  模板 "${template}" 不存在`));
-    console.log(chalk.blue(`📋 可用模板: ${availableTemplates.join(', ')}`));
-    
+
+  // 如果没有指定模板，或者指定的模板不存在，让用户选择
+  if (!template || !availableTemplates.includes(template)) {
+    if (template && !availableTemplates.includes(template)) {
+      console.log(chalk.yellow(`⚠️  模板 "${template}" 不存在`));
+    }
+
+    console.log(chalk.blue(`📋 请选择项目模板:`));
+
     const { chosenTemplate } = await inquirer.prompt([
       {
-        type: 'list',
-        name: 'chosenTemplate',
-        message: '请选择要使用的模板:',
-        choices: availableTemplates.map(t => ({
-          name: t === 'basic' ? `${t} (基础模板)` : 
-                t === 'antd' ? `${t} (Ant Design Pro)` : t,
-          value: t
-        }))
-      }
+        type: "list",
+        name: "chosenTemplate",
+        message: "选择项目模板:",
+        choices: templateChoices,
+        default: BASE_TEMPLATE, // 默认选择qiankun
+      },
     ]);
     selectedTemplate = chosenTemplate;
   }
-  
+
+  console.log(chalk.cyan(`📋 使用模板: ${selectedTemplate}`));
+
   const targetDir = path.resolve(projectName);
-  
+
   // 检查目录是否已存在
   if (await fs.pathExists(targetDir)) {
     const { overwrite } = await inquirer.prompt([
       {
-        type: 'confirm',
-        name: 'overwrite',
+        type: "confirm",
+        name: "overwrite",
         message: `目录 ${projectName} 已存在，是否覆盖？`,
-        default: false
-      }
+        default: false,
+      },
     ]);
-    
+
     if (!overwrite) {
-      console.log(chalk.red('❌ 项目创建取消'));
+      console.log(chalk.red("❌ 项目创建取消"));
       return;
     }
-    
+
     await fs.remove(targetDir);
   }
-  
-  const spinner = ora('正在创建项目...').start();
-  
+
+  // 询问用户是否获取最新版本
+  const { useLatestVersions } = await inquirer.prompt([
+    {
+      type: 'confirm', 
+      name: 'useLatestVersions',
+      message: '是否获取依赖包的最新版本？(推荐)',
+      default: true, // 默认为true，用户按回车就是获取最新版本
+    },
+  ]);
+
+  const spinner = ora("正在创建项目...").start();
+
   try {
     // 生成项目文件
-    await generateTemplate(projectName, selectedTemplate, targetDir);
-    
-    spinner.succeed('项目文件生成完成');
-    
-    console.log(chalk.green('✅ 项目创建成功！'));
-    console.log('');
+    await generateTemplate(projectName, selectedTemplate, targetDir, useLatestVersions);
+
+    spinner.succeed("项目文件生成完成");
+
+    console.log(chalk.green("✅ 项目创建成功！"));
+    console.log("");
     console.log(chalk.cyan(`📁 进入项目目录: cd ${projectName}`));
-    console.log(chalk.cyan('📦 安装依赖: npm install 或 yarn'));
-    console.log(chalk.cyan('🚀 启动项目: npm start 或 yarn start'));
-    
+    console.log(chalk.cyan("📦 安装依赖: npm install 或 yarn"));
+    console.log(chalk.cyan("🚀 启动项目: npm start 或 yarn start"));
   } catch (error) {
-    spinner.fail('项目创建失败');
+    spinner.fail("项目创建失败");
     console.error(chalk.red(error.message));
     process.exit(1);
   }
 }
 
 async function initProject(options) {
-  const { template = 'basic' } = options;
+  const { template } = options;
   const projectName = path.basename(process.cwd());
-  
+
   console.log(`🚀 初始化 Umi4 项目...`);
-  
+
   // 获取可用模板列表
   const availableTemplates = await getAvailableTemplates();
-  
-  // 如果指定的模板不存在，让用户选择
+
   let selectedTemplate = template;
-  if (!availableTemplates.includes(template)) {
-    console.log(chalk.yellow(`⚠️  模板 "${template}" 不存在`));
-    console.log(chalk.blue(`📋 可用模板: ${availableTemplates.join(', ')}`));
-    
+
+  // 如果没有指定模板，或者指定的模板不存在，让用户选择
+  if (!template || !availableTemplates.includes(template)) {
+    if (template && !availableTemplates.includes(template)) {
+      console.log(chalk.yellow(`⚠️  模板 "${template}" 不存在`));
+    }
+
+    console.log(chalk.blue(`📋 请选择项目模板:`));
+
     const { chosenTemplate } = await inquirer.prompt([
       {
-        type: 'list',
-        name: 'chosenTemplate',
-        message: '请选择要使用的模板:',
-        choices: availableTemplates.map(t => ({
-          name: t === 'basic' ? `${t} (基础模板)` : 
-                t === 'antd' ? `${t} (Ant Design Pro)` : t,
-          value: t
-        }))
-      }
+        type: "list",
+        name: "chosenTemplate",
+        message: "选择项目模板:",
+        choices: templateChoices,
+        default: BASE_TEMPLATE, // 默认选择antd
+      },
     ]);
     selectedTemplate = chosenTemplate;
   }
-  
+
+  console.log(chalk.cyan(`📋 使用模板: ${selectedTemplate}`));
+
   const targetDir = process.cwd();
-  
+
   // 检查当前目录是否为空
   const files = await fs.readdir(targetDir);
   if (files.length > 0) {
     const { proceed } = await inquirer.prompt([
       {
-        type: 'confirm',
-        name: 'proceed',
-        message: '当前目录不为空，是否继续？',
-        default: false
-      }
+        type: "confirm",
+        name: "proceed",
+        message: "当前目录不为空，是否继续？",
+        default: false,
+      },
     ]);
-    
+
     if (!proceed) {
-      console.log(chalk.red('❌ 项目初始化取消'));
+      console.log(chalk.red("❌ 项目初始化取消"));
       return;
     }
   }
-  
-  const spinner = ora('正在初始化项目...').start();
-  
+
+  const spinner = ora("正在初始化项目...").start();
+
   try {
     // 生成项目文件
     await generateTemplate(projectName, selectedTemplate, targetDir);
-    
-    spinner.succeed('项目文件生成完成');
-    
-    console.log(chalk.green('✅ 项目初始化成功！'));
-    console.log('');
-    console.log(chalk.cyan('📦 安装依赖: npm install 或 yarn'));
-    console.log(chalk.cyan('🚀 启动项目: npm start 或 yarn start'));
-    
+
+    spinner.succeed("项目文件生成完成");
+
+    console.log(chalk.green("✅ 项目初始化成功！"));
+    console.log("");
+    console.log(chalk.cyan("📦 安装依赖: npm install 或 yarn"));
+    console.log(chalk.cyan("🚀 启动项目: npm start 或 yarn start"));
   } catch (error) {
-    spinner.fail('项目初始化失败');
+    spinner.fail("项目初始化失败");
     console.error(chalk.red(error.message));
     process.exit(1);
   }
@@ -148,5 +184,5 @@ async function initProject(options) {
 
 module.exports = {
   createProject,
-  initProject
-}; 
+  initProject,
+};

package/lib/templates/antd/package.json

@@ -12,17 +12,17 @@
     "start": "npm run dev"
   },
   "dependencies": {
-    "@umijs/max": "^4.0.0",
-    "@ant-design/pro-components": "^2.6.0",
-    "@ant-design/icons": "^5.0.0",
-    "antd": "^5.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@umijs/max": "{{@umijs/max}}",
+    "@ant-design/pro-components": "{{@ant-design/pro-components}}",
+    "@ant-design/icons": "{{@ant-design/icons}}",
+    "antd": "{{antd}}",
+    "react": "{{react}}",
+    "react-dom": "{{react-dom}}"
   },
   "devDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "prettier": "^2.7.1",
-    "typescript": "^5.0.0"
+    "@types/react": "{{@types/react}}",
+    "@types/react-dom": "{{@types/react-dom}}",
+    "prettier": "{{prettier}}",
+    "typescript": "{{typescript}}"
   }
 } 

package/lib/templates/basic/package.json

@@ -12,16 +12,16 @@
     "start": "npm run dev"
   },
   "dependencies": {
-    "@umijs/max": "^4.0.0",
-    "@ant-design/pro-components": "^2.6.0",
-    "antd": "^5.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@umijs/max": "{{@umijs/max}}",
+    "@ant-design/pro-components": "{{@ant-design/pro-components}}",
+    "antd": "{{antd}}",
+    "react": "{{react}}",
+    "react-dom": "{{react-dom}}"
   },
   "devDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "prettier": "^2.7.1",
-    "typescript": "^5.0.0"
+    "@types/react": "{{@types/react}}",
+    "@types/react-dom": "{{@types/react-dom}}",
+    "prettier": "{{prettier}}",
+    "typescript": "{{typescript}}"
   }
 } 

package/lib/templates/basic/src/pages/Home/index.tsx

@@ -28,7 +28,7 @@ const HomePage: React.FC = () => {
         <a href="https://umijs.org/" target="_blank" rel="noopener noreferrer">
           查看 Umi 文档
         </a>
-        <a href="https://github.com/yourusername/ysj-cli" target="_blank" rel="noopener noreferrer">
+        <a href="https://github.com/Ivan-YangSj/umi-cli" target="_blank" rel="noopener noreferrer">
           GitHub 仓库
         </a>
       </div>

package/lib/templates/common/.prettierrc

@@ -1,5 +1,5 @@
 {
-  "printWidth": 80,
+  "printWidth": 120,
   "singleQuote": true,
   "trailingComma": "all",
   "proseWrap": "never",

package/lib/templates/index.js

@@ -1,70 +1,132 @@
 const fs = require('fs-extra');
 const path = require('path');
+const inquirer = require('inquirer');
+const { TEMPLATES_TYPES } = require('../constants');
+const { getCommonPackageVersions, getCustomPackageVersions } = require('../utils/version');
 
-// 模板变量替换函数
+/**
+ * 模板变量替换函数
+ * 将模板文件中的占位符（如{{projectName}}）替换为实际的值
+ * @param {string} content - 文件内容
+ * @param {object} variables - 变量对象，包含要替换的键值对
+ * @returns {string} 替换后的内容
+ */
 function replaceTemplateVariables(content, variables) {
   let result = content;
+  // 遍历所有变量，逐一替换
   for (const [key, value] of Object.entries(variables)) {
+    // 创建占位符格式：{{变量名}}
     const placeholder = `{{${key}}}`;
+    // 全局替换所有匹配的占位符
     result = result.replace(new RegExp(placeholder, 'g'), value || '');
   }
   return result;
 }
 
-// 递归复制目录并替换模板变量
+/**
+ * 递归复制目录并替换模板变量
+ * 这是核心函数，负责将模板目录完整复制到目标位置，并处理模板变量
+ * @param {string} srcDir - 源目录路径（模板目录）
+ * @param {string} destDir - 目标目录路径（项目生成位置）
+ * @param {object} variables - 模板变量对象
+ */
 async function copyTemplateDir(srcDir, destDir, variables) {
+  // 确保目标目录存在，如果不存在则创建
   await fs.ensureDir(destDir);
   
+  // 读取源目录下的所有文件和文件夹
   const items = await fs.readdir(srcDir);
   
+  // 遍历每个项目（文件或文件夹）
   for (const item of items) {
-    const srcPath = path.join(srcDir, item);
-    const destPath = path.join(destDir, item);
+    const srcPath = path.join(srcDir, item);    // 源文件/文件夹的完整路径
+    const destPath = path.join(destDir, item);  // 目标文件/文件夹的完整路径
     
+    // 获取文件/文件夹的统计信息
     const stat = await fs.stat(srcPath);
     
     if (stat.isDirectory()) {
-      // 递归处理子目录
+      // 如果是目录，递归调用自己，复制整个子目录
       await copyTemplateDir(srcPath, destPath, variables);
     } else {
-      // 处理文件
+      // 如果是文件，读取文件内容并处理模板变量
       const content = await fs.readFile(srcPath, 'utf8');
+      // 替换文件中的模板变量（如{{projectName}}）
       const processedContent = replaceTemplateVariables(content, variables);
+      // 将处理后的内容写入目标文件
       await fs.writeFile(destPath, processedContent);
     }
   }
 }
 
-async function generateTemplate(projectName, templateType, targetDir) {
+/**
+ * 生成模板项目的主函数
+ * @param {string} projectName - 项目名称
+ * @param {string} templateType - 模板类型（如react、vue等）
+ * @param {string} targetDir - 目标生成目录
+ */
+async function generateTemplate(projectName, templateType, targetDir, useLatestVersions) {
+  // 获取模板根目录路径
   const templatesDir = path.join(__dirname, './');
+  // 构建特定模板目录路径
   const templateDir = path.join(templatesDir, templateType);
+  // 构建通用文件目录路径
   const commonDir = path.join(templatesDir, 'common');
   
-  // 检查模板是否存在
+  // 检查指定的模板是否存在
   if (!await fs.pathExists(templateDir)) {
     throw new Error(`模板 "${templateType}" 不存在`);
   }
+
+  let packageVersions = {};
+  let customPackageVersions = {};
+  
+  if (useLatestVersions) {
+    // 获取最新版本信息
+    console.log('📦 正在获取依赖包最新版本...');
+    packageVersions = await getCommonPackageVersions();
+    customPackageVersions = await getCustomPackageVersions({
+      '@cfmm/umi-plugins-ui': '^0.0.72',
+      '@cfmm/umi-plugins-utils': '^0.0.22'
+    });
+  } else {
+    console.log('📦 使用默认版本，从version.js获取默认版本映射...')
+    const { getDefaultVersions } = require('../utils/version');
+    packageVersions = getDefaultVersions();
+  }
   
-  // 模板变量
+  // 定义模板变量，这些变量会在模板文件中被替换
   const variables = {
-    projectName: projectName || 'my-umi-app'
+    projectName: projectName || 'my-umi-app',
+    ...packageVersions,  // 将版本信息作为变量传入
+    ...customPackageVersions  // 将自定义包版本信息作为变量传入
   };
   
   // 确保目标目录存在
   await fs.ensureDir(targetDir);
   
-  // 首先创建基础目录结构
-  const baseDirs = ['src/pages', 'src/components', 'src/services', 'src/utils'];
-  for (const dir of baseDirs) {
-    await fs.ensureDir(path.join(targetDir, dir));
+  // 创建项目的基础目录结构
+  // 这些是前端项目常用的目录结构
+  const baseDirs = [
+    'src/pages',      // 页面组件目录
+    'src/components', // 公共组件目录
+    'src/services',   // API服务目录
+    'src/utils'       // 工具函数目录
+  ];
+  
+  if(templateType !== TEMPLATES_TYPES.qiankun) {
+    // 遍历并创建所有基础目录
+    for (const dir of baseDirs) {
+      await fs.ensureDir(path.join(targetDir, dir));
+    }
   }
   
-  // 复制模板特定的文件
+  // 复制模板特定的文件（如React模板、Vue模板等）
   console.log(`📂 正在复制模板文件...`);
   await copyTemplateDir(templateDir, targetDir, variables);
   
-  // 复制通用文件
-  if (await fs.pathExists(commonDir)) {
+  // qiankun不需要，复制通用文件（如配置文件、README等，所有模板都需要的文件）
+  if (await fs.pathExists(commonDir) && templateType !== TEMPLATES_TYPES.qiankun) {
     console.log(`📄 正在复制通用配置文件...`);
     await copyTemplateDir(commonDir, targetDir, variables);
   }
@@ -72,14 +134,20 @@ async function generateTemplate(projectName, templateType, targetDir) {
   console.log(`✅ 模板文件复制完成`);
 }
 
-// 获取可用的模板列表
+/**
+ * 获取所有可用的模板列表
+ * 扫描模板目录，返回所有可用的模板类型
+ * @returns {Array<string>} 可用模板列表
+ */
 async function getAvailableTemplates() {
   const templatesDir = path.join(__dirname, './');
   
+  // 如果模板目录不存在，返回空数组
   if (!await fs.pathExists(templatesDir)) {
     return [];
   }
   
+  // 读取模板目录下的所有项目
   const items = await fs.readdir(templatesDir);
   const templates = [];
   
@@ -87,7 +155,8 @@ async function getAvailableTemplates() {
     const itemPath = path.join(templatesDir, item);
     const stat = await fs.stat(itemPath);
     
-    // 排除common目录和index.js文件，只返回实际的模板目录
+    // 只返回目录类型的模板，排除common目录和index.js文件
+    // common目录是通用文件目录，不是模板类型
     if (stat.isDirectory() && item !== 'common') {
       templates.push(item);
     }
@@ -96,7 +165,8 @@ async function getAvailableTemplates() {
   return templates;
 }
 
+// 导出主要功能函数
 module.exports = {
-  generateTemplate,
-  getAvailableTemplates
+  generateTemplate,        // 生成模板项目
+  getAvailableTemplates   // 获取可用模板列表
 };