Git การใช้งานและเกม RxJS part 1

9 min readFeb 23, 2020

พวกเราใช้ Git เป็นผู้จัดการไฟล์ในชีวิตประจำวัน แต่หลายครั้งก็คุยกับ Git ไม่รู้เรื่อง บทความนี้นำเสนอการพัฒนาเกม Space Invaders ด้วย RxJS โดยเน้นไปที่การทำงานกับ Git

แล้ว GitKraken หายไปไหน?

ไม่หายไปไหนหรอก เบื่อนางเป็นบางเวลาน่ะ

เราเคยเขียนบทความแนวนี้มาหนหนึ่งแล้ว อยากอ่านก็อันนี้

Git and Gitkraken เปรียบเทียบคำสั่งและการทำงาน part 1

มีโอกาสได้ใช้ Git บน Terminal กับ Command Line มาสักพัก ส่วน Tool ที่ใช้กับ Git คือ Sourcetree มีคนบอกว่า Gitkraken…

medium.com

ก็ไม่รู้จะมี part 2, 3 ตามมาหรือเปล่านะ พักนี้เราอยากมุ้งมิ้งนิดนุง

เราเขียนเราก็นึกถึงมือใหม่ก่อน มือเก๋าเราไม่ยุ่งผ่านไป อย่าว่าเราเพราะว่าเราอยากมุ้งมิ้งนิดนุง

เข้าเรื่องเลยแล้วกัน (เออ เอาสักที)

Git มองไฟล์ของมันเป็นภาพ

แต่ละ commit ก็คือหนึ่งภาพ

แต่ละ commit จะมีกี่ไฟล์ก็ได้

มีเป็นร้อยไฟล์แล้ว commit ในครั้งเดียว Git ก็เข้าใจ

แต่อย่าทำเลย คิดว่าสงสารตัวเอง เจอเราเราตบ (ว้ายผู้ชาย~ ก็จะเจอหอมแก้มแทนนะจ๊ะ) คือถ้า commit เดียวแต่ไฟล์เยอะพอมาไล่ย้อนหลังนี้ลำบากลูก(กะ)ตามาก ตัดสินใจนาน ดังนั้นทำหนึ่ง commit ให้มีไฟล์น้อยๆ เป็นพวกที่มีความสัมพันธ์กันในเรื่องเดียวกันจะดีกว่า เอาใจไปเลยคร้า~!

Git มันก็มีเรื่องของมัน มี stage ของมัน มีความเข้าใจของมัน ถ้าเราพูดกับมันไม่รู้เรื่องก็จะหงุดหงิดหนักมาก

Intro มา!

https://ya-webdesign.com/image/branch-clipart-png

ต้องบอกก่อนว่าจะให้รู้จักไฟล์ไหนบ้าง ใช้คำสั่ง add
ต้องบอกก่อนว่าจะไม่ให้รู้จักไฟล์ไหนบ้าง เขียนคำสั่งใน gitignore
เสร็จแล้วรวมกลุ่มได้หรือ save ลง Git ใช้ commit
พอรู้จักไปแล้วแต่เอ๊ะ!ไม่อยาก commit รวมกลุ่มกับไฟล์นั้นไฟล์นี้ ต้องยกเลิกด้วย reset
แยก env (environment) ออกเป็น master, dev, uat, prod ได้นะ ตกลงกันเอง Git เรียกสิ่งนี้ว่า branch
แต่ละ branch ยังสามารถแยกย่อยออกได้อีก เช่นในทีมมีโปรแกรมเมอร์ 3 คน ทุกคนได้รับของจาก dev branch ทุกคนแยกย่อย dev branch ได้มากตามต้องการ จะทำ featrue หรือ fix bug ก็ว่ากันไป
ในบางทีเราต้องเลือกหยิบบาง commit ที่ใช้ได้มาใช้ด้วย เรียกว่า cherry pick
บอก Git เมื่อต้องการรวม branch ย่อยๆเข้า branch หลักด้วย merge
branch ย่อยใดถูก merge หรือไม่ใช้งานแล้วก็ลบทิ้งได้ด้วย branch -d
และบางที dev branch มีความผิดพลาดแถมต้องแก้ไขเร่งด่วนยังสามารถบอก Git ให้ checkout ไป ณ commit ที่ต้องการนั้นได้ สร้าง branch ย่อยใหม่แล้วจัดการปัญหาให้เรียบร้อย
Git เป็นเพื่อนและเก็บทุกอย่างไว้ให้เสมอตราบใดที่ commit
folder ชื่อ .git อย่าได้เผลอลบไป นั่นหมายความว่าเพื่อนยากได้หายไปจากชีวิตแล้ว
.git เรียกอีกอย่างว่า repository ที่เก็บไฟล์ของเรา
repository สามารถสร้างได้เองจากคำสั่ง init และมีจำนวนมากในอินเตอร์เน็ตซึ่งแชร์จากเพื่อนๆของเรา
เราสามารถเคลื่อนย้าย (ทำสำเนา) repository ไปยังแหล่งอื่นๆได้ด้วย push
การจะบอก Git ให้ push ก็ต้องระบุปลายทางเสียก่อนโดยคำสั่ง remote
อ่อ หรืออยากคัดลอก (ทำสำเนา) repository ของชาวบ้าน อุ้ย! ของเพื่อนๆของเราก็บอก Git ไปว่า pull
ลืมไม่ได้เลยเพื่อจะดูสายพัฒนาการของเรา อย่างน้อยนี่ก็เป็น UI สวยเท่าที่ command line หรือ terminal ให้ได้ ใช้คำสั่ง log
อื่นๆก็จะหามาเล่นเพิ่มภายหลัง ตามมาเลยครับ

