手把手教你写一个前端脚手架

// 1 配置可执行的命令 commander
import { Command } from 'commander';
import chalk from 'chalk';
import config from '../package.json' assert { type: 'json' };

const program = new Command();

program
  .command('create <app-name>')  // 创建命令
  .description('create a new project') // 命令描述
  .action((name, options, cmd) => {
    console.log('执行 create 命令');
  });

program.on('--help', () => {
  console.log();
  console.log(`Run ${chalk.cyan('rippi <command> --help')} to show detail of this command`);
  console.log();
});

program
  // 说明版本
  .version(`rippi-cli@${config.version}`)
  // 说明使用方式
  .usage('<command [option]');

// 解析用户执行命令传入的参数
program.parse(process.argv);

// lib/creator.js 编写一个creator类，整个找模板到下载模板的主要逻辑都抽象到了这个类中。
import { fetchRepoList } from './request.js';
import { loading } from './utils.js';
import downloadGitRepo from 'download-git-repo';
import inquirer from 'inquirer';
import chalk from 'chalk';
import util from 'util';

class Creator {
  constructor(projectName, targetDir) {
    this.name = projectName;
    this.dir = targetDir;
    // 将downloadGitRepo转成promise
    this.downloadGitRepo = util.promisify(downloadGitRepo);
  }

  fetchRepo = async () => {
    const branches = await loading(fetchRepoList, 'waiting for fetch resources');
    return branches;
  }

  fetchTag = () => {}

  download = async (branch) => {
    // 1 拼接下载路径 这里放自己的模板仓库url
    const requestUrl = `rippi-cli-template/react/#${branch}`;
    // 2 把资源下载到某个路径上
    await this.downloadGitRepo(requestUrl, this.dir);
    console.log(chalk.green('done!'));
  }

  create = async () => {
    // 1 先去拉取当前仓库下的所有分支
    const branches = await this.fetchRepo();
    // 这里会在shell命令行弹出选择项，选项为choices中的内容
    const { curBranch } = await inquirer.prompt([
      {
        name: 'curBranch',
        type: 'list',
        // 提示信息
        message: 'please choose current version:',
        // 选项
        choices: branches
          .filter((branch) => branch.name !== 'main')
          .map((branch) => ({
            name: branch.name,
            value: branch.name,
          })),
      },
    ]);
    // 2 下载
    await this.download(curBranch);
  }
};

export default Creator;

// lib/utils.js 给异步方法加loading效果，只是一个好看点的交互效果
import ora from 'ora';

export const loading = async (fn, msg, ...args) => {
  // 计数器，失败自动重试最大次数为3，超过3次就直接返回失败
  let counter = 0;
  const run = async () => {
    const spinner = ora(msg);
    spinner.start();
    try {
      const result = await fn(...args);
      spinner.succeed();
      return result;
    } catch (error) {
      spinner.fail('something go wrong, refetching...');
      if (++counter < 3) {
        return run();
      } else {
        return Promise.reject();
      }
    }
  };
  return run();
};

// lib/request.js 下载仓库

import axios from 'axios';

axios.interceptors.response.use((res) => {
  return res.data;
});

// 这里是获取模板仓库的所有分支，url写自己的模板仓库url
export const fetchRepoList = () => {
  return axios.get('https://api.github.com/repos/rippi-cli-template/react/branches');
};

// lib/create.js
import path from 'path';
import Creator from './creator.js';

/**
 * 执行create时的处理
 * @param {any} name // 创建的项目名
 * @param {any} options // 配置项 必须是上面option配置的选项之一，否则就报错  这里取的起始就是cmd里面的options的各个option的long属性
 * @param {any} cmd // 执行的命令本身 一个大对象，里面很多属性
 */
const create = async (projectName, options, cmd) => {
  // 获取工作目录
  const cwd = process.cwd();
  // 目标目录也就是要创建的目录
  const targetDir = path.join(cwd, projectName);
  // 创建项目
  const creator = new Creator(projectName, targetDir);
  creator.create();
};

export default create;

// bin/index.js 将上文中的action改掉
program
  .command('create <app-name>')  // 创建命令
  .description('create a new project') // 命令描述
  .action((name, options, cmd) => {
    console.log('执行 create 命令');
  });

// bin/index.js  新增一个option
program
  .command('create <app-name>')  // 创建命令
  .description('create a new project') // 命令描述
  .option('-f, --force', 'overwrite target directory if it is existed') // 命令选项(选项名，描述) 这里就是解决下重名的情况
  .action((name, options, cmd) => {
    import('../lib/create.js').then(({ default: create }) => {
      create(name, options, cmd);
    });
  });

// lib/create.js
import path from 'path';
import fs from 'fs-extra';
import inquirer from 'inquirer';
import Creator from './creator.js';

/**
 * 执行create时的处理
 * @param {any} name // 创建的项目名
 * @param {any} options // 配置项 必须是上面option配置的选项之一，否则就报错  这里取的起始就是cmd里面的options的各个option的long属性
 * @param {any} cmd // 执行的命令本身 一个大对象，里面很多属性
 */
const create = async (projectName, options, cmd) => {
  // 先判断是否重名，如果重名，若选择了force则直接覆盖之前的目录，否则报错
  // 获取工作目录
  const cwd = process.cwd();
  // 目标目录也就是要创建的目录
  const targetDir = path.join(cwd, projectName);
  if (fs.existsSync(targetDir)) {
    // 选择了强制创建，先删除旧的目录，然后创建新的目录
    if (options.force) {
      await fs.remove(targetDir);
    } else {
      const { action } = await inquirer.prompt([
        {
          name: 'action',
          type: 'list',
          // 提示信息
          message: `${projectName} is existed, are you want to overwrite this directory`,
          // 选项
          choices: [
            { name: 'overwrite', value: true },
            { name: 'cancel', value: false },
          ],
        },
      ]);
      if (!action) {
        return;
      } else {
        console.log('\r\noverwriting...');
        await fs.remove(targetDir);
        console.log('overwrite done');
      }
    }
  }

  // 创建项目
  const creator = new Creator(projectName, targetDir);
  creator.create();
};

export default create;