ใช้ PNPM แทน NPM

ใครใช้ NPM แนะนำให้ใช้ PNPM แทน NPM เนื่องจากว่ามันเร็วกว่า ดีกว่า

คุณสมบัติ	NPM	PNPM
ความเร็วในการติดตั้ง	ช้า	เร็ว 👍
การใช้พื้นที่เก็บข้อมูล	ใช้มาก	ใช้น้อย 👍
โครงสร้างโฟลเดอร์	แบบราบ (Flat)	แบบลำดับชั้น (Nested) 👍
สนับสนุน Monorepo	มีข้อจำกัด	รองรับเต็มรูปแบบ 👍
ระยะเวลาติดตั้ง	ใช้เวลานาน	ใช้เวลาน้อย 👍
การทำงานพร้อมกัน	มีข้อจำกัด	รองรับอย่างเต็มที่ 👍
โหมดการทำงานแบบเข้มงวด	ไม่มี	มี (สามารถเลือกใช้ได้) 👍

ส่วนคำสั่งต่างๆ คล้ายๆกันเลย ต่างกันมาก

Command	NPM	PNPM
ติดตั้ง package	npm install <package>	pnpm add <package>
ถอนการติดตั้ง package	npm uninstall <package>	pnpm remove <package>
รัน package โดยไม่ติดตั้ง	npx <package>	pnpm dlx <package>
ติดตั้ง global package	npm install -g <package>	pnpm add -g <package>
ล้าง cache	npm cache clean --force	pnpm store prune
ติดตั้ง dev dependencies	npm install --save-dev <package>	pnpm add -D <package>

Installation

แนะนำให้ติดตั้งผ่าน Package Manager เช่น Scoop => https://pnpm.io/installation

Command

Terminal

pnpm add <package>          # ติดตั้งแพ็คเกจและเพิ่มลงใน dependencies
pnpm add -D <package>       # ติดตั้งแพ็คเกจและเพิ่มลงใน devDependencies
pnpm remove <package>       # ลบแพ็คเกจออกจากโปรเจค
pnpm update                 # อัพเดทแพ็คเกจทั้งหมดตามเวอร์ชันที่ระบุ
pnpm run <script>           # รันสคริปต์ที่กำหนดไว้ใน package.json
pnpm install                # ติดตั้งแพ็คเกจทั้งหมดที่ระบุใน package.json
pnpm list                   # แสดงรายการแพ็คเกจที่ติดตั้งในโปรเจค
pnpm outdated               # แสดงรายการแพ็คเกจที่มีเวอร์ชันใหม่กว่า

Configuration

.npmrc (settings)

ไฟล์ .npmrc คือไฟล์การตั้งค่าของ Node Package Manager) ที่ใช้ในการกำหนดการตั้งค่าต่างๆ สำหรับการติดตั้งและการจัดการแพ็คเกจในโปรเจกต์หรือเครื่องของผู้ใช้

ไฟล์นี้ช่วยให้สามารถตั้งค่าพารามิเตอร์ต่างๆ เช่น การตั้งค่าการเข้าถึง registry, การตั้งค่าการใช้งาน proxy, การกำหนดการใช้งาน scripts หรือการตั้งค่าต่างๆ ที่เกี่ยวข้องกับการติดตั้งแพ็คเกจ

.npmrc

# ยกระดับแพ็คเกจที่มีคำว่า "types" ในชื่อ
hoist-pattern[]=*types*
# ไม่ยกระดับแพ็คเกจ @types/react
hoist-pattern[]=!@types/react
# กำหนด npm registry ที่จะใช้
registry=https://registry.npmjs.org/
# บังคับให้ใช้ pnpm แทน npm หรือ yarn
engine-strict=true
# กำหนดตำแหน่งของ pnpm store
store-dir=~/.pnpm-store
# เปิดใช้งาน workspaces
use-workspace-root=true
# กำหนดเวอร์ชันของ Node.js ที่ต้องการใช้
node-version=14.0.0
# ตั้งค่าให้ติดตั้งแพ็คเกจแบบ production เท่านั้น
production=true
# กำหนด registry สำหรับแพ็คเกจส่วนตัวใน scope @myscope
@myscope:registry=https://private-registry.com/
# กำหนด HTTP proxy
proxy=http://proxy.example.com:8080
# กำหนด HTTPS proxy
https-proxy=http://proxy.example.com:8080
# ข้ามการตรวจสอบ SSL certificate
strict-ssl=false
# กำหนดระดับของ log ที่แสดง
loglevel=info
# บันทึก lockfile เมื่อติดตั้งแพ็คเกจ
lockfile=true
# ใช้ package.json ที่อยู่ใน workspace root
workspace-root=true
# ใช้ peerDependencies แบบเข้มงวด
strict-peer-dependencies=true
# ใช้ Node.js builtins แทนการติดตั้งแพ็คเกจ
node-linker=hoisted
# แชร์ dependencies ระหว่าง workspaces
shared-workspace-lockfile=true

package.json

package.json คือ Node Configuration File ที่ใช้สำหรับกำหนดค่าต่างๆ ของโปรเจค

package.json

{
  "name": "example-project",
  "version": "1.0.0",
  "peerDependencies": {
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  },
  "devDependencies": {
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  }
}

pnpm-workspace.yaml

pnpm-workspace.yaml คือไฟล์ที่ใช้สำหรับการจัดการ monorepo

1. Workspace

pnpm-workspace.yaml

packages:
    - "packages/*" # รวมทุกโฟลเดอร์ใน packages/
    - "apps/**" # รวมทุกโฟลเดอร์และซับโฟลเดอร์ใน apps/

👉 Monorepo คืออะไร

Features