效率提升20%！开发一个简易的cli生成页面模板

一、背景

最近做了一个通用后台框架的需求，业务方可以基于我们的框架进行二次开发，减少一些重复的基建类的工作。但是业务方开发新页面时，还是会存在很多的报表和简单的crud（增删改查）需求，所以就想到了能不能在前端通过cli生成通用的模板来减少这部分重复的工作。

二、方案

1、解决思路

通过cli的交互命令，正则替换模板中关键的引入路径、类名等，再生成到对应的views、api目录下。

2、解决方案

核心思路是：通过prompts这个库进行控制台的命令交互，根据用户选择的参数，替换模板的代码内容，再生成到对应的位置。 prompts这个库也是vite在执行create-vite命令的时候用的，使用方式非常简单明了。

2.1、第一步：执行命令

在package.json下执行buildTpl:module这个命令。

2.2、第二步：参数输入

• 输入生成的模块名
• 选择需要生成的功能

2.3、第三步：选择生成位置

2.4、完成操作

对应目录下则会生成对应的模板。

2.5、待完善的点

• 增加组件的选择。用户可以多选要引入的组件，这样既能减少从多个页面复制的操作，也能保证组件的使用规范跟模板保持一致。

3、核心代码

这里只贴交互命令的代码。因为生成模板的代码，业务性关联性较强，可能不适用于其他的系统。

import prompts from 'prompts';
import yargs from 'yargs';

prompts.override(yargs.argv);

/**
 * 生成通用页面模板
 * @author waldon
 * @date 2023-01-03
 */
(async () => {
  const response = await prompts([
    {
      type: 'text',
      name: 'modulename',
      message: `请输入新建页面的模块名称(key-base格式):`,
      validate: value => {
        if (!value) {
          return '模块名称是必填的！';
        }
        return true;
      },
    },
    {
      type: 'multiselect',
      name: 'function',
      message: '请选择要生成的功能:',
      choices: [
        { title: '增', value: 'create', selected: true },
        { title: '删', value: 'delete', selected: true },
        { title: '改', value: 'update', selected: true },
        { title: '查', value: 'retrieve', selected: true },
      ],
      validate: value => {
        if (!value || value.length < 1) {
          return '至少要选择一项功能！';
        }
        return true;
      },
    },
    {
      type: 'select',
      name: 'gtType',
      message: '请选择生成方式:',
      choices: [
        { title: '生成到当前项目', value: 'gtCurrent' },
        { title: '保存为单独的模块', value: 'gtModule' },
      ],
    },
  ]);
  const { modulename } = response;
  if (!modulename) {
    return;
  }
})();

这个代码是可以直接运行的，可以直接复制到带node环境的控制台下测试一下效果。

三、总结

写这个脚本的意义在于，通过简单的命令行交互操作，减少一些我们手动复制和修改的步骤。而且生成的基础模板是根据项目的目录规范和文件规范来的，不会存在负面的影响，可以基于这个模板再进行开发。