使用 pnpm monorepo + ts 制作个功能完善的 CLI 命令行工具

---

前言

在卷卷的今天，我们可以看到前端框架和技术层出不穷，各种技术都伴有着一系列的生态诞生，说白了就是都有后台，有静态文档技术，有运行时依赖，有各种各样的轮子，当然也少不了 cli 这一套

对于大部分人来说最开始接触这个东西的应该是 vue-cli ，当时确实感觉很不错，如今发现很多脚手架和命令行工具完全可以使用 js / ts 来开发，都依赖着 nodejs npm 来运行

---

来吧：接下来我们也实践一个功能简单且常用的工具

先把仓库地址放出来，因为之前很多博客很多人都希望放代码的

github仓库

gitee仓库（同步github）

一、仓库搭建

1. 介绍功能

简单介绍下上面仓库这个 cli 工具的功能吧

参数 Options

-v, --vers: 查看版本号

-h, --help: 查看自定义帮助信息

命令 Commands

init: 初始化一个模版（包含文档和博客风格的 vitepress 主题模版），也就是远程仓库模版下载和本地文件修改

list: 展示模版仓库各个模版的最新提交信息，请求了 GitHub API

git: 展示某人远程仓库的列表，请求了 Github API

ver: 展示模版仓库分支的版本号，请求了 Github API

-l: 多国语言切换

2.开始搭建

我们使用比较新的 pnpm 搭建 monorepo 工程

先来看下项目目录

红框是我们必须要有的

1. package.json

这里就正常写就可以，不过 scripts 脚本可以变一下，使用 pnpm 支持的更多的脚本

pnpm run -C packages/cli xxx

上述命令表示执行子模块中的 xxx 命令，这样就可以再根目录操作子模块脚本了

依赖说明：

fs-extra: fs 模块升级版

rimraf: 用来删除目录，忽略一些系统差异

ts-node: 便于我们使用 node 直接执行 ts 文件

{
   
  "name": "@vuetom-cli/root",
  "private": true,
  "workspaces": [
    "packages/*"
  ],
  "scripts": {
   
    "build": "pnpm run -C packages/cli tsc",
    "cli": "pnpm run -C packages/cli cli",
    "cli:init": "pnpm run -C packages/cli cli:init",
    "cli:list": "pnpm run -C packages/cli cli:list",
    "ts": "pnpm run -C packages/cli ts",
    "ts:init": "pnpm run -C packages/cli ts:init",
    "ts:list": "pnpm run -C packages/cli ts:list" 
  },
  "dependencies": {
   
  },
  "devDependencies": {
   
    "fs-extra": "^10.1.0",
    "rimraf": "^3.0.2",
    "ts-node": "^10.9.1",
    "typescript": "^4.8.2"
  }
}

2. pnpm-workspace.yaml

这里声明包含的模块

packages:
  - 'packages/*'

3. packages 包

这里面我们再分 3 个目录，一个是 cli 主项目目录

再搞两个模版(temp-docs / temp-blog)目录，用来模拟项目模版生成的功能

4. 子模块结构

5. cli/package.json

该文件下包含了cli自己模块本身要用到了依赖包以及命令，最主要的是要看编译命令：

假设你以后的命令是 vuetom-cli

cli: 主命令，执行 pnpm cli 就相当于执行了 vuetom-cli

cli:init: command，相当于执行了 vuetom-cli init

cli:list: command，相当于执行了 vuetom-cli list

ts: 开发模式下执行的，方便变开发变测试

copy: 移动模版文件或者其他一些不需要经过编译的文件

tsc: 编译命令，将 ts 文件编译为 js

{
   
  "name": "vuetom-cli",
  "version": "0.2.5",
  "description": "A simple CLI for vitepress-theme-vuetom",
  "scripts": {
   
    "cli": "node ./bin/vuetom-cli.js",
    "cli:init": "node ./bin/vuetom-cli.js init",
    "cli:list": "node ./bin/vuetom-cli.js list"