chen
在現代的前端開發中，建立一個健壯且可維護的專案結構是非常重要的。Husky 是一個非常實用的工具，它能夠幫助我們自動化一些常見的工作流程，例如預先執行檢查（pre-commit）或提交前驗證（pre-push）。以下將詳細說明如何使用 Husky 來規範前端項目的搭建。
安裝 Husky
首先，你需要在你的專案根目錄下安裝 Husky 和它的兩個主要依賴：`lint-staged` 和 `pretty-quick`。這三個工具通常一起使用以達到最佳效果。你可以透過以下命令進行安裝：
npm install husky lint-staged pretty-quick --save-dev
# 或者使用 yarn:
yarn add husky lint-staged pretty-quick -D
配置 Husky
接下來，你需要編輯你的 `package.json` 檔案並加入幾個對應的腳本（scripts）和 Husky 的配置。以下是一些基本的配置示例：
{
"name": "your-project-name",
"version": "1.0.0",
"husky": {
"hooks": {
"pre-commit": "lint-staged && npm run test",
"pre-push": "npm run build"
}
},
"scripts": {
"test": "jest",
"build": "webpack --mode production",
"format": "prettier --write 'src/**/*.js'"
},
"lint-staged": {
"*.js": [
"eslint src/",
"git add"
]
}
}
在上面的例子中，我們定義了兩種類型的 Hooks：
- pre-commit：這個 hook 在每次提交之前會被觸發。這裡我們使用了 `lint-staged` 來只運行與已變更的文件相關的任務，比如 ESLint 檢查。然後我們還呼叫了 `npm run format` 來確保所有的代碼都符合一致的風格。最後，`git add` 指令用於更新暫存區。
- pre-push: 這個 hook 在每次推送之前被觸發。這裡我們設置了一個任務來打包整個應用程式到生產環境模式，這樣可以確保在部署之前應用程式的構建是正確的。
擴展功能
隨著項目的發展，你可能需要添加更多的檢查和任務到你的工作流中。例如，你可能想要在提交之前測試你的單元測試套件，或者在部署之前生成一份靜態分析報告。這些都可以通過 Husky 的靈活配置實現。
此外，Husky 不僅限於上述提到的 hook，它支持許多其他的有用事件，如 `prepare-commit-msg`、`commit-msg` 等。你可以根據自己的需求定製這些事件的行為。
小結
總而言之，使用 Husky 可以使前端項目更加健壯和易於維護。它可以幫助團隊保持高標準的代碼質量，並且減少潛在的人為錯誤。無論你是作為個人還是團隊的一部分進行前端開發，Husky 都是一個值得擁有的寶貴工具。
請注意，本文旨在提供一個基本的概念性指南。實際操作時可能需要根據具體情況調整配置。建議參考官方文檔和社區資源以獲得更多關於 Husky 的資訊和使用技巧。
