fs-extra實(shí)現(xiàn)yarn?create?tlist創(chuàng)建示例詳解
1.引言
這一篇我們翻版一下 create-vite,將以后整理的項(xiàng)目模板集中管理,方便在需要的時(shí)候快速創(chuàng)建使用~
2. 利用fs-extra實(shí)現(xiàn)"yarn create tlist"創(chuàng)建項(xiàng)目
資源拷貝我們采用fs-extra模塊實(shí)現(xiàn)~
2.1 模板資源拷貝:
在模板資源拷貝時(shí)部分文件是需要我們特殊處理的,所以這部分文件在資源拷貝時(shí)就暫時(shí)過濾掉,fs-extra模塊中的copySync就提供了過濾文件的功能~
路徑匹配的時(shí)候我們可以使用path模塊中的parse函數(shù)轉(zhuǎn)為對(duì)象后可以更好的操作~
export const fileIgnore = ['package.json', '_gitignore'];
fsExtra.copySync(templateDir, targetDir, {
filter: (src, dest) => {
return !fileIgnore.find(
(f) => f === `${path.parse(src).name}${path.parse(src).ext}`
);
},
});
2.2 文本文件拷貝:
_gitignore文件需要再輸出時(shí)進(jìn)行重命名操作,但沒有找到可以直接實(shí)現(xiàn)重命名的函數(shù),所以就通過分別讀寫兩步實(shí)現(xiàn)。普通文本文件使用fs-extra模塊中的readFileSync讀取,在輸出到新文件名的文件中~
const gitignoreInfo = fsExtra.readFileSync( path.resolve(templateDir, "_gitignore") ); fsExtra.outputFile(path.join(root, ".gitignore"), gitignoreInfo);
2.3 JSON 文件拷貝:
package.json 讀取后我們需要重寫內(nèi)容后再輸出,fs-extra模塊中的readJsonSync函數(shù)可以直接讀取為 JSON 對(duì)象,我們?cè)谛薷膶?duì)象后再次通過outputJSONSync輸出 JSON 對(duì)象即可,在outputJSONSync提供的選項(xiàng)中指定spaces=2輸出非在一行的 JSON 文件~
const pkg = fsExtra.readJsonSync(path.resolve(templateDir, "package.json"));
pkg.name = packageName || getProjectName();
fsExtra.outputJSONSync(path.join(root, "package.json"), pkg, {
spaces: 2,
});
3. 總結(jié)
"yarn create tlist"的主要邏輯除去參數(shù)的收集以外就是模板的拷貝兩塊了,這里通過利用fs-extra實(shí)現(xiàn)了模板拷貝,fs-extra函數(shù)的支持還是挺不錯(cuò)的,拷貝文件還考慮到了支持過濾的功能,挺不錯(cuò)~
本文項(xiàng)目已推送至GitHub:
git clone git@github.com:OSpoon/create-tlist.git
以上就是fs-extra實(shí)現(xiàn)yarn create tlist創(chuàng)建示例詳解的詳細(xì)內(nèi)容,更多關(guān)于fs-extra創(chuàng)建yarn create tlist項(xiàng)目的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript嚴(yán)格模式use strict的介紹
這篇文章主要介紹了JavaScript嚴(yán)格模式use strict,嚴(yán)格模式是JavaScript中的一種限制性更強(qiáng)的變種方式。嚴(yán)格模式并不是JavaScript中的子集,它在語義上與正常的代碼有明顯的差異,下面我們就一起來學(xué)習(xí)該內(nèi)容吧,需要的朋友也可以參考一下2021-12-12
WebAssembly增強(qiáng)前端應(yīng)用技巧詳解
這篇文章主要為大家介紹了WebAssembly增強(qiáng)前端應(yīng)用技巧示例詳解,<BR>有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02
微信小程序報(bào)錯(cuò):this.setData is not a function的解決辦法
這篇文章主要介紹了微信小程序報(bào)錯(cuò):this.setData is not a function的解決辦法的相關(guān)資料,希望通過本文能幫助到大家解決這樣類似的問題,需要的朋友可以參考下2017-09-09
Javascript實(shí)現(xiàn)的分頁函數(shù)
Javascript實(shí)現(xiàn)的分頁函數(shù)...2006-12-12
javascript 操作cookies詳解及實(shí)例
這篇文章主要介紹了javascript 操作cookies詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-02-02
微信小程序本地緩存數(shù)據(jù)增刪改查實(shí)例詳解
這篇文章主要介紹了微信小程序本地緩存數(shù)據(jù)增刪改查實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-05-05
vue框架通用化解決個(gè)性化文字換行問題實(shí)例詳解
這篇文章主要為大家介紹了通用化解決個(gè)性化文字換行問題實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09

