Frontend Academy · บทเรียน

pnpm Workspaces สำหรับโมโนรีโพ

ตั้งค่า pnpm workspace ด้วย pnpm-workspace.yaml ที่รากรีโพ ยกการพึ่งพาที่ใช้ร่วมกันขึ้นมา และใช้โพรโทคอล workspace: เพื่อเชื่อมแพ็กเกจในเครื่อง

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

pnpm คืออะไร

pnpm (Performant npm) คือเครื่องมือจัดการแพ็กเกจที่รวดเร็วและประหยัดพื้นที่ดิสก์ โดยเก็บสำเนาของแต่ละแพ็กเกจไว้เพียงชุดเดียวในคลังที่ระบุด้วยเนื้อหาแบบส่วนกลาง แล้วสร้างลิงก์จาก node_modules ของโปรเจกต์มายังคลังนั้น การพึ่งพาเดียวกันในหลายโปรเจกต์จึงใช้พื้นที่ดิสก์เพียงสำเนาเดียว

ความเร็วและการประหยัดพื้นที่ดิสก์

ในโมโนรีโพทั่วไป การติดตั้งด้วย pnpm เร็วกว่า npm/yarn 2–3 เท่า และใช้พื้นที่ดิสก์น้อยลงประมาณ 70% จึงช่วยได้มากสำหรับโมโนรีโพที่มีหลายแพ็กเกจ

การติดตั้ง pnpm

ใช้ Corepack (ที่มาพร้อมกับ Node 16 ขึ้นไป) หรือติดตั้งแบบส่วนกลาง

# Corepack (recommended):
corepack enable
corepack prepare pnpm@latest --activate

# Or:
npm install -g pnpm

การตั้งค่าเวิร์กสเปซ

สร้าง pnpm-workspace.yaml ไว้ที่รากของโปรเจกต์ โดยระบุโฟลเดอร์ที่มีแพ็กเกจ

# pnpm-workspace.yaml
packages:
  - 'apps/*'
  - 'packages/*'
  - '!**/test/**'

โครงสร้างโปรเจกต์

แต่ละแอปและแพ็กเกจจะมี package.json ของตนเอง ส่วนรากของโปรเจกต์จะมี package.json ของเวิร์กสเปซพร้อม devDeps ที่ใช้ร่วมกัน

my-monorepo/
  pnpm-workspace.yaml
  package.json         (root, private: true)
  apps/
    web/
      package.json
    docs/
      package.json
  packages/
    ui/
      package.json
    config-eslint/
      package.json

การติดตั้งการพึ่งพา

เรียกใช้ pnpm install ที่รากของโปรเจกต์เพียงครั้งเดียว pnpm จะติดตั้งทุกอย่างในแพ็กเกจทั้งหมด พร้อมยกการพึ่งพาที่ใช้ร่วมกันขึ้นมา

pnpm install

# Install only in one workspace:
pnpm --filter web add react-router-dom

# Install dev dep at root:
pnpm add -Dw typescript prettier

โปรโตคอล workspace:

อ้างอิงแพ็กเกจภายในด้วย workspace:* pnpm จะจับคู่ไปยังแพ็กเกจในเครื่อง และเมื่อเผยแพร่จะแทนที่ด้วยเวอร์ชันจริง

// apps/web/package.json
{
  "dependencies": {
    "@repo/ui": "workspace:*",
    "@repo/utils": "workspace:^1.0.0"
  }
}

// On publish, workspace:* becomes the actual version of @repo/ui.

การเรียกใช้สคริปต์ในหลายแพ็กเกจ

pnpm -r จะเรียกใช้สคริปต์ในทุกแพ็กเกจ ใช้ --filter เพื่อเลือกเฉพาะบางส่วน

# Run build in every package:
pnpm -r build

# Only in web and its deps:
pnpm --filter web... build

# Run lint in changed packages since main:
pnpm --filter ...[origin/main] lint

การแก้ไขการพึ่งพาอย่างเคร่งครัด

