Frontend Academy · บทเรียน

การแตกแขนง: branch, checkout และ merge

สร้างแขนงสำหรับฟีเจอร์ สลับไปมาระหว่างแขนง รวมแขนงกลับเข้า main และแก้ข้อขัดแย้งจากการรวมแบบง่าย

บทเรียน 2 จาก 413 ขั้นตอน

การแตกแขนง: branch, checkout และ merge เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดจึงต้องใช้สาขา

สาขาช่วยให้พัฒนาฟีเจอร์หลายรายการและแก้ไขข้อบกพร่องได้พร้อมกันโดยไม่รบกวนกัน สาขาหลัก (หรือสาขาแม่แบบ) ยังคงเสถียร ขณะที่งานที่กำลังดำเนินการอยู่จะอยู่ในสาขาฟีเจอร์

การแสดงรายการและสร้างสาขา

git branch แสดงรายการสาขา git branch name สร้างสาขาใหม่ สาขาใหม่จะเริ่มต้นจากคอมมิตปัจจุบัน

git branch             # list all branches
git branch feature/auth # create a new branch
git branch -d feature/auth # delete merged branch

การสลับสาขา

git checkout branchname สลับไปยังสาขาที่มีอยู่ git checkout -b branchname สร้างและสลับสาขาในขั้นตอนเดียว คำสั่งสมัยใหม่ที่เทียบเท่ากันคือ git switch

git checkout main           # switch to main
git checkout feature/auth   # switch to existing branch
git checkout -b hotfix/nav  # create + switch

# Modern (git 2.23+):
git switch main
git switch -c feature/auth

ลำดับการทำงานกับสาขาทั่วไป

1) สลับไปยังสาขาหลัก 2) ดึงข้อมูลล่าสุด 3) สร้างสาขาฟีเจอร์ 4) สร้างคอมมิต 5) ผสานกลับเข้าสาขาหลัก 6) ลบสาขาฟีเจอร์

git switch main
git pull
git switch -c feature/dark-mode
# ... make commits ...
git switch main
git merge feature/dark-mode
git branch -d feature/dark-mode

การผสานสาขา

git merge branchname นำการเปลี่ยนแปลงจากสาขาที่ระบุชื่อมารวมเข้ากับสาขาปัจจุบัน Git จะพยายามผสานให้โดยอัตโนมัติ การผสานแบบเลื่อนไปข้างหน้าจะเกิดขึ้นเมื่อประวัติต่อเนื่องและไม่มีความขัดแย้ง

git switch main
git merge feature/auth
# Fast-forward: no merge commit if history is linear

คอมมิตการผสาน

เมื่อสาขาทั้งสองแยกเส้นทางกัน Git จะสร้างคอมมิตการผสานที่มีคอมมิตต้นทางสองรายการ วิธีนี้จะรักษาประวัติทั้งหมดของแนวทางการพัฒนาทั้งสองสายไว้

ความขัดแย้งในการผสาน

เมื่อมีการเปลี่ยนแปลงไฟล์เดียวกันในทั้งสองสาขา Git จะผสานโดยอัตโนมัติไม่ได้และจะทำเครื่องหมายความขัดแย้งไว้ คุณแก้ไขไฟล์เพื่อจัดการความขัดแย้ง จากนั้นจึงสร้างคอมมิต

<<<<<<< HEAD
const COLOR = 'blue';
=======
const COLOR = 'red';
>>>>>>> feature/theming

// After resolving:
const COLOR = 'navy'; // your decision

git add styles.css
git commit

git rebase — ประวัติเส้นตรง

git rebase main นำคอมมิตของสาขาคุณมาเล่นซ้ำต่อจากสาขาหลักล่าสุด ทำให้ได้ประวัติเส้นตรงโดยไม่มีคอมมิตการผสาน ใช้กับสาขาฟีเจอร์ก่อนผสาน และหลีกเลี่ยงการจัดประวัติใหม่ให้กับสาขาที่ใช้ร่วมกัน

git switch feature/auth
git rebase main  # replay commits on top of current main

HEAD — ตำแหน่งปัจจุบันของคุณ

HEAD เป็นตัวชี้ไปยังปลายสาขาปัจจุบัน (หรือคอมมิตเฉพาะรายการในสถานะ HEAD แบบแยก) git log แสดงตำแหน่งของ HEAD HEAD~1 คือคอมมิตก่อนหน้า และ HEAD~3 คือคอมมิตที่ย้อนกลับไปสามลำดับ

การเก็บงานที่กำลังดำเนินการไว้ชั่วคราว

git stash บันทึกการเปลี่ยนแปลงที่ยังไม่ได้คอมมิตและย้อนกลับไปยังพื้นที่ทำงานที่สะอาด ใช้เมื่อคุณต้องการสลับสาขาโดยไม่ต้องคอมมิตงานที่ยังไม่เสร็จ git stash pop จะคืนการเปลี่ยนแปลงเหล่านั้น

git stash           # save WIP
git switch hotfix/urgent
# ... fix and commit ...
git switch feature/auth
git stash pop       # restore WIP

หลักการตั้งชื่อสาขา

รูปแบบที่พบบ่อย ได้แก่ feature/feature-name, fix/bug-description, hotfix/critical-fix และ chore/dependency-update การตั้งชื่ออย่างสม่ำเสมอทำให้รายการสาขาอ่านง่าย

ตรวจสอบอย่างรวดเร็ว

คำสั่งใดสร้างสาขาใหม่ และ สลับไปยังสาขานั้นในขั้นตอนเดียว

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป: การใช้สาขาใน Git

git branch ใช้สร้างสาขา git checkout/switch ใช้เปลี่ยนสาขา git merge ใช้ผสานสาขา แก้ความขัดแย้งด้วยการแก้ไขบล็อกเครื่องหมาย git stash ใช้บันทึก WIP git rebase ใช้สร้างประวัติเส้นตรง ใช้สาขาฟีเจอร์กับงานใหม่ทั้งหมด และรักษาสาขาหลักให้เสถียร ลบสาขาที่ผสานแล้วเพื่อให้รายการเป็นระเบียบ

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 41
บทเรียน: 163

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “การแตกแขนง: branch, checkout และ merge” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การแตกแขนง: branch, checkout และ merge” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การแตกแขนง: branch, checkout และ merge”

สร้างแขนงสำหรับฟีเจอร์ สลับไปมาระหว่างแขนง รวมแขนงกลับเข้า main และแก้ข้อขัดแย้งจากการรวมแบบง่าย คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “การแตกแขนง: branch, checkout และ merge” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Frontend Academy