ติดตั้ง Git & Sourcetree

Git ตรงไปยัง

Downloads

Git comes with built-in GUI tools ( git-gui, gitk), but there are several third-party tools for users looking for a…

git-scm.com

Sourcetree ตรงไปยัง

Sourcetree | Free Git GUI for Mac and Windows

As our new Bitbucket space station administrator, you need to be organized. When you make files for your space station…

www.sourcetreeapp.com

อย่างที่เพื่อนๆหลายคนเข้าใจมาบ้างแล้ว พื้นฐานก็คือ Git ส่วน Sourcetree เป็นแค่เครื่องมือ (tool) เพื่อช่วยให้ใช้ Git ได้ง่ายขึ้น (ถ้ามันไม่มี bug นะ ฮี่ๆ)

เรามาเริ่มต้นอย่างง่ายที่สุดก่อน เราจะสร้าง folder ว่างเปล่าขึ้นมาจากนั้น init Git เข้าไป นี่เป็นเพียงตัวอย่าง ผมตั้งชื่อ folder นี้ว่า

Space Invaders

ทีนี้ผมใช้ command line หรือ terminal เปิดเข้าไปด้านใน Space Invaders

terminal ตัวนี้คือ iterm ที่ปรับแต่ง ui แค่นั้น

แล้วกำหนด Git ขึ้นมา

git init

มันจะสร้าง .git ขึ้นมาและโดยทั่วไปจะถูกซ่อนไว้

Git จะดูแลทุกไฟล์ที่เกิดขึ้นใน folder นี้ตั้งแต่บัดนี้จวบจนมันจะถูกลบทิ้งเสียเอง

เพื่อนๆจะสังเกตเห็นว่า branch แรกที่ Git มอบให้คือ master เบื้องต้นขอให้จินตนาการว่ามันเป็นเหมือนกับ timeline ดูตัวอย่าง

timeline: http://www.cu.co.th/about-us/cu-timeline/

คราวนี้เราใช้ Sourcetree มาเปิดเจ้า .git นี้ครับ

มา เรามาสร้างไฟล์แรกกัน

ผมอยากสร้างเกมขึ้นมาด้วยภาษา javascript ตอนนี้ผมก็สนใจ Reactive Extensions For JavaScript (RxJS) อยู่ด้วย เรามาเริ่มพร้อมกันเลยเป็นไง เน้นว่าหัวใจคือ Git บน Sourcetree

และขอเพิ่มความสนุกด้วยตัวละครใหม่ 3 คนดังนี้

Odin
Sven
Reona

https://www.pinterest.com/pin/439101032392658622/

“กะอีแค่ Sourcetree ถึงกับต้องเรียกข้ามาเทียวรึ?”

คือจะขอมาช่วยเขียนโค้ดน่ะ

“ข้าคือ Odin นะ!ไม่ใช่โปเกม่อนอย่างเจ้า! นามข้ายิ่งใหญ่ใช่เจ้าจะหยิบมาเล่นสนุกได้”

