เปลี่ยนมาใช้ PNPM แทน NPM และ Yarn

PNPM May 28, 2023

PNPM เป็น Package Manager อีกตัวนึง ที่เหมือนกับ NPM และ Yarn ต่างกันที่รายละเอียดข้างในครับ เดี๋ยวมาอธิบายมาต่างอย่างไร มีข้อดีอย่างไร ซึ่งตัว PNPM หน้าเว็บเค้าเขียนนิยามตัวเองว่าเป็น Fast, disk space efficient package manager

Fast, disk space efficient package manager | pnpm
Fast, disk space efficient package manager

ข้อดีของ PNPM คือ

  • ใช้พื้นที่น้อย - ปกติเวลาเราติดตั้ง dependencies ก็จะติดตั้งลง node_modules ของแต่ละโปรเจ็คใช่มั้ยครับ ยิ่งมีโปรเจ็คเยอะ ตัว node_modules ก็จะบวมเรื่อยๆ ใหญ่เรื่อยๆ บาง library ก็ติดตั้งซ้ำๆ อยู่หลายโปรเจ็ค แต่ตัว PNPM เนี่ย ใช้วิธีเก็บ node_modules ไว้ที่เดียว แล้วใช้วิธี link เอา ทำให้ประหยัดเนื้อที่
  • เร็ว! - สืบเนื่องจาก PNPM ใช้วิธี เก็บ node_modules ที่เดียว และ link การติดตั้ง บางครั้งไม่ต้อง Download เลย เพียงแค่ link จากที่เคยมีในเครื่องอยู่แล้ว
  • รองรับ Monorepo - มี built-in เรื่องของการจัดการหลายๆ package ในโปรเจ็คเดียว
เพิ่มพื้นที่ว่างบนเครื่องด้วย npkill
เผื่อใครยังไม่รู้ หากคุณมีปัญหาพื้นที่บนเครื่องเต็ม ต้องคอยนั่งลบ node_modules เอง วันนี้ผมขอนำเสนอวิธีง่ายๆ ครับ ด้วยการใช้ npkill npkill - mainmain เราสามารถรันได้ 2 วิธีครับ คือ 1. ติดตั้งแบบ Global ด้วยคำสั่ง npm

การติดตั้ง PNPM

วิธีการติดตั้งที่ง่ายที่สุด คือทำผ่าน NPM เพราะถ้าเราติดตั้ง Node.js ก็น่าจะมีทุกคน

npm install -g pnpm

หรือสำหรับใครใช้ Homebrew ก็ติดตั้งผ่าน Homebrew ได้

brew install pnpm

เวอร์ชั่นปัจจุบัน ณ​ วันที่เขียนบทความ

pnpm --version

// 8.5.1

นอกเหนือจากนี้ วิธีการ Install ยังมีหลายวิธี แล้วแต่ความชอบครับ อ่านเพิ่มเติมที่ link ด้านล่างเลย

Installation | pnpm
Prerequisites

วิธีการใช้งาน PNPM

คำสั่งการใช้งาน จะคล้ายๆกับ NPM หรือ Yarn ตัวอย่าง

การติดตั้ง Dependencies

pnpm install

การติดตั้ง package

pnpm add <package>

การรันคำสั่ง command ใน scripts

pnpm <cmd>

// ปกติถ้าเป็น npm จะเป็น
// npm run <cmd>

อื่นๆ เกี่ยวกับ PNPM

  • ตัว lock file ของ PNPM จะชื่อ pnpm-lock.yaml
  • เราสามารถกำหนด version ของ node และ pnpm ใน package.json ได้ ตัวอย่าง
{
    "engines": {
        "node": ">=18",
        "pnpm": ">=8"
    }
}
  • การกำหนด workspace จะใช้ไฟล์ pnpm-workspace.yaml

จบแล้ว ใครที่ยังไม่เคยใช้ Package Manager อื่นๆ นอกเหนือจาก NPM ลองใช้ PNPM ดูนะครับ ถ้าไม่ชอบที่ต้องพิมพ์ยาวกว่า npm ก็ทำเป็น alias ก็ได้ อย่างผม ใช้เป็น p อย่างเดียวเลย (ถ้า alias ไม่ซ้ำนะ)

alias p="pnpm"

เวลาติดตั้ง dependencies หรือเพิ่ม package ใหม่ก็พิมพ์สั้นๆ

p install
p add <package>

Happy Coding ❤️


Reference

Motivation | pnpm
Saving disk space

Tags

Chai Phonbopit

เป็น Web Dev ทำงานมา 10 ปีหน่อยๆ ด้วยภาษา JavaScript, Node.js, React, Vue และปัจจุบันกำลังสนใจ Web3, Crypto และ Blockchain เขียนบล็อกที่ https://devahoy.com