上一篇分享了组件库的开发、示例和组件库文档。本文分享组件库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使用pnpminstall安装1.1中创建的xxx；2.2在packages中在/xxx-ui/index.ts中引入xxx，并添加到components数组中；3packages/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接收输入Command，分析命令参数chalk4.1.2控制台输出文本颜色inquirer8.2.5命令行交互，提示用户在命令行输入，获取用户输入的内容log-symbols4.1.0控制台输出图标，如成功，失败等。statusora5.4.1在控制台显示loadingshelljs^0.8.5，执行cmd命令，如cd,pnpminstall等3搭建cli开发框架有了以上知识准备，接下来就是进入实际的cli了：3.1在命令行中初始化cli模块进入cli目录，依然使用pnpm初始化：pnpminitmodify生成的package.json文件名属性：{"name":"@yyg-demo-ui/cli","version":"1.0.0","description":"commandlinetool","author":"程序员优雅哥","license":"ISC"}创建一个ts配置文件tsconfig.jsoni在cli目录中：{"compilerOptions":{"target":"es2015","lib":["es2015"],"module":"commonjs","rootDir":"./","allowJs":真，“isolatedModules”：假，“esModuleInterop”：真，"forceConsistentCasingInFileNames":true,"strict":true,"skipLibCheck":true}}在cli目录下创建一个index.ts文件作为入口：#!/usr/bin/envnodeconsole.log('hellocli!')文件的第一行不能省略。这句话的意思是用node来执行这个文件，在/use/bin/env环境变量中找到node执行器。实施它呢？目前index.ts中没有TypeScript语法，可以使用nodeindex.js执行，但是当有TypeScript语法时，需要tsc先编译ts文件，然后使用node命令执行。这样每次都跑起来很麻烦。幸运的是，可以使用ts-node来执行它。在cli目录下使用ts-node作为开发依赖：pnpminstallts-node-D可以尝试在命令行执行ts-nodeindex.ts。直接执行这个并不优雅。亚哥宁愿在cli的package.json中添加脚本："scripts":{"gen":"ts-node./index.tscreate"}，在上面的gen命令中，添加一个参数create，将稍后解析出来。在命令行再次执行：pnpmrungenconsole可以输出hellocli！正常，ts文件可以正常执行。3.3在源代码目录之上创建的index.ts是命令执行的入口。现在我们在cli中创建src目录存放源码，并在src中创建index.ts作为源码入口。首先，在这个文件中定义一个入口函数：src/index.ts:exportconstmainEntry=()=>{console.log('helloclimainEntry')}在外层index.ts(cli/index.log)中调用这个函数。ts):#!/usr/bin/envnodeimport{mainEntry}from'./src'mainEntry()执行pnpmrungen测试程序是否正常运行。3.4参数分析上面定义的gen命令带有参数create，如何分析这个参数呢？这可以使用命令库来完成。在cli中安装commander：pnpminstallcommander-D修改cli/src/index.ts文件，使用commander解析参数：import{program}from'commander'exportconstmainEntry=()=>{console.log('helloclimainEntry')program.version(require('../package').version).usage('[arguments]')program.command('create').description('createanewcomponent')。alias('c').action(()=>{console.log('createcomponent')})program.parse(process.argv)if(!program.args.length){program.help()}}如果直接执行ts-nodeindex.ts，会输出命令使用帮助：helloclimainEntryUsage:index[arguments]Options:-V,--version输出版本号-h,--help显示帮助commandCommands:create|ccreateanewcomponenthelp[command]displayhelpforcommand执行pnpmrungen（即ts-nodeindex.tscreate），会进入create命令的action回调函数：helloclimainEntry在cli/创建目录命令中创建组件在src/目录下，并在该目录下创建一个create-component.ts文件，用于处理创建参数时执行的内容（即创建组文件相关的目录文件等）：exportconstcreateComponent=()=>{console.log('Createanewcomponent')}这个文件导出函数createComponent，这个函数的内部实现逻辑会在下一篇，本文先搭建cli架修改cli/src/index.ts文件，先引入createComponent函数，然后在create命令的action中调用：...import{createComponent}from'./command/create-component'exportconstmainEntry=()=>{...program.command('create')...action(createComponent)...}当执行gen命令时，createComponent函数会叫做。3.5用户交互在createComponent中，首先要提示组件开发者输入组件名称、中文名称、组件类型（tsx、vue）。这时候可以使用查询器来实现。首先安装cli下的依赖。为了省事，我们一起安装了其他依赖：pnpminstallchalk@4.1.2inquirer@8.2.5@types/inquirer@8.2.5log-symbols@4.1.0ora@5.4.1shelljs@types/shelljs-D然后在create-component.ts中定义交互式提示和变量名：importinquirer,{QuestionCollection}from'inquirer'//交互式提示constquestions:QuestionCollection=[{name:'componentName',message:'Inputthecomponentname:',default:''},{name:'description',message:'输入组件描述：',default:''},{type:'list',name:'componentType',message:'选择组件类型：',choices:['tsx','vue']}]最后在createComponent函数中使用查询器实现交互提示信息：constcreateNewComponent=(componentName:string,description:string,componentType:string)=>{console.log(componentName,description,componentType)}exportconstcreateComponent=()=>{inquirer.prompt(questions).then(({componentName,description,componentType})=>{createNewComponent(组件entName,description,componentType)})}执行pnpmrungen运行效果如下：="缩放：50%；"/>至此，我们就搭建好了组件库cli的架子。后面我们只需要实现createNewComponent函数即可。在此函数中创建目录、文件和执行命令。的东西。如果直接使用console.log输出，只有黑白色，不够雅致，我们可以使用chalk改变输出文字的颜色，通过log-symbols添加一些图标。首先在src下创建一个util目录，并在该目录下创建一个log-utils.ts文件封装优雅版的console.log：importchalkfrom'chalk'importlogSymbolsfrom'log-symbols'exportconstr=(msg:字符串,showIcon=true):void=>{if(showIcon){console.log(logSymbols.error,chalk.red(msg))}else{console.log(chalk.red(msg))}}exportconstg=(msg:string,showIcon=true):void=>{if(showIcon){console.log(logSymbols.success,chalk.green(msg))}else{console.log(chalk.green(msg))}}exportconstc=(msg:string):void=>{console.log(logSymbols.info,chalk.cyan(msg))}这个文件导出r,g,c三个函数，其他文件很方便：c('yyg-demo-uiclitool')本文搭建cli架子，下面会完成createNewComponent函数，实现组件创建的全过程。
