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

定义远程仓库模板列表以及分支并且对项目名称进行一些校验,然后在获取到用户选择信息后执行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,这里暂时不进行打包操作,直接执行pnpm publish即可完成发布(注意,pnpm发布时需要先将代码提交到远程仓库) 。
使用随便新建文件夹然后执行npm init kitty或者npm create kitty

文章插图
同时文件中出现了我们的模板文件

文章插图
总结本篇文章介绍了如何使用pnpm搭建Monorepo环境以及本地开发包的测试。同时讲解了如何使用command-line-args,download-git-repo,prompts等工具的使用,最终实现了一个交互式的命令行的脚手架create-kitty 。
后面会对create-kitty进行完善,让它成为一个可以快速搭建vue3组件开发环境的脚手架,如果你对组件库开发感兴趣的话,可以关注我或者我的公众号 web前端进阶,组件库的所有实现细节都在这个里。