คือคืนก่อนทำโปรเจกต์แล้ว rollback ไม่เป็นน่ะ commit มันเยอะก็เลย-

“สิ่งนั้นเจ้าต้องจัดการเองไม่ใช่รึ ใช่หน้าที่ข้าไหม คิดสิ!”

คือผะผมผิดไปแล้วค๊าบบบ นะแม่ทรงโตช่วยไล่กวดและโปรดข้าน้อยทีเถอะ (พร้อมนั่งกราบอย่างงดงาม)

“เจ้าลองไปถาม Sven มันเอาด้วยไหม”

https://www.deviantart.com/g-tale/art/Sven-Dota-fanart-600471511

พี่สาวครับ คือว่า

“ข้าได้ยินแล้ว จะยืมมือข้าไปช่วยงานของเจ้าสินะ เอาอย่างนี้ดีกว่า เพราะข้าไม่ได้แล้งน้ำใจเหมือน Odin ข้าพอใจจะทำงานให้ก็ได้ แต่”

แต่อะไรเหรอครับ

“แต่ถึงแม้กายข้าเป็นหญิงแต่ใจข้าไม่ต่างจากบุรุษ พักนี้ข้าได้ข่าวว่า Reona กำลังว่าง บางทีเจ้าน่าจะไปชวนนางมาร่วมสังฆกรรม ข้อเสนอข้าเท่านี้ เจ้าทำได้ไหมล่ะ?”

