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

推薦閱讀