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

一、背景

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

二、方案

1、解决思路

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

image.png

2、解决方案

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

2.1、第一步:执行命令

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

image.png

2.2、第二步:参数输入

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

image.png

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

image.png

2.4、完成操作

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

image.png

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环境的控制台下测试一下效果。

三、总结

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

分类:
前端