ชะชอบ Reona เหรอ Sven? (*///*)

“นั่นไม่ใช่ธุระที่ข้าจะตอบ หรือเจ้าไม่อยากให้ข้าช่วยแล้ว?”

ช่วยสิ! อยากให้ช่วยมากๆเลยล่ะ!

https://www.pinterest.es/pin/588916088753789628/

“อิอิ release งานไม่ได้ให้ข้ามาช่วยก็ต้องสอนข้าก่อน ว่าไงพี่ Sven พี่ Odin เหงาล่ะซี่~”

ขอบคุณคุณ Reona มากเลยครับ! ออกตัวให้เลยแบบนี้ ซาบซึ้งมากเลยครับ

“ไม่เป็นไร (^ ^) พักนี้บทความเรื่อง libGDX ไม่ค่อยคืบหน้าข้าก็เลยว่าง ดีเสียอีกข้าจะได้หาความรู้ใส่ตัว และยิ่งเป็นปัญหาที่ท่านเจอกับตัวเองด้วย ข้าว่าน่าสนุกออก”

“เฮอะ!องค์หญิงปีศาจ” Odin ค่อนแคะ “นี่น่ะเหรอยอดรักของเจ้า Sven”

“กล่าวแบบนี้เจ้าต้องการให้ข้าลงดาบใช่ไหม” Sven ร้อนตัวออกอาการข่มขู่

“คิดว่าทำได้ไหมล่ะ”

“ฮ่าๆ พวกพี่จะสู้กันทำไม ในเมื่อเงื่อนไขทุกอย่างครบแล้วพวกพี่ก็ต้องช่วยผู้เขียนบทความเขาถูกต้องไหม”

“…” Odin กับ Sven ทำทีเป็นไม่สนใจกันและกันชั่วขณะ

ขอบพระคุณทุกคนเลยค๊าบบบ (พร้อมนั่งกราบอย่างงดงาม)

Node.js Project

เนื่องจาก RxJS ที่จะเขียนนี้จะใช้ syntax ของ javascript เวอร์ชัน ES6 (อ่านบทความภาษาไทยเพิ่มเติม พื้นฐาน ES2015 หรือก็คือ ES6) แล้วจะแปลกลับมาเป็นเวอช์ชัน ES5 หรือง่ายๆว่าเขียนในเวอร์ชันที่ browser ยังไม่รองรับ แต่มันเขียนได้ง่ายและดีกว่า จากนั้นจะใช้ความสามารถของ babel แปลกลับมาเป็นเวอร์ชันที่ browser ในขณะนี้เข้าใจ

เครื่องมือใช้พัฒนา

Node.js ตรงไปยัง

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

VS Code ตรงไปยัง

Download Visual Studio Code - Mac, Linux, Windows

Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio…

code.visualstudio.com

ใช้ VS Code เปิดไปที่ folder ของเรา Space Invaders

จากนั้นสร้าง package.json ด้วยคำสั่ง

npm init

รายละเอียดของโปรเจกต์ตามนี้ครับ

package name: (space-invaders) 
version: (1.0.0) 
description: create our game with ES6 and RxJS
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: prosBeginner
license: (ISC)

อย่างไหนที่เราไม่ต้องการกำหนดค่าเองก็กด enter ผ่านไป (ค่าเหล่านั้นจะถูกกำหนดโดย default แทน) สุดท้ายแล้วเราจะได้ไฟล์ package.json หน้าตาแบบนี้

Git VS Sourcetree

ผลคือ Git พบไฟล์ใหม่ และปรากฏอยู่ใน Sourcetree ด้วย

มองไปที่มุมบนซ้ายตรงที่เขียนว่า File status นั่นไงล่ะ

ขออธิบายว่าพื้นที่ตรงนี้ Sourcetree เรียกมันว่า Workspace มองว่าเป็นพื้นที่ทำงานหรือสนามเด็กเล่นก็ได้ซึ่งตอนนี้มีเด็กหลงเข้ามาคนหนึ่ง (สวัสดีจ้า อิอิ)

Git Add

อยากให้ Git รู้จักเขาไหม ถ้าอยากให้ Git รู้จักก็พิมพ์บอกใน command line หรือ terminal ไปว่า

git add package.json

แล้วดูสิ่งที่เกิดขึ้นใน Sourcetree

Reona: ตอนนี้ Git รู้จักเด็กคนนั้นแล้วสินะ

สังเกตจากสีและสัญลักษณ์ที่เปลี่ยนไป ใช่แล้วครับ ตอนนี้ Git รู้จัก package.json เรียบร้อย เรียกว่าการ tracked

Git Reset

หรือจะยกเลิกการรู้จักนี้ก็ได้ บอก Git ไปว่า

git reset package.json

แล้วดูสิ่งที่เกิดขึ้นใน Sourcetree

…

ปรากฏว่าไม่มีอะไรเปลี่ยนแปลง… (งานเข้าใช่ไหม อิอิ) ทางออกคือการ refresh ให้มองไปที่เมนูด้านบน เลือก Repository > Refresh

ผล

Reona: มันกลับไปเป็นตอนที่ยังไม่รู้จักกัน

เรียกว่าการ untracked

Sourcetree: Stage File

ก็คือ Git Add เราสามาถใช้ Sourcetree ทำสิ่งนี้ได้โดยการมองไปทางด้านขวาของไฟล์ จะพบสัญลักษณ์จุดสามจุด (…) กดมันครับแล้วเลือก Stage file

ผล

Reona: ตอนนี้ Git กลับไปคืนดีกับเด็กคนนั้นอีกแล้ว

Sourcetree: Unstage File

ก็คือ Git Reset เราสามารถใช้ Sourcetree ทำสิ่งนี้ได้โดยการกดจุดสามจุดนั่นอีกครั้ง (…) แล้วเลือก Unstage file

Sven: ข้าว่าใช้ UI นี่ก็ไม่เลวนะ ข้าไม่ค่อยชอบ command line

เข้าประเด็นเลยดีกว่าจะ add หรือ reset นั่นไปทำไม?

จุดมุ่งหมายของการใช้ Git ก็ไม่ต่างจากการบันทึกไฟล์ทั่วไปครับ คือเราอยากบันทึกข้อมูล (save data) แค่นั้น เทียบได้กับบันทึกข้อมูลลงฐานข้อมูล (database) เรียกแต่ละครั้งที่บันทึกว่า commit

เมื่อ commit เพิ่มมากขึ้นก็เกิด history

commit ล่าสุดจะมี pointer ที่ชื่อ HEAD กำกับไว้

Git Commit

ก่อนจะ commit ได้จะต้อง tracked ไฟล์ที่ต้องการเสียก่อน ใช้ Git Add หรือ Stage file ใน Sourcetree

สำหรับ command line หรือ terminal ให้ใช้คำสั่ง git status ดูว่าไฟล์หรือกลุ่มไฟล์เป้าหมายนั้นก่อน commit มีสถานะเป็นอย่างไร

Reona: ข้าสังเกตเห็นคำสั่ง git rm — cached <file> มันคืออะไร?

อย่างที่ command line นี้แสดงให้เห็น ไฟล์ package.json พร้อมจะถูก commit (Changes to be committed)

ใช้คำสั่งนี้เพื่อ commit พร้อมกับบอกรายละเอียด

git commit -m "your description..."

เช่น

git commit -m "init package.json"

ผล

[master (root-commit) f9557ac] init package.json
 1 file changed, 11 insertions(+)
 create mode 100644 package.json

และ Sourcetree ส่วน File status กลับไปว่างเปล่าอีกครั้ง

ทำถึงตรงนี้จึงบอกได้ว่าไฟล์ package.json ได้ถูกบันทึกลงฐานข้อมูลเรียบร้อยแล้ว

Git Log

เมื่อปรากฏการ commit ก็จะมี history ใหม่เกิดขึ้น สามารถใช้คำสั่ง

git log

เพื่อดูสิ่งที่เกิดขึ้นไปแล้วนี้ได้

คนที่ทำ commit นี้คือผู้เขียนเอง prosbeginner@hotmail.com และได้ทำ committed เมื่อ วันอาทิตย์ที่ 23 เวลา 9 โมงเช้า สิ่งที่ทำได้ถูกบรรยายสั้นๆว่า init package.json

Sourcetree: History

เช่นเดียวกับ Git Log มันคือ history

มองไปทางซ้าย ด้านล่างของ File status จะพบ History กดเลย

Space Invaders: Dependencies & Dev Dependencies

มาต่อกันที่เกมของเรา เราต้องการ RxJS และไลรารีอื่นๆเพื่อช่วยในการพัฒนา เนื่องจากบทความนี้ไม่ได้เน้นไปที่ Node.js Project มากนัก ก็จะขออธิบายสั้นๆก็แล้วกันครับ

Node.js มีลุงแก่คนหนึ่งชื่อ npm ลุงแกยืนเฝ้าคลังสมบัติประดาไฟล์ .js อันมหึมา อยากได้ไลบรารีตัวไหนก็ตะโกนบอกลุงแกไป

อยากได้ RxJS ชิมิ ก็บอกไป

npm i rxjs

เมื่อ i ย่อมาจาก install

สิ่งที่ npm ทำคือจะแก้ไขไฟล์ package.json เพิ่มบรรทัดนี้

"dependencies": {  "rxjs": "^6.5.4"}

แต่ๆๆ นี่มันอะไรกัน?!

Reona: มีเป็นพันๆไฟล์เห็นจะได้มั้ง อิอิ 3K+ ก็ 3000 กว่าไฟล์

ใช่ครับ VS Code ก็อำนวยความสะดวกแก่การใช้ Git ไม่ต่างจาก Sourcetree แถมมันยังบอกทันทีเลยว่ามีไฟล์ใหม่เข้ามาเพิ่มจำนวน 3K+ เอ~ เราไม่ใช้ Sourcetree แล้วดีไหม 5555+

Reona: ฮ่าๆ ท่านจะเปลี่ยนชื่อเรื่องยังทันนะ

Sven: (ทำท่าทางมึนๆ)

Odin: (ทำท่าทางเบื่อๆ)

แต่ Sourcetree ก็ได้อยู่

Reona: แถมบอกเลยว่า 3620 ไฟล์เพิ่มเข้ามาใหม่

ไฟล์ใหม่ใน Sourcetree จะเห็นเป็นสัญลักษ์ ? สีม่วง (ณ เวอร์ชันที่ผมใช้อยู่) ส่วนไฟล์ที่ถูกแก้ไขเปลี่ยนแปลงจะเห็นเป็น … สีเหลืองครับ

ไฟล์ส่วนใหญ่ที่เพิ่มเข้ามาใหม่จะอยู่ใน folder ชื่อ node_modules เปรียบเทียบได้กับสนามเด็กเล่นของเราเต็มไปด้วยเด็กๆมากมาย วันนี้คงมีกิจกรรมวันเด็ก (ขี้ไม้)

ขณะนี้ให้สนใจแค่ 2 ไฟล์พอ ได้แก่

package.json
package-lock.json

ที่เหลือเราจะไม่สนใจ อะไรนะ! ใช่ครับ ไม่สนใจที่เหลือนั่น ทำอย่างไรล่ะ? เราจะใช้ความสามารถของ Git เพื่อ ignore ไฟล์เหล่านั้น

Git Ignore

เป็นไฟล์ที่มีรูปแบบเฉพาะ เขียนชื่อไฟล์ไปว่า .gitignore ให้สร้างไว้ที่ root project เลย

ทีนี้กำกับไปใน .gitignore ตามรูปแบบนี้ เพื่อระบุว่ากลุ่ม folder หรือไฟล์ใดหรือที่ลงท้ายด้วยนามสกุลใดที่ต้องการให้ Git ไม่ต้องไปสนใจ

เราไม่ต้องการทุกไฟล์ใน node_modules

node_modules

Reona: นั่น ยอดได้ลดลงแล้ว! เหลือแค่ 3 ไฟล์เอง

Sourcetree ก็ด้วย

Dependencies & Dev Dependencies

ยังไม่พอนะครับ เราต้องบอกลุง npm ว่าต้องการมากกว่านี้อีก

npm i -D babel-core babel-loader babel-preset-env

เมื่อ -D ย่อมาจาก dev จะอยู่ในส่วนของ dev dependencies

ไฟล์ package.json จะเพิ่มส่วนนี้เข้ามา

"devDependencies": {  "babel-core": "^6.26.3",  "babel-loader": "^8.0.6",  "babel-preset-env": "^1.7.0"}

babel จะเป็นตัวแปล ES6 เป็น ES5 ให้เรา แต่ยังไม่พอ เราต้องการ webpack เพื่อ pack หรือห่อประดาไฟล์ .js และอื่นๆให้เป็นชิ้นเดียวหรือได้ของที่สามารถนำไปใช้ได้ทันที ของที่ว่านี้ก็คือเกมของเราครับซึ่งจะนำไปรันบน browser

บอกลุงไป

npm i -D webpack webpack-dev-server

สิ่งที่เพิ่มเข้ามาใหม่

"devDependencies": {  "babel-core": "^6.26.3",  "babel-loader": "^8.0.6",  "babel-preset-env": "^1.7.0",  "webpack": "^4.41.6",  "webpack-dev-server": "^3.10.3"}

ใช้ได้แล้ว เราควร commit โอกาสนี้ลง repository ไปก่อน เลือกเอาว่าจะใช้ command line หรือ VS Code หรือ Sourcetree

ผมจะลองใช้ VS Code ชมดูนะ

มองไปทางซ้ายจะเห็นสัญลักษณ์ของ Git (วงกลมร้อยด้วยเส้นทาง) กดเข้าไป จากนั้นจะสังเกตเห็นอีก 4 สัญลักษณ์ต่อไปนี้

ไล่ตามลำดับเลยนะ

เป็นรูปไฟล์และมีลูกศรย้อนไปด้านขวา อันนี้คือ เปิดไปยังไฟล์นี้
เป็นรูปลูกศรหัวกลับไปด้านซ้าย อันนี้คือ ยกเลิกการเปลี่ยนแปลงนี้
เป็นรูปเครื่องหมายบวก อันนี้คือ Tracked
ส่วน M กับ U ผมยังไม่ทราบ น่าจะเป็นคำว่า Modifired กับ Untracked ตามลำดับ

เลือกทุกไฟล์แล้วกดเครื่องหมาย + ครับ

Reona: ข้าสังเกตว่าจาก Changes เป็น Staged changes

เมื่อเห็นว่ากลุ่มไฟล์นี้ OK แล้วก็ให้ใส่ message เช่น ‘install babel & webpack’ แล้วกดเครื่องหมาย ‘ถูกต้อง’ (checked) ตรงด้านบนนั่นจึงจะได้ว่า commited เรียบร้อย

dev dependencies นี้ต่างจาก dependencies นิดเดียวตรงที่ว่าเมื่อให้ webpack ทำงานแล้ว เฉพาะส่วน dependencies จะถูกนำไปรวมกับชิ้นงานที่จะนำไป release หรือใช้งานจริง ส่วน dev dependencies จะไม่ถูกนำไปรวมด้วย-แค่มีผลตอนที่เราพัฒนางานนี้อยู่เท่านั้น

webpack.config.js

เมื่อมี webpack ก็ต้องมีไฟล์ config และต้องเขียนชื่อมันแบบนี้เลย

webpack.config.js

ให้สร้างไฟล์นี้ที่ root project กำหนดค่าเป็นส่วนๆดังนี้

ส่วน imports

const webpack = require('webpack')const path = require('path')

จากส่วน imports เพิ่มส่วน module

...module.exports = { }

ใน module เพิ่ม entry หมายถึงไฟล์หลัก, เพิ่ม output หลายถึงไฟล์ผลลัพธ์ ประกอบด้วยชื่อกับเส้นทาง ทั้งหมดอยู่ในรูปของ javascript object declaration

module.exports = {  entry: './src/app.js',  output: {    filename: 'bundle.js',    path: path.resolve(__dirname, 'dist')  }}

เพิ่มส่วนของ dev หรือก็คือ webpack-dev-server ที่ได้ติดตั้งไปก่อนหน้านี้แล้ว

module.exports = {  entry: './src/app.js',  output: {    filename: 'bundle.js',    path: path.resolve(__dirname, 'dist')  },  devtool: 'inline-source-map',  devServer: {    contentBase: './dist',    hot: true  }}

เมื่อแก้โค้ดหรือระหว่างพัฒนาโปรแกรม เราต้องการให้ webpack ช่วย reload โปรเจกต์ให้อัตโนมัติ สิ่งนี้ webpack เรียกว่า hot module replacement เพิ่มถัดจาก devServer

module.exports = {...  ,  plugins: [    new webpack.HotModuleReplacementPlugin()  ]}

หลังจากนั้นกำหนดกฏในการอ่านไฟล์ที่ลงท้ายด้วยสกุล .js ทั้งหมด รวมถึงบอกไม่ต้องรวมไลบรารีที่อยู่ใน node_modules มานะ

webpack.config.js ที่สำเร็จแล้วจะเป็นแบบนี้

Start (Dev) Project

เปิดไฟล์ package.json อีกครั้ง แก้ไข main property ให้มาเรียก webpack.config.js และสร้างส่วน script เพื่ออำนวยความสะดวกในการเรียก project นี้ขึ้นมาทำงาน (เฉพาะในช่วงพัฒนา) ตามนี้ครับ

แล้วทดสอบรัน

npm run start

ผล

Kittipongs-MBP:Space Invaders pros$ npm run start> space-invaders@1.0.0 start /Users/pros/works/games/Space Invaders
> webpack-dev-server --openThe CLI moved into a separate package: webpack-cli
Please install 'webpack-cli' in addition to webpack itself to use the CLI
-> When using npm: npm i -D webpack-cli
-> When using yarn: yarn add -D webpack-cli
internal/modules/cjs/loader.js:638
    throw err;
    ^Error: Cannot find module 'webpack-cli/bin/config-yargs'

รันไม่ผ่าน มันต้องการ webpack-cli เราสามารถติดตั้งลงไปในส่วนของ dev dependencies

npm i -D webpack-cli

เสร็จแล้วก็จัด

npm run start

ผล

ERROR in Entry module not found: Error: Can't resolve './src/app.js' in '/Users/pros/works/games/Space Invaders'

เขาหา src/app.js ไม่เจอ งั้นสร้างให้

ที่ root project สร้าง folder ชื่อ src และไฟล์ app.js ไว้ภายใน

จากนั้นรันอีก ได้ผลว่า

Cannot find module '@babel/core'
 babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'

ดูจาก package.json ระบุไว้ว่าใช้ "babel-loader": "^8.0.6" ซึ่ง babel/core ได้เปลี่ยน package ไปแล้ว โดยใช้ชื่อเป็น @babel/core แทน หรือแทนที่เราจะเดินหน้าไปใช้ package ใหม่ เรายังคงใช้ babel/core ตัวเดิมได้ ด้วยการติดตั้ง babel-loader เวอร์ชัน 7 แทน

ทางเลือกที่ 1. เดินหน้าใช้ babel-loader เวอร์ชัน 8

npm i -D @babel/core @babel/preset-env

ทางเลือกที่ 2. ยังคงอยู่กับที่ใช้ babel-loader เวอร์ชัน 7

npm i -D babel-loader@7

Reona: เดินหน้าไปเลย ชนเลย!

ผมเลือกข้อ 1. แล้วกันครับ ดังนั้นติดตั้ง babel/core กับ babel/preset-env ใหม่

จากนั้นลบของเดิม (package ชื่อเก่า) ทิ้งไป

npm uninstall -D babel-core babel-preset-env

แล้วก็แก้ไขไฟล์ webpack.config.js ส่วนของ rules > use > options

rules: [  {    test: /\.js$/,    exclude: /(node_modules)/,    use: {      loader: 'babel-loader',      options: {        presets: ['@babel/preset-env']      }    }  }]

เสร็จแล้วก็รันใหม่อีกครั้ง

ผล