從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前端進階,組件庫的所有實現細節都在這個里。