Vue3 企业级优雅实战 - 组件库框架 - 8 搭建组件库 cli-优快云博客

前面的文章分享了组件库的开发、example、组件库文档，本文分享组件库 cli 开发。

1 为什么要开发组件库 cli

回顾一个新组件的完整开发步骤：

1 在 packages 目录下创建组件目录 xxx：
1.1 使用 pnpm 初始化 package.json，修改 name 属性；
1.2 在该目录中创建 src 目录和 index.ts 文件；
1.3 在 src 目录下创建 types.ts 文件和 index.tsx / index.vue 文件；

2 在组件库的入口模块 packages/yyg-demo-ui：
2.1 使用 pnpm install 安装 1.1 创建的 xxx；
2.2 在 packages/xxx-ui/index.ts 中引入 xxx，并添加到 components 数组中；

3 packages/scss/components/ 目录：
3.1 在该目录下创建 _xxx.module.scss；
3.2 在该目录中的 index.scss 中引入 _xxx.module.scss；

4 组件库文档：
4.1 在 docs/components 目录下创建 xxx.md 文件；
4.2 在 docs/demos 目录下创建 xxx 目录，并在该目录中创建 xxx.vue 文件；
4.3 在 docs/components.ts 中添加组件菜单项；

该步骤是一个机械化的流程操作，涉及新建或修改十多个文件，费事费力，纯属体力活。这种情况下就可以使用工具替代咱们完成这些操作，开发一个 cli，执行命令、输入组件名就自动创建组件，完成上述操作，如此便可以将注意力集中到组件和业务的开发中。

2 开发 cli 使用到的技术

开发 cli 的库有很多，优雅哥在这里使用的还是最传统的技术栈，在下面使用的这些库时要注意版本号：

库	版本	作用
commander	^9.4.1	接收输入的命令，解析命令参数
chalk	4.1.2	控制台输出的文字颜色
inquirer	8.2.5	命令行交互，在命令行提示用户输入，获取到用户输入的内容
log-symbols	4.1.0	控制台输出的图标，如 success、failure 等状态
ora	5.4.1	在控制台显示 loading
shelljs	^0.8.5	执行 cmd 命令，如 cd、pnpm install 等

3 搭建 cli 开发框架

有了上面的知识准备，接下来就进入实战 cli：

3.1 初始化 cli 模块

在命令行中进入 cli 目录，依旧使用 pnpm 初始化：

pnpm init

修改生成的 package.json 文件 name 属性：

{
   
   
  "name": "@yyg-demo-ui/cli",
  "version": "1.0.0",
  "description": "命令行工具",
  "author": "程序员优雅哥",
  "license": "ISC"
}

在 cli 目录下创建 ts 配置文件 tsconfig.json：

{
   
   
  "compilerOptions": {
   
   
    "target": "es2015",
    "lib": [
      "es2015"
    ],
    "module": "commonjs",
    "rootDir": "./",
    "allowJs": true,
    "isolatedModules": false,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}