項(xiàng)目開(kāi)發(fā)中husky的使用詳解
前言
在做個(gè)人項(xiàng)目的時(shí)候遇到一個(gè)需求，要在編完代碼之后代碼提交之前生成一個(gè)預(yù)覽文件，手動(dòng)執(zhí)行腳本難免會(huì)遺漏。然后就想到之前在工作中使用過(guò)的husky，正好拿過(guò)來(lái)用一用；
husky是什么？
husky是一個(gè)給git增加 hooks 工具
打開(kāi)文檔發(fā)現(xiàn)husky的版本已經(jīng)更新到8.x了，這時(shí)候就照著新的步驟來(lái)一遍：
npm install husky --save-dev // 安裝husky
npm pkg set scripts.prepare="husky install" // 在package.json的scripts字段中添加prepare鉤子，使用npm install的時(shí)候會(huì)自動(dòng)執(zhí)行 npm run prepare 相當(dāng)于執(zhí)行husky install, 優(yōu)化了初始化流程 // 需要注意的是，npm pkg set是 npm v7才有的命令，如果不支持就手動(dòng)添加，也挺簡(jiǎn)單。
npx husky add .husky/pre-commit "npm run xxx" // 創(chuàng)建hook，執(zhí)行之后會(huì)在項(xiàng)目的目錄中添加.husjy目錄，并增加pre-commit鉤子，鉤子中會(huì)添加一段腳本；接下來(lái)就要手動(dòng)添加其他命令，比如我增加了如下代碼
npm run generate git add .
如此在提交代碼之前就先執(zhí)行g(shù)enerate命令，然后使用git add .將代碼添加到git倉(cāng)庫(kù)的緩存區(qū)，最后會(huì)跟隨著項(xiàng)目代碼一起提交到代碼倉(cāng)庫(kù)。
舊版本v4和當(dāng)前版本的區(qū)別
在4.x之前，安裝husky過(guò)程中它會(huì)自動(dòng)在.git/hooks目錄下增加一系列的鉤子，每個(gè)鉤子里都有調(diào)用husky的程序。當(dāng)git操作的時(shí)候觸發(fā)git鉤子就會(huì)自動(dòng)調(diào)用husky程序，然后按照package.json的配置執(zhí)行程序。( husky 版本≤4.x 在package.json中增加配置)
{
"husky": {
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS" // commit-msg是git hook
}
},
}
在4.x之后，有所變化，安裝過(guò)程不會(huì)在.git/hooks目錄下創(chuàng)建鉤子，而是會(huì)修改.git/config 文件：增加hooksPath字段。然后按照需求手動(dòng)來(lái)增加hook，比如執(zhí)行npx husky add .husky/pre-commit "npm test"會(huì)增加一個(gè)鉤子，同時(shí)在項(xiàng)目根目錄自動(dòng)創(chuàng)建的.husky/pre-commit文件。
新版本的優(yōu)點(diǎn)是不需要在package.json配置，畢竟package.json是不能寫注釋的，可讀性要差許多，代碼靈活性也差許多。
以上就是項(xiàng)目開(kāi)發(fā)中husky的使用詳解的詳細(xì)內(nèi)容，更多關(guān)于項(xiàng)目開(kāi)發(fā)husky使用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
凡事有好就又壞，想必大家都知道Vue的作用與優(yōu)點(diǎn)，但是使用的規(guī)程中也總是有很多問(wèn)題，接下來(lái)小編就來(lái)向大家講解使用Vue時(shí)應(yīng)注意的一些問(wèn)題，希望能幫助到大家2021-09-09
這篇文章主要介紹了Vue中使用mixins混入方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue列表數(shù)據(jù)刪除后主動(dòng)刷新頁(yè)面及刷新方法詳解
這篇文章主要給大家介紹了關(guān)于vue列表數(shù)據(jù)刪除后主動(dòng)刷新頁(yè)面及刷新方法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
Vue之解決Echarts組件使用ID不能復(fù)用的問(wèn)題
這篇文章主要介紹了Vue之解決Echarts組件使用ID不能復(fù)用的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
詳解vue微信網(wǎng)頁(yè)授權(quán)最終解決方案
這篇文章主要介紹了 詳解vue微信網(wǎng)頁(yè)授權(quán)最終解決方案，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06
這篇文章主要為大家詳細(xì)介紹了Vue3批量異步更新是如何實(shí)現(xiàn)的，文中的示例代碼簡(jiǎn)潔易懂，具有一定的借鑒價(jià)值，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-08-08
這篇文章主要介紹了Vue文本模糊匹配功能如何實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
這篇文章主要給大家介紹了關(guān)于Vue+element-ui添加自定義右鍵菜單的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
vue 實(shí)現(xiàn)模糊檢索并根據(jù)其他字符的首字母順序排列
這篇文章主要介紹了vue 實(shí)現(xiàn)模糊檢索，并根據(jù)其他字符的首字母順序排列,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09
antd中table展開(kāi)行默認(rèn)展示,且不需要前邊的加號(hào)操作
這篇文章主要介紹了antd中table展開(kāi)行默認(rèn)展示,且不需要前邊的加號(hào)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11