从0搭建vue3组件库: 如何完整搭建一个前端脚手架?( 三 ) _生活百科

文章插图
但是这里并不打算用原生的交互,而是使用prompts工具实现。首先安装
pnpm add prompts -S【从0搭建vue3组件库: 如何完整搭建一个前端脚手架?】然后模拟一个交互式表单,其中又输入文字,密码,单选,多选

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()

然后执行看下效果

文章插图
我们拿到用户输入的表单即可执行相应的操作。
拉取模板当我们获取到用户输入或选择的信息的时候,我们就可以输出对应模板给用户。这里有两种选择,一种是直接将模板放在包里,另一种是远程拉取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();});});};

定义远程仓库模板列表以及分支并且对项目名称进行一些校验,然后在获取到用户选择信息后执行gitclone

const remoteList = {1: "https://gitee.com/geeksdidi/kittyui.git",2: 'xxx'}const branch = 'master'const getInputInfo = async () => {const res = await prompts(promptsOptions)if (!res.name || !res.template) returngitClone(`direct:${remoteList[res.template]}#${branch}`, res.name, { clone: true })}getInputInfo()

然后增加一些个性化校验

const promptsOptions = [{type: 'text',//单选name: 'name',message: 'project-name',validate(val) {if (!val) return '模板名称不能为空！';if (fs.existsSync(res.name)) return '项目名已存在'if (val.match(/[^A-Za-z0-9\u4e00-\u9fa5_-]/g)) return '模板名称包含非法字符，请重新输入';return true;}},{type: 'select',//单选name: 'template',message: 'select a framework',choices: [{ title: 'kitty-ui', value: 1 },{ title: 'kitty-demo', value: 2 }]}]

最后看下执行效果

文章插图
clone成功后加上提示告知用户如何使用,然后进行发布

const gitClone = (remote, name, option) => {const loadingOra = ora('正在下载模板...').start();return new Promise((resolve, reject) => {download(remote, name, option, err => {if (err) {loadingOra.fail();console.log("err", chalk.red(err));reject(err);return;};loadingOra.succeed(chalk.green('success'));console.log(`Done. Now run:\r\n`);console.log(chalk.green(`cd ${name}`));console.log(chalk.blue("npm install"));console.log("npm run dev\r\n");resolve();});});};

发布一般来说发布前要进行打包生成commonjs以支持低版本node,这里暂时不进行打包操作,直接执行