vue3.0+ts打造企业级组件库（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 } }

在 cli 目录下创建 index.ts 文件作为入口：

#!/usr/bin/env node console.log(hello cli!)

该文件第一行不能省略

     

     

  ，这句话的意思是使用 node 来执行这个文件
  




  




  
，并且在 /use/bin/env 环境变量中去找 node 执行器   

   

  。

3.2 ts-node 执行 ts 文件

有了入口文件  


  


  


，怎么去执行它呢？当前 index.ts 中没有任何 TypeScript 语法 
     
     
 ，可以使用 node index.js 来执行

   




   




   ，但有 TypeScript 语法时 



 



 



，就需要 tsc 先编译 ts 文件            ，再使用 node 命令来执行     

     

     
。这样每次运行比较麻烦


    




    




    ，庆幸可以使用 ts-node 来执行




  




  




。

在 cli 目录下按照 ts-node 为开发依赖：

pnpm install ts-node -D

可以尝试在命令行中执行 ts-node index.ts
  


  


 。

直接这么执行不优雅













，优雅哥更宁愿在 cli 的 package.json 添加 scripts：

"scripts": { "gen": "ts-node ./index.ts create" },

在上面的 gen 命令中             ，添加了一个参数 create


     



     



    ，在后面会解析出这个参数     
     
     。

重新在命令行执行：

pnpm run gen

控制台能正常输出 hello cli!












，ts 文件可以正常执行 




   




   




。

3.3 源码目录

上面创建的 index.ts 是命令执行的入口   
    
    
，现在咱们在 cli 中创建 src 目录存放源码


     


     


   ，并在 src 中创建 index.ts 作为源码的入口 




 




 

，首先在该文件中定义一个入口函数：

src/index.ts：

export const mainEntry = () => { console.log(hello cli mainEntry) }

在外层的 index.ts 中（cli/index.ts）调用该函数：

#!/usr/bin/env node import { mainEntry } from ./src mainEntry()

执行 pnpm run gen 测试程序是否正常运行

 



 



。

3.4 参数解析

前面定义的 gen 命令携带了参数 create   

   

   

，要怎么解析出这个参数呢？可以使用 commander 库来完成               。

在 cli 中安装 commander：

pnpm install commander -D

修改 cli/src/index.ts 文件

     

     

  ，使用 commander 来解析参数：

import { program } from commander export const mainEntry = () => { console.log(hello cli mainEntry) program.version(require(../package).version) .usage(<command> [arguments]) program.command(create) .description(create a new component) .alias(c) .action(() => { console.log(创建组件) }) program.parse(process.argv) if (!program.args.length) { program.help() } }

如果直接执行 ts-node index.ts
  




  




  
，会输出命令使用帮助：

hello cli mainEntry Usage: index <command> [arguments] Options: -V, --version output the version number -h, --help display help for command Commands: create|c create a new component help [command] display help for command

执行 pnpm run gen （即 ts-node index.ts create）  


  


  


，则会进入 create 命令的 action 回调函数中：

hello cli mainEntry 创建组件

在 cli/src/ 目录下创建目录 command 
     
     
 ，并在该目录中创建 create-component.ts 文件

   




   




   ，该文件用于处理参数为 create 时执行的内容（即创建组件相关的目录文件等）：

export const createComponent = () => { console.log(创建新组建) }

该文件导出了函数 createComponent 



 



 



，该函数的内部实现逻辑咱们在下一篇文章实现            ，本文先将 cli 架子搭起来  




    




    



。

修改 cli/src/index.ts 文件


    




    




    ，首先引入 createComponent 函数













，然后在 create 命令的 action 中调用它：

... import { createComponent } from ./command/create-component export const mainEntry = () => { ... program.command(create) ... action(createComponent) ... }

执行 gen 命令时             ，就会调用到 createComponent 函数了












。

3.5 用户交互

在 createComponent 中


     



     



    ，首先要提示组件开发人员输入组件的名称
  




  




  
、中文名  


  


  


、组件类型（tsx 
     
     
 、vue）












，这时候可以使用 inquirer 来实现              。先在 cli 下安装依赖   
    
    
，为了省事


     


     


   ，咱把其他依赖一起安装了：

pnpm install chalk@4.1.2 inquirer@8.2.5 @types/inquirer@8.2.5 log-symbols@4.1.0 ora@5.4.1 shelljs @types/shelljs -D

接着在 create-component.ts 中定义交互提示和变量名：

import inquirer, { QuestionCollection } from inquirer // 交互提示 const questions: QuestionCollection = [ { name: componentName, message: Input the component name: , default: }, { name: description, message: Input the component description: , default: }, { type: list, name: componentType, message: Choose the component type: , choices: [ tsx, vue ] } ]

最后在 createComponent 函数中使用 inquirer 实现交互提示信息：

const createNewComponent = (componentName: string, description: string, componentType: string) => { console.log(componentName, description, componentType) } export const createComponent = () => { inquirer.prompt(questions).then(({ componentName, description, componentType }) => { createNewComponent(componentName, description, componentType) }) }

执行 pnpm run gen 运行效果如下：

到这里 




 




 

，组件库 cli 的架子咱们就搭建起来了   

   

   

，后面只需要实现 createNewComponent 函数即可

     

     

  ，在该函数中创建目录

   




   




   、文件 



 



 



、执行命令等   



     



     


。

3.6 美化日志

本文最后咱们玩点优雅的东西













。如果直接使用 console.log 输出
  




  




  
，只有黑白色  


  


  


，不优雅 
     
     
 ，咱可以使用 chalk 改变输出的文字的颜色

   




   




   ，并通过 log-symbols 加些图标    
    
   。首先在 src 下创建 util 目录 



 



 



，在该目录中创建 log-utils.ts 文件            ，用来封装优雅版的 console.log：

import chalk from chalk import logSymbols from log-symbols export const r = (msg: string, showIcon = true): void => { if (showIcon) { console.log(logSymbols.error, chalk.red(msg)) } else { console.log(chalk.red(msg)) } } export const g = (msg: string, showIcon = true): void => { if (showIcon) { console.log(logSymbols.success, chalk.green(msg)) } else { console.log(chalk.green(msg)) } } export const c = (msg: string): void => { console.log(logSymbols.info, chalk.cyan(msg)) }

该文件导出了 r            、g


    




    




    、c 三个函数


    




    




    ，其他文件使用时非常简便：

c(yyg-demo-ui cli 工具)

本文搭建好 cli 的架子













，下文将完成 createNewComponent 函数             ，实现组件创建的全过程    


     


     

。

感谢阅读


     



     



    ，公号同名“程序员优雅哥    
    
   ”




 




 




。