浙江龙网

  1. 首页 > 生活百科 > >

从0搭建vue3组件库: 如何完整搭建一个前端脚手架?( 二 )

生活百科


从0搭建vue3组件库: 如何完整搭建一个前端脚手架?

文章插图
注意这里使用了es6的语法,所以需要将package.json中的type指定为module
接下来实战一些,检测用户输入--help指令,然后我们输出一个帮助的配置 。
首先安装command-line-usage
pnpm add command-line-usage -S首先引入commandLineUsage,然后写个配置
import commandLineUsage from 'command-line-usage';//帮助内容const helpSections = [{header: 'create-kitty',content: '一个快速生成组件库搭建环境的脚手架',},{header: 'Options',optionList: [{name: 'version',typeLabel: '{underline boolean}',description: '版本号',},{name: 'arg1',typeLabel: '{underline string}',description: '参数1',},{name: 'arg2',typeLabel: '{underline number}',description: '参数2',},],},];在command-line-args中配置个help命令,当获取到help的时候直接打印
const optionDefinitions = [{ name: 'help', alias: 'h', type: Boolean },{ name: 'version', alias: 'v', type: Boolean },{ name: 'arg1', type: String },{ name: 'arg2', type: Number },];const options = commandLineArgs(optionDefinitions);if (options.help) console.log(commandLineUsage(helpSections))
从0搭建vue3组件库: 如何完整搭建一个前端脚手架?

文章插图
但是这样好像不太好看 。这里可以借助chalk工具给打印加个颜色
pnpm add chalk -S我比较喜欢绿色,所以让控制台输出绿色的字体
import chalk from 'chalk';...if (options.help) console.log(chalk.green(commandLineUsage(helpSections)))
从0搭建vue3组件库: 如何完整搭建一个前端脚手架?

文章插图
当然它还有很多用法,感兴趣可以自己去研究 。到这里关于用户参数解析部分差不多就结束了,下面介绍如何实现交互式命令
交互式命令当我们使用脚手架时,有些会提示我们输入项目名称和选择模板等,比如执行npm create vite的时候
从0搭建vue3组件库: 如何完整搭建一个前端脚手架?

文章插图
如果只是简单交互可以通过node自带的process.stdin或者readline模块实现 。比如用readline实现一个简单的交互式命令
import readline from 'readline'...const rl = readline.createInterface({input: process.stdin,output: process.stdout,});rl.question('你是谁?', function (anwser) {console.log(`我是${anwser}`);//添加close事件，不然不会结束rl.close();});
从0搭建vue3组件库: 如何完整搭建一个前端脚手架?

文章插图
但是这里并不打算用原生的交互,而是使用prompts工具实现 。首先安装
pnpm add prompts -S然后模拟一个交互式表单,其中又输入文字,密码,单选,多选
import prompts from 'prompts'const promptsOptions = [{type: 'text',name: 'user',message: '用户'},{type: 'password',name: 'password',message: '密码'},{type: 'select',//单选name: 'gender',message: '性别',choices: [{ title: '男', value: 0 },{ title: '女', value: 1 }]},{type: 'multiselect', //多选name: 'study',message: '选择学习框架',choices: [{ title: 'Vue', value: 0 },{ title: 'React', value: 1 },{ title: 'Angular', value: 2 }]},]const getInputInfo = async () => {const res = await prompts(promptsOptions)console.log(res)}getInputInfo()然后执行看下效果
从0搭建vue3组件库: 如何完整搭建一个前端脚手架?

文章插图
我们拿到用户输入的表单即可执行相应的操作 。
拉取模板当我们获取到用户输入或选择的信息的时候,我们就可以输出对应模板给用户 。这里有两种选择,一种是直接将模板放在包里,另一种是远程拉取git仓库 。本篇文章暂时先介绍第二种方式
首先安装download-git-repo,使用它的clone方法
pnpm add download-git-repo -S然后安装一个loading插件ora
pnpm add ora -S写一个clone函数(这里便于文章讲解全都写在一个文件里,后续会进行模块的规划)
const gitClone = (remote, name, option) => {const downSpinner = ora('正在下载模板...').start();return new Promise((resolve, reject) => {download(remote, name, option, err => {if (err) {downSpinner.fail();console.log("err", chalk.red(err));reject(err);return;};downSpinner.succeed(chalk.green('模板下载成功！'));resolve();});});};

推荐阅读


上一篇：Paxos分布式系统共识算法？我愿称其为点歌算法…

下一篇：Springboot 一行代码实现文件上传 20个平台！少写代码到极致