xgb-cli 1.0.0

package/README.md

@@ -0,0 +1,56 @@
+# xgb-cli
+
+A CLI tool to download and initialize projects from GitHub templates.
+
+## templates
+
+- [react-components-menorepo-template](https://github.com/xgbbing/react-components-monorepo-template)
+基于 dumi + @ice/pkg 的 React Menorepo 组件库项目模板
+- [react-components-repo-template](https://github.com/xgbbing/react-components-repo-template)
+基于 dumi 的 React 组件库项目模板
+- [vue3-admin-repo-template](https://github.com/xgbbing/vue3-admin-repo-template)
+基于 Vue3 + TypeScript + Vite + Pinia + Element-Plus 的 后台管理系统项目模板
+
+## Installation
+
+```bash
+npm install -g xgb-cli
+```
+
+Or link it locally for development:
+
+```bash
+npm link
+```
+
+## Usage
+
+### Initialize a new project
+
+```bash
+xgb-cli init
+```
+
+This will prompt you for:
+- Project name
+- GitHub template
+
+### Use with options
+
+```bash
+# Examples
+xgb-cli init my-app
+xgb-cli init -t react-components-menorepo-template
+xgb-cli init my-app -t react-components-menorepo-template
+```
+
+## Features
+
+- 🚀 Quick project initialization
+- 📥 Download templates from GitHub
+- 💬 Interactive prompts
+- ✨ Clean and simple interface
+
+## License
+
+MIT

package/bin/index.js

@@ -0,0 +1,29 @@
+#!/usr/bin/env node
+
+const { program } = require('commander');
+const chalk = require('chalk');
+const figlet = require('figlet');
+const { version } = require('../package.json');
+const { initProject } = require('../src/commands/init');
+
+console.log(
+  chalk.cyan(
+    figlet.textSync('XGB CLI', { horizontalLayout: 'full' })
+  )
+);
+
+program
+  .name('xgb-cli')
+  .description('前端脚手架CLI工具')
+  .version(version, '-v, --version', '查看版本号');
+
+// Init command
+program
+  .command('init [project-name]')
+  .description('初始化一个新项目')
+  .option('-t, --template <template>', '指定模板')
+  .action((projectName, options) => {
+    initProject(projectName, options);
+  });
+
+program.parse(process.argv);

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "xgb-cli",
+  "version": "1.0.0",
+  "description": "前端脚手架CLI",
+  "bin": {
+    "xgb-cli": "./bin/index.js"
+  },
+  "scripts": {
+    "start": "node bin/index.js"
+  },
+  "keywords": [
+    "cli",
+    "github",
+    "template",
+    "init"
+  ],
+  "author": "xgb.xu@qq.com",
+  "license": "MIT",
+  "dependencies": {
+    "commander": "^11.1.0",
+    "inquirer": "^8.2.5",
+    "ora": "^5.4.1",
+    "chalk": "^4.1.2",
+    "download-git-repo": "^2.0.0",
+    "figlet": "^1.7.0",
+    "fs-extra": "^11.0.0"
+  },
+  "devDependencies": {}
+}

package/src/commands/init.js

@@ -0,0 +1,117 @@
+const path = require('path');
+const fs = require('fs-extra');
+const inquirer = require('inquirer');
+const chalk = require('chalk');
+const templates = require('../templates');
+const { downloadTemplate } = require('../utils/download');
+const logger = require('../utils/logger');
+
+const ora = require('ora');
+
+/**
+ * Initialize a new project from GitHub template
+ * @param {Object} options - Command options
+ * @param {string} options.projectName - projectName
+ * @param {string} options.template - GitHub template (format: owner/repo)
+ */
+async function initProject(projectName, options) {
+  try {
+    const answers = await promptUser(projectName, options)
+    const { name, template } = answers;
+
+    const targetDir = path.join(process.cwd(), name);
+
+    if (fs.existsSync(targetDir)) {
+      const { overwrite } = await inquirer.prompt([
+        {
+          type: 'confirm',
+          name: 'overwrite',
+          message: chalk.yellow(`目录${name}已经存在，是否覆盖？`),
+          default: false
+        }
+      ]);
+
+      if (!overwrite) {
+        logger.warn('已取消创建')
+        process.exit(0);
+      }
+
+      await fs.remove(targetDir);
+    }
+
+    const selectTemplate = templates.find(t => t.value === template)
+
+    await downloadTemplate(selectTemplate.repo, targetDir);
+
+    await updatePackageJson(targetDir, name);
+
+    printSuccess(name);
+
+  } catch (err) {
+    logger.error(`创建项目失败： ${err.message}`)
+    process.exit(1);
+  }
+}
+
+async function promptUser(projectName, options) {
+  const questions = []
+
+  if (!projectName) {
+    questions.push({
+      type: 'input',
+      name: 'name',
+      message: '请输入项目名称：',
+      default: 'my-app',
+      validate(input) {
+        if (!input.trim()) return '项目名称不能为空';
+        if (!/^[a-zA-Z0-9-_]+$/.test(input)) return '项目名称只能包含字母、数字、下划线、中划线';
+        return true;
+      }
+    });
+  }
+
+  if (!options.template) {
+    questions.push({
+      type: 'list',
+      name: 'template',
+      message: '请选择项目模板：',
+      choices: templates.map(t => ({
+        name: `${t.name} - ${chalk.gray(t.description)}`,
+        value: t.value
+      })),
+    });
+  }
+
+  const answers = await inquirer.prompt(questions);
+
+  return {
+    name: projectName || answers.name,
+    template: options.template || answers.template
+  }
+}
+
+async function updatePackageJson(targetDir, projectName) {
+  const pkgPath = path.join(targetDir, 'package.json');
+  if (fs.existsSync(pkgPath)) {
+    const pkg = await fs.readJson(pkgPath);
+    pkg.name = projectName;
+    pkg.version = '0.1.0';
+    await fs.writeJson(pkgPath, pkg, { spaces: 2 });
+  }
+}
+
+function printSuccess(name) {
+  console.log()
+  logger.success('✅ 项目初始化成功！')
+  console.log()
+  logger.info('👉 执行以下命令开始开发：')
+  console.log()
+  logger.warn(`  cd ${name}`)
+  logger.warn('  pnpm install')
+  logger.warn('  pnpm start')
+  console.log()
+}
+
+module.exports = {
+  initProject
+};

package/src/templates.js

@@ -0,0 +1,23 @@
+module.exports = [
+  {
+    name: 'react-components-menorepo-template',
+    description: '基于 dumi + @ice/pkg 的 React Menorepo 组件库项目模板',
+    value: 'react-components-menorepo-template',
+    repo: 'github:xgbbing/react-components-menorepo-template',
+    branch: 'main'
+  },
+  {
+    name: 'react-components-repo-template',
+    description: '基于 dumi 的 React 组件库项目模板',
+    value: 'react-components-repo-template',
+    repo: 'github:xgbbing/react-components-repo-template',
+    branch: 'main'
+  },
+  {
+    name: 'vue3-admin-repo-template',
+    description: '基于 Vue3 + TypeScript + Vite + Pinia + Element-Plus 的 后台管理系统项目模板',
+    value: 'vue3-admin-repo-template',
+    repo: 'github:xgbbing/vue3-admin-repo-template',
+    branch: 'main'
+  }
+]

package/src/utils/download.js

@@ -0,0 +1,33 @@
+const downloadGitRepo = require('download-git-repo');
+const ora = require('ora');
+const chalk = require('chalk');
+
+/**
+ * Download template
+ * @param {string} repo - GitHub repo (github:user/repo#branch)
+ * @param {string} targetDir - Target directory
+ */
+async function downloadTemplate(repo, targetDir) {
+  const spinner = ora({
+    text: `正在下载模板 ${chalk.cyan(repo)}...`,
+    color: 'cyan'
+  }).start();
+
+  return new Promise((resolve, reject) => {
+    downloadGitRepo(repo, targetDir,
+      {
+        clone: false
+      }, // false 用 download，true 用 git clone （私有仓库用 true）
+      (err) => {
+        if (err) {
+          spinner.fail('模板下载失败');
+          reject(err);
+        } else {
+          spinner.succeed('模板下载成功');
+          resolve();
+        }
+      });
+  });
+}
+
+module.exports = { downloadTemplate };

package/src/utils/install.js

@@ -0,0 +1,40 @@
+const { spawn } = require('child_process');
+const ora = require('ora');
+const chalk = require('chalk');
+
+function installDeps(targetDir, packageManager = 'pnpm') {
+  const spinner = ora({
+    text: `正在使用 ${chalk.cyan(packageManager)} 安装依赖...`,
+    color: 'cyan'
+  }).start();
+
+  return new Promise((resolve, reject) => {
+    // windows 兼容
+    const isWin = process.platform === 'win32';
+    const cmd = isWin ? `${packageManager}.cmd` : packageManager;
+
+    const child = spawn(cmd, ['install'], {
+      cwd: targetDir, // 在项目目录下执行
+      stdio: 'inherit' // 继承父进程的输出
+    });
+
+    child.on('close', (code) => {
+      if (code !== 0) {
+        spinner.fail(chalk.red('依赖安装失败'));
+        reject(new Error(`${packageManager} install 失败，退出码： ${code}`));
+      } else {
+        spinner.succeed(chalk.green('依赖安装成功'));
+        resolve();
+      }
+    })
+
+    child.on('error', (err) => {
+      spinner.fail(chalk.red('依赖安装出错'));
+      reject(err);
+    });
+  })
+}
+
+module.exports = {
+  installDeps
+}

package/src/utils/logger.js

@@ -0,0 +1,16 @@
+const chalk = require('chalk');
+
+module.exports = {
+  info: (...args) => {
+    console.log(chalk.cyan(...args));
+  },
+  success: (...args) => {
+    console.log(chalk.green(...args));
+  },
+  warn: (...args) => {
+    console.log(chalk.yellow(...args));
+  },
+  error: (...args) => {
+    console.log(chalk.red(...args));
+  },
+};