ในการพัฒนา Software ในปัจจุบันที่ต้องการความรวดเร็ว มักอาศัยการนำสิ่งที่มีอยู่แล้วมาต่อยอดเป็น Application ไม่ว่าจะเป็น Framework หรือ Library ที่พัฒนาขึ้นเองหรือนำมาจาก Open Source ซึ่งช่วยลดเวลาในการพัฒนาได้อย่างมาก ทำให้เราสามารถใช้เวลาไปกับการพัฒนาฟังก์ชันของ Application ได้มากขึ้น
ตัวอย่าง Library ของใครที่เขียนเว็บเปิดไปโปรเจคไหนก็คงจะเจอนั่นคือ Lodash ที่มี utility methods สารพัดช่วยให้เราทำงานกับ object, array, math, string ได้อย่างง่ายแสนง่าย
ทว่าการที่จะติดตั้ง library ใดได้นั้นจะต้องมีสิ่งที่เรียกว่า Package Manager ที่หลายท่านอาจเคยได้ยินชื่อ npm yarn bun pnpm แต่ทุกท่านทราบไหมว่า Package Manager นั้นอยู่ใกล้ตัวมากกว่าที่เราคิดครับ ยกตัวอย่างให้เห็นภาพดังนี้
- Android → Google Play Store, App Gallery
- iOS → App Store
- Windows → Chocolatey, Add or Remove Program
- macOS → Homebrew
- Unix → apt, yum
- Kubenetes → Helm
เรียกว่า Package Manager เป็นจุดเริ่มต้นของการ ติดตั้ง ลบ อัพเดท ซอฟท์แวร์ ของระบบและแอพพลิเคชันของเรา
บทบาทของ Package Manager
บทบาทของ Package Manager ในบล็อกนี้จะพูดถึงบริบทของ Web Development โดยในที่นี้หน้าที่ของ Package Manager มีดังนี้
- จัดการ dependencies ทั้งหลายตั้งแต่ การดาวน์โหลด ติดตั้ง อัพเดท ลบ
- ควบคุม version ของ package ที่ดาวน์โหลดมา
- ตรวจเช็คความปลอดภัยของ packages ในโปรเจค
- สร้าง Shortcut เก็บคำสั่งในโปรเจค
- และอื่น ๆ อีกมากมาย
Package Management ในโลกของ Web Development
ในการพัฒนา Web Application ดังที่กล่าวไปข้างต้นว่าเราต้องใช้ Library, Framework ที่มีคนที่เขียนมาก่อนอยู่แล้วและผ่านการ Test มาอย่างดิบดีจึงมาเป็น package ให้เราได้ใช้กัน
การติดตั้ง package ในโปรเจคเรานั้นช่างง่ายแสนง่าย
- npm install <package>
- yarn add <package>
- pnpm add <package>
หรือถ้าจะติดตั้งเวอร์ชันที่เก่ากว่าเราสามารถเข้าไปดูเวิร์ชันได้ที่
เอาละ เราได้รู้จักหน้าที่ของ Package Manager ประมาณหนึ่ง เราไปดูรู้จัก Package Manager ในโลก Web Devleopment ดีกว่า
1. npm 👴
npm คือ package manager ที่ติดมากับตอนลง Node.js เป็นมาตรฐานอยู่แล้ว ไม่ว่าจะลง package ใด ก็ตามก็จะต้องเจอ npm install
อาจเปรียบเทียบได้ว่า npm คุณปู่ของวงการจนกระทั่งมีคนทนความช้าของคุณปู่ไม่ไหวจนแตกลูกหลานออกมาที่เร็วและมีประสิทธิภาพมากกว่า
2. yarn 😼
yarn อีกหนึ่ง package manager ของ Node เพราะด้วยความที่ “เร็ว” แถมมีประสิทธิภาพมาก
yarn และ npm
จุดเด่นที่สำคัญของ package manager ในมุมมองของคนใช้งานหรือนักพัฒนาอย่างพวกเราคงหนีไม่พ้น “ความเร็ว” เพาะว่ามัน “เร็ว” เราถึงใช้ นอกนั้นไม่ค่อยจะต่างกันมากเท่าไร แต่อาจมียูสเคสนอกเหนือจากนั้นคือพวก monorepo แต่จะไม่พูดถึงในบล็อกนี้
Fun fact 😂
มีครั้งหนึ่งที่เคยต้องลง Package ด้วย npm และกินเวลาไปเกือบ 20 นาที 🫠
เปรียบเทียบให้เห็นภาพง่าย ๆ เมื่อหลายปีก่อนเคยใช้ npm install ในเครื่อง Windows ใช้เวลาประมาณ 15 นาที แต่พอใช่ yarn install กลับใช้เวลาไม่ถึง 5 นาที
3. pnpm 🚀
pnpm นั้นคือ Package Manager อีกเจ้าหนึ่งซึ่งมาด้วยจุดขายที่น่าเหลือเชื่อสรุปเป็นประโยคสั้น ๆ คือ โครตเร็ว โครตประหยัด โครตมีประสิทธิภาพ (ผมโมมจากสโลแกนดั้งเดิมนั่นคือคือ Fast, disk space efficient package manager) เอาละมาดูเหตุผลว่าทำไม pnpm ถึงมีประสิทธิภาพกัน
ปัญหาของการใช้ package manager รูปเดิม
Disk Spaces
การใช้พื้นที่แบบไม่ค่อยมีประสิทธิภาพ ลองจินตนาการตามว่าเรามีโปรเจค A, B, C
- Project A มี lib 1, 2, 3
- Project B มี lib 1
- Project C มี lib 1, 3
ถ้าเราใช้ package manager ที่จัดการไม่ค่อยมีประสิทธิภาพ จะกลายเป็นว่าเราดาวน์โหลด lib 1, lib 2, lib 3 และ copy ไปวางไว้ในแต่ละ folder ไปเลย ของใครของมัน แต่ความเป็นจริงแล้วถ้า lib นั้นมีเวอร์ชันเหมือนกันมันก็ควรจะมีสักที่ที่เก็บ lib พวกนี้ไว้และมาแชร์กัน
แต่ pnpm นั้นมีวิธีที่เก็บ lib พวกนี้ไว้ในที่ที่ชื่อว่า store กลาง ทำให้เวลาเราติดตั้งโปรเจคที่ใช้ dependency เวอร์ชันเดียวกัน และมีอยู่ใน store อยู่แล้วมันก็ link ไปที่ store นั้นแทนที่จะดาวน์โหลดและ copy เก็บไว้ในแต่ละ folder
อธิบายแบบง่ายคือ มีคลังแสงกลางไว้เก็บของ เวลาเราจะติดตั้งอะไรก็ตามจะมาเช็คที่คลังแสงนี้ทุกครั้ง ถ้ามีของอยู่แล้วก็จะสร้าง shortcut มาที่คลังแสงนี้ ฉะนั้นมันประหยัดพื้นที่และมีประสิทธิภาพมาก
Saving disk space
ปกติถ้าเราใช้ npm และเรามี Node 100 โปรเจค เราจะมี folder node_modules อยู่ทั้ง 100 ที่ในแต่ละ folder จนทำให้เกิด meme นี้
แต่ถ้าคุณใช้ pnpm ละก็คุณจะไม่เจอสิ่งนี้ครับ เจ้า pnpm จะเก็บ dependency ทั้งหมดไว้ใน store กลางจัดการมันอย่างมีประสิทธิภาพ ถ้าเรามีโปรเจคที่มี dependency ซ้ำกันมันก็จะถูกชี้ไปที่เดียวคือ store กลางของเรานี่เอง
และความดีงามอีกอย่างหนึ่งคือ dependency นั้นมีการอัพเดทเวอร์ชันและมีการเปลี่ยนแปลงไปแค่ 1 ไฟล์ แทนที่ pnpm จะดาวน์โหลดทุกไฟล์และเก็บไว้ในเครื่องมันก็จะเก็บแค่ 1 ไฟล์เท่านั้น
ด้วยสาเหตุเหล่านี้ทำให้ตอนติดตั้ง pnpm install มันจะเร็วมากถึงมากที่สุด
Boosting installation speed
pnpm นั้นจะมีกระบวนการติดตั้งแบ่งเป็น 3 ส่วนดังนี้
- Dependency resolution: ณ stage นี้ pnpm จะทำการระบุ dependency ทั้งหมดในโปรเจคและดาวน์โหลดเก็บไว้ที่ store กลาง
- Directory structure calculation. (จุดนี้โฟลเดอร์ node_modules ได้ถูกสถานปนาขึ้นและเตรียมพร้อมเสร็จสิ้นก่อนเข้าสู่ step ถัดไป
- Linking dependencies. dependency ที่เหลือทั้งหมดที่ถูกเตรียมพร้อมไว้ดาวน์โหลดและเก็บไว้จะถูก hard-linked จาก store สู่ node_module folder
เพิ่มเติม: อธิบายคำว่า hard-link เผื่อใครยังไม่ทราบ
- Hard link → เรามีไฟล์นี้ในระบบอยู่แล้วแต่ทว่าเราไม่ได้ copy ไฟล์ในระบบมาเป็นไฟล์ใหม่ แต่เป็นการสร้างไฟล์ที่ชี้ไปยังไฟล์ต้นฉบับ ถ้าไฟล์นี้ถูกลบแต่ยังมีไฟล์อื่นชี้มาที่ไฟล์ต้นฉบับ เราจะยังสามารถเข้าถึงไฟล์นี้ได้
- Soft-link → เราสร้าง shortcut ที่ชี้ไปยังตำแหน่งของไฟล์นี้ในระบบ เมื่อไฟล์ต้นฉบับถูกลบ link นี้จะไม่สามารถเข้าถึงไฟล์นั้นได้
เปรียบเทียบกับการ copy ไฟล์ วิธี hard link นั้นรวดเร็วกว่าเยอะครับ ถ้าใครอ่านไม่รู้เรื่องไม่เป็นไรครับ ดูภาพด้านบนว่ามันไวกว่าก็พอ
Creating a non-flat node_modules directory
เวลาที่เราใช้ yarn (classic)หรือ npm เราจะติดตั้ง dependency ใดใน package ที่อยู่ในโปรเจคสามารถเข้าถึง dependency ที่ไม่ได้ติดตั้งอยู่ในโปรเจคตัวเองแต่ติดตั้งในโปรเจคอื่นได้ ซึ่งอาจส่งผลให้อาจเกิดอาเพศได้
แต่ pnpm ไม่ทำแบบนั้นครับ โดยปกติ pnpm จะทำให้ package ที่ติดตั้งจะเห็นแค่ dependency ที่ติดตั้งเท่านั้น ส่งผลให้เกิดไม่เกิดวิบัติอาเพศที่เจอบ้างไม่เจอบ้าง หรือ version ที่ไม่ตรงกันในโปคเจคเดียวกันบ้างซึ่งปัญหาเหล่านั้นเป็นเรื่องน่าปวดหัวที่สุด
ติดตั้ง pnpm
ท่านสามารถติดตั้งโดยใช้คำสั่ง
$ npm install -g pnpm
Using Homebrew
สำหรับใครใช้ macOS สามารถลงผ่าน Homebrew ได้
$ brew install pnpm
pnpm: Basic Commands
สำหรับใครที่คุ้นเคยกับ npm ดีอยู่แล้วให้คิดแบบง่าย ๆ เลยว่าแค่เติม p + npm ไปทุกอย่างเหมือนเดิม เช่น
$ npm install --> pnpm install
$ npm add --> pnpm add
$ npm update --> pnpm update
$ npm uninstall --> pnpm remove
$ ...
คำสั่งที่ใช้บ่อย
- pnpm add <package-name> → ติดตั้ง package ที่ระบุ
- pnpm install→ install dependencies ทั้งหมดที่ list อยู่ใน package.json
- pnpm update→ อัพเดททุก dependencies ให้เป็น version ล่าสุดที่เข้ากันได้
- pnpm remove <package-name> → ลบ dependencies ออกจาก project
- pnpm add -g <package-name>→ ติดตั้ง dependency ในระดับ global
- pnpm add -g pnpm → อัพเดทเวอร์ชัน pnpm
- pnpm exec <package-name> → สั่งดาวน์โหลด package-name และสั่งรัน
- pnpm run <script-name>สั่งรัน script ที่ระบุไว้ใน package.json
เช่น pnpm run start|dev|testเป็นต้น - pnpx <package-name> → รัน main executable ที่ติดมากับ project เช่น pnpx jest จะรัน jest ที่อยู่ในโปรเจคปัจจุบัน
Compatibility
ตัว pnpm จะมีเวอร์ชันที่เข้ากันได้ตามตารางด้านบน ถ้าหากลงใน environment ที่เก่าอาจต้องมองหาเลขเวอร์ชันให้ตรงมิฉะนั้นจะเกิดอาเพศได้ แต่ถ้าใครใช้เวอร์ชันใหม่จะไม่ค่อยเจอปัญหาครับ
pnpm: workspace
เคยไหมครับ เวลาทำโปรเจกต์ใหญ่ ๆ ที่มีทั้ง Backend, Frontend หรือ Library ที่ต้องแชร์โค้ดกัน การจัดการ Dependencies แยกกันแต่ละโฟลเดอร์ทำให้ปวดหัวประสาทแดกเป็นที่สุด
Workspace อธิบายอย่างง่ายคือ: การมองว่า Application ของเราประกอบไปด้วย “แพ็กเกจย่อย ๆ” (Sub-packages) หลายตัวที่อยู่รวมกัน และสามารถเรียกใช้งานกันเองได้โดยไม่ต้อง Publish ขึ้น npm จริง
หลายคนบอกว่า “อ้าว ก็เหมือนกับ Yarn Workspace หรือ Npm Workspace นะสิ” ใช่เลยครับ บล็อคนี้จะไม่ขอลงรายละเอียดมากแต่หัวข้อสามารถแยกเอาไปเขียนเป็นอีกเรื่องหนึ่งได้เลย แต่อาจให้เห็นภาพง่า ยๆ ่า
packages:
# รวมทุก packages ที่อยู่ในโฟลเดอร์ packages/
- 'packages/*'
# รวมทุก apps ต่างๆ
- 'apps/*' # ใน app สามารถ packages/<xxx> เข้ามาเพื่อใช้ร่วมกันได้
ตอนหาข้อมูลก็เพิ่งเห็นเหมือนกันว่าโปรเจคใหญ่ ๆ อย่าง Next.js, Material UI, Prisma ก็ใช้ pnpm workspace อยู่เหมือนกัน หากใครต้องการดูตัวอย่างสามารถเข้าไปดูได้🐱
pnpm ใน CI system
เท่าที่ผมลองใช้ยังไม่เจอปัญหาในการ dev บนเครื่องตัวเองเท่าไรและที่ทำงานเองก็ใช้ yarn workspace เป็นปกติ
แต่บาง docker image ที่ไม่ได้ลง pnpm ไว้ (เพราะส่วนมากจะมีแต่ npm, yarn) ทว่าเท่าที่ลอง ณ ตอนนี้ image ส่วนใหญ่มากมี pnpm ติดตั้งเข้ามาเพิ่มเป็นมาตรฐานเรียบร้อยแล้ว
สรุป
pnpm คืออีกทางเลือกของ Package Manager ใน Node ที่รวดเร็ว มีประสิทธิภาพไม่แพ้ yarn ปัจจุบันผมใช้ pnpm เป็นหลักสำหรับการพัฒนาโปรเจคเป็นหลักเป็นที่เรียบร้อยรวมถึงโปรเจคที่ต้องสร้างอีกในอนาคต
การใช้งานเรียกว่าง่ายแสนง่ายแค่เปลี่ยน 1 ตัวอักษรจาก npm เป็น pnpm ก็สามารถใช้แทนคำสั่งที่เคยใช้งานมาได้ทันที ทำให้แทบไม่ต้องเรียนรู้อะไรเพิ่มเติมมากครับ
แหล่งอ้างอิง
รู้จักกับ pnpm: Package Manager ที่เร็ว แรง ทะลุจักรวาล was originally published in Ayuth’s Story on Medium, where people are continuing the conversation by highlighting and responding to this story.