用low code方式开发一个脚手架吧

作为一个喜欢折腾代码的人儿，有时候一个月会创建n多的项目。可能是

• 一些想法的example
• 解决当下某个痛点的npm包
• 感兴趣的网站项目
• ...

因为这些项目的种类不一样，所以每次都可能需要设计不同的目录结构、仓库管理方式、甚至构建方式。即使社区内有超多的cli工具可以供我们选择。但是因为每个人的开发习惯不一样，他们提供的模版很多时候也满足不了我们自己当下的需求。所以这个时候我就特别希望有一个自己的cli工具来帮我做一个支撑

但是开发一个cli尽管不难，但是也有些繁琐的知识我们要事先去熟悉。但是呢，这类的知识其实对于我自己来说有一些鸡肋，「并不是所有人都需要会开发cli」我就是不想在这上面浪费时间。能不能有种像lowcode的方式工具让我仅需要简单配置就能生成我自己的cli工具呢？

额，好像没找到。所以我最近自己鼓捣了一个，拉出来亮亮相吧

先来演示一下基础功能

自定义选项、仓库、标题

gong-cli目前有三个全局配置属性。使用指令pnpm start -c或npx gong-create@latest -c可设置除configData的所有配置

• name， cli的开屏logo
• userPath，git仓库的用户名或组织名
• configData，选项控制配置

name

具体解释一下，name目前没有任何业务逻辑。他只是一个cli开屏的title logo之类的

userPath

userPath属性则是决定了，cli所要拉去的模版仓库地址。它代表的是仓库平台的用户名或组织名

如：我是在github上创建了一个组织，用于存放我个人的所有模版项目，所以这里我的userPath就是gong-cli

如果是gitee，gong9这个用户名就是这里的userPath

正确设置userPath之后，gong-cli就知道去哪里获取你的模版项目了

目前：

• github 仅支持组织名
• gitee 仅支持用户名

configData

仅仅能获取仓库项目肯定是不够的，我们是需要cli的交互能和所有模版进行目标匹配的。可以先看一眼configData的默认值

{
  "configData": [
    {
      "name": "project",
      "label": "项目类型",
      "type": "select",
      "title": "请选择所要创建的项目类型",
      "items": [
        {
          "label": "业务",
          "value": "business"
        },
        {
          "label": "库",
          "value": "lib"
        },
        {
          "label": "脚手架",
          "value": "cli"
        }
      ]
    },
    {
      "name": "codeManagement",
      "label": "仓库管理方式",
      "type": "select",
      "title": "请选择仓库管理方式",
      "items": [
        {
          "label": "单库项目",
          "value": "singlerepo"
        },
        {
          "label": "多库管理",
          "value": "monorepo"
        }
      ]
    },
    {
      "name": "frame",
      "label": "框架类型",
      "type": "select",
      "title": "请选择框架",
      "items": [
        {
          "label": "React",
          "value": "react"
        },
        {
          "label": "Vue",
          "value": "vue"
        },
        {
          "label": "None",
          "value": "none"
        }
      ]
    }
  ]
}

如果接触过低代码的配置化，相信你一眼就明白了。

没错，这里cli的交互控件为了进一步降低书写开发成本，是采用配置化的形式处理的。就相当于表单领域的三个单选下拉框。交互行为完成之后肯定会产生一个行为结果

eg：['business','singlerepo','react']

这里我简单做了一下模版仓库各模版命名的约定。即上面行为结果要想和某一模版匹配，其命名也应有business、singlerepo、react这三个关键字，以英文-连接。 如template-business-singlerepo-react

对于configData的每一个控件子项，目前仅支持select、input

举一个测试case

{
  "configData": [
    {
      "name": "project",
      "label": "测试1",
      "type": "select",
      "title": "这是测试1",
      "items": [
        {
          "label": "case1",
          "value": "1"
        },
        {
          "label": "case2",
          "value": "2"
        }
      ]
    },
    {
      "name": "codeManagement",
      "label": "测试2",
      "type": "input",
      "title": "测试2"
    }
  ]
}

拓展存储仓库

现在好像cli的基本功能都准备好了，但是还是有一个非常大的问题需要解决。每个人喜欢的仓库存储平台都是不一样的，有的人喜欢github，有的人喜欢gitlab，还有人再用gitee

那怎么办呢？

不用担心，这也已经考虑进去了，gong-cli做了一个简单的插件化的处理。一个平台有对应一个平台的处理插件

刚才我的案例我拉的我gitee上的模版，我个人用的最多的却是github。下面给大家演示一下怎么去切换到github

首先要记住两个命令

• pnpm start -p 打开插件商店
• pnpm start -l 列举本地插件商店&进行启用

首先打开插件商店，找到对应的github插件进行安装

安装成功之后进行启用

启用成功之后，再次pnpm start启动cli就可以发现成功切换到github了

结尾

经过上面简单配置之后，一个符合你个人需求的cli便是完成了。这个时候你只需修改我cli中的package相关的信息重新发包即可。

尽管，可能你的代码仓库需要鉴权或者有其他代码仓库存储平台。你也是仅仅需要开发一个符合业务的相关业务插件，也无需关心其他逻辑

目前仅完成了github、gitee插件的开发，后期会考虑再以插件化的形式集成一些工程化配置和生成器

希望能给有需要的人带来一丝帮助

当然项目新启，欢迎pr： gong-cli代码地址