การใช้ Git Hook: Pre-Commit และ Pre-Push ใน React Project
ในการพัฒนาซอฟต์แวร์ สิ่งหนึ่งที่ช่วยให้การ Coding ในทีม Develop เป็นไปในแนวทางเดียวกัน คือ การกำหนด Coding Standard และการทำ Unit Test
ในส่วนของ React Project, ทีม Developer ส่วนหนึ่งจะใช้ eslint ในการช่วยตรวจสอบ Coding Standard, และใช้ jest ในการทำ Unit Test
ปกติ Developer จะรับผิดชอบงานส่วนของตน ในการ Coding และ Test ให้ตรงตามข้อตกลงร่วมกันของทีม, แต่หากมีการทำงานเร่งด่วน อาจหลงลืมในส่วนนี้ และรีบ Commit/Push งานขึ้น Git
การใช้ Git Hook ร่วมกับ husky ช่วยแก้ปัญหานี้ได้ ซึ่งมีการ Setup ไม่ยุ่งยาก
สร้าง React Project ด้วยคำสั่ง create-react-app
create-react-app fun-with-git-hooks
cd fun-with-git-hooksลง husky ในส่วน Development Dependency
npm install husky --save-devในการทำ Test จะใช้ cross-env เพิ่ม ใน Development Dependency เพื่อกำหนด Environment Configuration ของ CI ที่จะ Test
npm install cross-env --save-devสุดท้าย แก้ไขไฟล์ package.json ดังนี้
- แก้ไข
jestให้ทำการ Test ใน Environment ของ CI - เพิ่มคำสั่ง “lint” เพื่อสั่งให้ lint ทำการตรวจสอบ
- เพิ่มการตั้งค่าส่วน
huskyในส่วนของ Git Hook: “pre-commit” และ “pre-push”
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "cross-env CI=true react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"lint": "eslint src"
},
"husky": {
"hooks": {
"pre-commit": "npm run lint && npm test",
"pre-push": "npm run lint && npm test"
}
}เพียงเท่านี้ Code ก่อนที่จะ Commit/Push ขึ้น Git ก็จะถูกตรวจสอบและทดสอบจาก eslint และ jest
ขอบคุณครับ ^^
