腳手架工具就是在啟動它之后自動詢問一些預(yù)設(shè)的問題星岗,然后將回答的結(jié)果結(jié)合一些模板文件生成一個項目的結(jié)構(gòu)
通過node.js開發(fā)一個小型的腳手架工具
腳手架工具就是一個cli應(yīng)用填大,創(chuàng)建腳手架工具就是創(chuàng)建一個cli的應(yīng)用
#?步驟
mkdir?sample-scaffolding
cd?sample-scaffolding
yarn?init?-y
code?.???//此命令打開package.json這個文件
#?package.json文件中添加一個bin字段
"bin":"cli.js",用于指定cli應(yīng)用的入口文件
然后添加cli.js這個文件
#?文件內(nèi)容
#?#!/usr/bin/env?node?此處內(nèi)容不需要加
console.log('cli?working')
#?yarn?link?到全局、
yarn?link
#?此時在命令行中去使用sample-scaffolding這個命令
控制臺打印
則意味著cli應(yīng)用的基礎(chǔ)就完成了
####?若不成功
則需要加入一下引用(作用就是可以被當(dāng)成一個命令執(zhí)行,?而不用?node??cli.js?這樣執(zhí)行)
#!/usr/bin/env?node
#####?//?Node?CLI?應(yīng)用入口文件必須要有這樣的文件頭
#?安裝inquirer模塊?可以幫我們發(fā)起命令行詢問
yarn?add?inquirer
#?安裝ejs模塊俏橘,模板引擎
yarn?add?ejs
cli.js
#!/usr/bin/env?node
//?Node?CLI?應(yīng)用入口文件必須要有這樣的文件頭
//?如果是?Linux?或者?macOS?系統(tǒng)下還需要修改此文件的讀寫權(quán)限為?755
//?具體就是通過?chmod?755?cli.js?實現(xiàn)修改
//?腳手架的工作過程:
//?1.?通過命令行交互詢問用戶問題
//?2.?根據(jù)用戶回答的結(jié)果生成文件
const?fs?=?require('fs')
const?path?=?require('path')
const?inquirer?=?require('inquirer')
const?ejs?=?require('ejs')
inquirer.prompt([
??{
????type:?'input',
????name:?'name',
????message:?'Project?name?'
??}
])
.then(anwsers?=>?{
??//?console.log(anwsers)
??//?根據(jù)用戶回答的結(jié)果生成文件
??//?模板目錄
??const?tmplDir?=?path.join(__dirname,?'templates')
??//?目標(biāo)目錄
??const?destDir?=?process.cwd()
??//?將模板下的文件全部轉(zhuǎn)換到目標(biāo)目錄
??fs.readdir(tmplDir,?(err,?files)?=>?{
????if?(err)?throw?err
????files.forEach(file?=>?{
??????//?通過模板引擎渲染文件
??????ejs.renderFile(path.join(tmplDir,?file),?anwsers,?(err,?result)?=>?{
????????if?(err)?throw?err
????????//?將結(jié)果寫入目標(biāo)文件路徑
????????fs.writeFileSync(path.join(destDir,?file),?result)
??????})
????})
??})
})
#?templates文件夾下為需要批量生成的文件
###?測試允华,執(zhí)行命令
cd?..
mkdir?demo-sample
cd?demo-sample
sample-scaffolding
#?根據(jù)提示交互信息輸入name,然后去demo-sample文件夾下查看,模板文件已生成
中途出現(xiàn)的問題:?
sample-test : 無法將“sample-test”項識別為 cmdlet寥掐、函數(shù)靴寂、腳本文件或可運行程序的名稱。請檢查名稱的拼寫召耘,如果包括路徑百炬,請確保路徑正確,然后再試一次污它。
所在位置 行:1 字符: 1
+ sample-test
+ ~~~~~~~~~~~
? ? + CategoryInfo? ? ? ? ? : ObjectNotFound: (sample-test:String) [], CommandNotFoundException
? ? + FullyQualifiedErrorId : CommandNotFoundException
解決途徑:?https://blog.csdn.net/weixin_45047039/article/details/109851573
解決yarn link將cli模塊鏈接全局后無法使用的問題
當(dāng)我們創(chuàng)建了一個cli模塊后剖踊,使用yarn link 將其鏈接全局,成功會有如下提示:
但是使用這個命令時卻會報錯
大概率時環(huán)境變量中沒有配置yarn的全局變量文件
首先衫贬,通過yarn global bin查看yarn的全局變量文件德澈,例如我這里是:
然后右擊我的電腦—>屬性—>高級系統(tǒng)設(shè)置—>環(huán)境變量—>系統(tǒng)變量—>Path
? ??
將剛才拿到的yarn全局變量地址添加進去即可。
注意:如果設(shè)置之前打開了命令行窗口固惯,此時直接輸入yarn中的全局命令依舊不行梆造,需要開啟新的命令行窗口,包括VScode中的命令行工具缝呕,需要重啟VScode才行澳窑。
————————————————
版權(quán)聲明:本文為CSDN博主「火雞面多放火雞」的原創(chuàng)文章,遵循CC 4.0 BY-SA版權(quán)協(xié)議供常,轉(zhuǎn)載請附上原文出處鏈接及本聲明摊聋。
原文鏈接:https://blog.csdn.net/weixin_45047039/article/details/109851573