从0搭建一个命令行CLI工具 #

// src/index.ts
import { program } from "commander";

async function action(){
    // 执行操作
}

program.version("1.0.0");
program.command("start").description("启动cli").action(action);
program.parse(process.argv);

// src/index.ts
async function action(){
  /** 获取项目名 包管理器 模板 打包工具 */
  const { projectName, packageManager, template, builder } =
    await inquirer.prompt([
      {
        type: "input",
        name: "projectName",
        message: "输入项目名称",
      },
      {
        type: "list",
        name: "packageManager",
        message: "选择包管理器",
          // PackageManager为枚举类型
        choices: [PackageManager.PNPM, PackageManager.YARN, PackageManager.NPM],
      },
      {
        type: "list",
        name: "template",
        message: "选择模板",
          // Template为枚举类型
        choices: [Template.REACT],
      },
      {
        type: "list",
        name: "builder",
        message: "选择打包工具",
          // Builder为枚举类型
        choices: [Builder.VITE],
      },
    ]);

  /** 获取默认依赖包 */
  const { deps } = await inquirer.prompt([
    {
      type: "checkbox",
      name: "deps",
      message: "默认依赖包",
      choices: createPackagesByTemplate(template),
    },
  ]);
}

async function action(){
	······
  /** 创建项目目录 */
  const rootPath = path.join(process.cwd(), `/${projectName}`);

  /** 创建项目实例 */
  const project = new Project({
    rootPath,
    projectName,
    packageManager,
    template,
    builder,
    deps,
  });
  /** 生成项目 */
  await project.run();
}

// utils/command.ts
async function useCommand(command: string, cwd: string) {
  await execa(`${command}`, [], {
    cwd,
    stdio: ["inherit", "pipe", "inherit"],
  });
}

// packageModule.ts
async function packageInstall(): Promise<void> {
    console.log(chalk.cyan("安装依赖中~~~"));
	// Project类实例化时传递了packageManager和rootPath
    await useCommand(
        `${this.config.packageManager} install`,
        this.config.rootPath
    );
    console.log(chalk.cyan("依赖安装完成"));
}

// project.ts
/**
   * Project类构造函数
   * @param config 项目配置对象
   */
constructor(public config: TConfig) {
    this.gitModule = new GitModule(config);
    this.readmeModule = new ReadmeModule(config);
    this.fileModule = createFileModule(config);
    this.tsModule = createTSModule(config);
    this.builder = createBuilder(config);
    this.packageJsonModule = createPackageJsonModule(config);
    /** 添加构建工具到依赖中 */
    this.packageJsonModule.addDependencies(this.builder.value);
}

// packageModule.ts
class reactPackageJsonModule extends PackageJsonModule {
  constructor(config: TConfig) {
    super(config);
    const {
      react,
      reactDom,
      reactRouterDom,
      typesNode,
      typesReact,
      typesReactDom,
      eslintPluginReact,
    } = globalDependencies;
    this.mergeConfig({
      dependencies: {
        ...react,
        ...reactDom,
        ...reactRouterDom,
      },
      devDependencies: {
        ...typesNode,
        ...typesReact,
        ...typesReactDom,
        ...eslintPluginReact,
      },
    });
  }
}

export function createPackageJsonModule(config: TConfig) {
  if (config.template === Template.REACT) {
    return new reactPackageJsonModule(config);
  } else {
    throw new CommanderError(500, "500", `无${config.template}对应的依赖模板`);
  }
}

export type TDependence = {
  dependencies?: Record<string, string>;
  devDependencies?: Record<string, string>;
  beforeInitCallback?: (project: Project) => void;
  afterInitCallback?: (project: Project) => void;
};

class ViteBuilderForReact extends ViteBuilder {
  constructor() {
    super();
    const newValue: TDependence = {
      devDependencies: {
        "@vitejs/plugin-react": "^4.0.0",
      },
      beforeInitCallback: (project: Project) => {
        project.packageJsonModule?.mergeConfig({
          scripts: {
            build: "vite build",
            dev: "vite",
            preview: "vite preview",
            commit: "git-cz",
            prepare: "husky install",
            lint: "npm run lint:script && npm run lint:style",
            "lint:script": "eslint --ext .js,.jsx,.ts,.tsx --fix --quiet ./",
            "lint:style": 'stylelint --fix "src/**/*.{css,scss}"',
          },
        });
      },
      afterInitCallback: (project: Project) => {
        fs.copyFileSync(
          path.join(__dirname, REACT_VITE_PREFIX, "/vite.config.ts"),
          path.join(project.config.rootPath, "/vite.config.ts")
        );
      },
    };
    this.value = mergeObject<TDependence>(this.value, newValue);
  }
}