โดยค่าเริ่มต้น pnpm ใช้ลิงก์สัญลักษณ์ ดังนั้นแต่ละแพ็กเกจจะมองเห็นเฉพาะการพึ่งพาที่ระบุไว้อย่างชัดเจนใน package.json ของตนเอง จึงไม่มีการรั่วไหลข้ามแพ็กเกจโดยไม่ตั้งใจ ซึ่งเป็นข้อบกพร่องที่ npm และ yarn classic ต่างก็ยอมให้เกิดขึ้น

รูปแบบการยกการพึ่งพาขึ้น

โดยค่าเริ่มต้น pnpm จะไม่ยกการพึ่งพาใดขึ้นมา หากการพึ่งพาทางอ้อมต้องเข้าถึงได้ (เช่น TypeScript แบบส่วนกลาง) ให้เพิ่มลงใน .npmrc: shamefully-hoist=true (หลีกเลี่ยงหากทำได้) หรือใช้ public-hoist-pattern แบบระบุรายการ

การอัปเดตการพึ่งพา

pnpm update จะอัปเดตภายในช่วงเวอร์ชันแบบ semver ส่วน pnpm update -L จะเลื่อนไปใช้เวอร์ชันล่าสุด (ไม่สนใจเครื่องหมาย caret)

pnpm update                      # update all
pnpm --filter web update react   # only react, only web
pnpm update -L                   # latest (ignore caret)

การใช้ร่วมกับ Turborepo

pnpm จัดเตรียมเวิร์กสเปซและการติดตั้ง ส่วน Turborepo จัดการการประสานงานของงานและการแคช ทั้งสองเครื่องมือทำงานร่วมกันได้อย่างลงตัว — โมโนรีโพ JS ส่วนใหญ่ใช้ทั้งคู่

# pnpm install dependencies
pnpm install

# Turborepo runs the tasks across the workspace:
pnpm turbo run build --filter=web...

เคล็ดลับสำหรับการผสานรวมอย่างต่อเนื่อง

แคชคลังที่ระบุด้วยเนื้อหาของ pnpm (~/.local/share/pnpm/store) เพื่อให้การผสานรวมอย่างต่อเนื่องเร็วขึ้น ใช้ --frozen-lockfile เพื่อให้การทำงานล้มเหลวหาก pnpm-lock.yaml จะถูกเปลี่ยนแปลง

# .github/workflows/ci.yml
- uses: pnpm/action-setup@v3
  with: { version: 9 }
- uses: actions/setup-node@v4
  with: { node-version: '20', cache: 'pnpm' }
- run: pnpm install --frozen-lockfile
- run: pnpm -r build

ตรวจสอบความเข้าใจ

ข้อได้เปรียบหลักด้านพื้นที่ดิสก์ของ pnpm เหนือ npm/yarn ในโมโนรีโพคืออะไร

สรุป: เวิร์กสเปซของ pnpm

คลังเดียวที่ระบุด้วยเนื้อหา + ลิงก์สัญลักษณ์ = ติดตั้งได้รวดเร็วและใช้พื้นที่ดิสก์น้อยลงประมาณ 70% pnpm-workspace.yaml ใช้ระบุโฟลเดอร์แพ็กเกจ โปรโตคอล workspace:* ใช้สำหรับการพึ่งพาภายใน pnpm -r เรียกใช้สคริปต์ในทุกแพ็กเกจ ส่วน --filter ใช้เลือกเฉพาะบางส่วน การแก้ไขการพึ่งพาอย่างเคร่งครัดช่วยป้องกันการรั่วไหลของการพึ่งพา ใช้ร่วมกับ Turborepo เพื่อประสานงานของงาน ใช้ --frozen-lockfile ในการผสานรวมอย่างต่อเนื่อง

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

บทเรียน “pnpm Workspaces สำหรับโมโนรีโพ” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “pnpm Workspaces สำหรับโมโนรีโพ”

ตั้งค่า pnpm workspace ด้วย pnpm-workspace.yaml ที่รากรีโพ ยกการพึ่งพาที่ใช้ร่วมกันขึ้นมา และใช้โพรโทคอล workspace: เพื่อเชื่อมแพ็กเกจในเครื่อง คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “pnpm Workspaces สำหรับโมโนรีโพ” ใช้เวลานานแค่ไหน

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

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

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

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

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