npm: พื้นฐาน, ตัวจัดการแพ็คเกจสำหรับ React Native และ Node.js

npm คืออะไร — ตัวจัดการแพ็คเกจ Node.js?

npm ถูกสร้างขึ้นในปี 2010 โดย Isaac Schlueter เพื่อเป็นโซลูชันสำหรับจัดการ dependencies ของ Node.js ตั้งแต่ปี 2014 npm ถูกจัดการโดย npm, Inc. ซึ่งถูก Microsoft/GitHub เข้าซื้อในปี 2020 เครื่องมือประกอบด้วยสองส่วน: CLI (บรรทัดคำสั่ง) สำหรับติดตั้งและจัดการแพ็คเกจ และ Registry — คลังกลางของโมดูลที่เผยแพร่ทั้งหมดที่ registry.npmjs.org

npm Registry เป็นรีจิสทรีแพ็คเกจที่ใหญ่ที่สุด: มากกว่า 2 ล้าน แพ็คเกจและมากกว่า 10 พันล้านดาวน์โหลดต่อเดือน แต่ละแพ็คเกจมีเวอร์ชัน SemVer, คำอธิบาย, dependencies, ใบอนุญาต และผู้แต่ง การเผยแพร่แพ็คเกจของคุณเองทำผ่าน npm publish npm รองรับแพ็คเกจแบบมีขอบเขตสำหรับองค์กร (@scope/package), รีจิสทรีส่วนตัว และการตรวจสอบความปลอดภัยในตัว

Node.js เวอร์ชัน 18+ มาพร้อม npm 9+ ที่มีประสิทธิภาพดีขึ้น, workspaces สำหรับ monorepo และกลไก peer dependencies ที่ได้รับการออกแบบใหม่ ระบบนิเวศ npm ครอบคลุม JavaScript ฝั่งเซิร์ฟเวอร์, frontend (React, Vue, Angular), การพัฒนามือถือ (React Native), เครื่องมือ build (Webpack, Vite) และยูทิลิตี้ CLI npm เป็นช่องทางหลักในการแจกจ่ายไลบรารี JavaScript

คุณสมบัติหลักของ npm

npm install — คำสั่งหลักที่อ่าน package.json และ package-lock.json เพื่อติดตั้ง dependencies ทั้งหมดใน node_modules ในการทำงานครั้งแรก npm จะคำนวณกราฟ dependencies, แก้ไขข้อขัดแย้งของเวอร์ชัน และสร้าง package-lock.json คำสั่ง npm install <package> ติดตั้งแพ็คเกจเฉพาะ; แฟลก --save-dev เพิ่มเข้าไปใน devDependencies, --global ติดตั้งทั่วโลก

npx — ตัวเรียกใช้แพ็คเกจที่มาพร้อมกับ npm ตั้งแต่เวอร์ชัน 5.2 npx อนุญาตให้เรียกใช้ยูทิลิตี้ CLI โดยไม่ต้องติดตั้งทั่วโลก: npx react-native init หรือ npx create-react-app my-app npx ดาวน์โหลดแพ็คเกจไปยังแคชชั่วคราว เรียกใช้ และล้างข้อมูลเมื่อเสร็จสิ้น npx ยังมีประโยชน์สำหรับการเรียกใช้เครื่องมือเวอร์ชันเฉพาะ

npm audit สแกนทรี dependencies เพื่อหาช่องโหว่ที่รู้จักจากฐานข้อมูล npm คำสั่งแสดงรายงานพร้อมระดับความรุนแรง (critical, high, moderate) และแนะนำ npm audit fix เพื่ออัปเดตแพ็คเกจที่มีช่องโหว่โดยอัตโนมัติ npm cache จัดเก็บแพ็คเกจที่ดาวน์โหลดในเครื่อง npm cache clean --force ล้างแคชเมื่อมีปัญหาการติดตั้ง npm outdated แสดงแพ็คเกจที่ล้าสมัย

# คำสั่ง npm พื้นฐาน
$ npm install
$ npm install react-native-webview --save
$ npm install typescript --save-dev
# การเรียกใช้โดยไม่ต้องติดตั้งทั่วโลก
$ npx react-native init MyApp
# การตรวจสอบความปลอดภัย
$ npm audit --fix

โครงสร้าง package.json และการจัดการ dependencies

package.json คือไฟล์ JSON ในรูทของโปรเจกต์ที่อธิบายเมตาดาต้า, dependencies และการกำหนดค่า ฟิลด์ที่จำเป็น: name (ชื่อแพ็คเกจที่ไม่ซ้ำกัน) และ version (เวอร์ชัน SemVer เช่น 1.0.0) ไฟล์ถูกสร้างขึ้นด้วย npm init -y สำหรับการเริ่มต้นอย่างรวดเร็วหรือด้วยตนเอง

Semantic Versioning (SemVer) เป็นมาตรฐานการกำหนดเวอร์ชันในรูปแบบ MAJOR.MINOR.PATCH เวอร์ชันหลักเปลี่ยนแปลงเมื่อมีการเปลี่ยนแปลง API ที่ไม่เข้ากันได้ เวอร์ชันรองเมื่อเพิ่มฟังก์ชัน (ย้อนหลังเข้ากันได้) และแพตช์เมื่อแก้ไขบั๊ก สัญลักษณ์ ^ ก่อนเวอร์ชันอนุญาตให้อัปเดตเวอร์ชันรองและแพตช์ ในขณะที่ ~ อนุญาตเฉพาะการอัปเดตแพตช์

{
  "name": "my-app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios"
  },
  "dependencies": {
    "react": "^18.3.0",
    "react-native": "^0.76.0"
  },
  "devDependencies": {
    "typescript": "^5.5.0",
    "@types/react": "^18.3.0"
  }
}

npm ในการพัฒนา React Native

โปรเจกต์ React Native ใช้ npm อย่างแข็งขันในการจัดการ dependencies ชุดมาตรฐานประกอบด้วย react, react-native, ไลบรารีการนำทาง (React Navigation), ไลบรารี HTTP (axios), การจัดการสถานะ (Redux, Zustand) และส่วนประกอบ UI npm อนุญาตให้ติดตั้งแพ็คเกจที่เข้ากันได้นับพันจากรีจิสทรี

npx pod-install — คำสั่งที่จำเป็นหลังจากติดตั้งโมดูลเนทีฟใน React Native สำหรับ iOS npm สร้าง Podfile.lock โดยอัตโนมัติตาม package-lock.json ในโปรเจกต์ Expo ใช้ expo install แทน npm install เพราะเลือกเวอร์ชันที่เข้ากันได้กับเวอร์ชัน Expo SDK ปัจจุบัน

ข้อขัดแย้งของเวอร์ชัน เป็นปัญหาทั่วไปใน React Native: react-native-reanimated, react-native-gesture-handler และ react-native-safe-area-context ต้องการเวอร์ชันที่สอดคล้องกัน วิธีแก้คืออัปเดตแพ็คเกจทั้งหมดเป็นเวอร์ชันที่เข้ากันได้ล่าสุดหรือใช้ --legacy-peer-deps package-lock.json สำคัญสำหรับโมดูลเนทีฟที่คอมไพล์ผ่าน CocoaPods และ Gradle

การเปรียบเทียบ npm กับตัวจัดการอื่น

npm เป็นตัวจัดการแพ็คเกจมาตรฐานที่มาพร้อมกับ Node.js ตัวเลือกหลัก: yarn (สร้างโดย Facebook ในปี 2016) และ pnpm (รวดเร็ว พร้อมฮาร์ดลิงก์) ตั้งแต่ npm 5 ความแตกต่างด้านความเร็วและฟังก์ชันระหว่าง npm และ yarn นั้นน้อยมาก npm 7+ เพิ่ม workspaces ทำให้แข่งขันได้สำหรับ monorepo

ตาม State of JS 2025: 62% ของนักพัฒนาใช้ npm, 35% ใช้ yarn (ส่วนใหญ่เป็นโปรเจกต์เก่าและผู้ชื่นชอบ PnP) และ 3% ใช้ pnpm สำหรับโปรเจกต์ React Native ทั้งสองเครื่องมือทำงานได้เท่าเทียมกัน แต่ npm พบได้บ่อยกว่าในโปรเจกต์ที่ใช้ Expo SDK 50+ และการเริ่มต้น React Native ใหม่

yarn ยังคงข้อได้เปรียบใน monorepo ขนาดใหญ่พิเศษ (100+ แพ็คเกจ) เนื่องจากการใช้งาน workspaces และ Plug'n'Play ที่สมบูรณ์กว่า pnpm ชนะในด้านการประหยัดพื้นที่ดิสก์ผ่านฮาร์ดลิงก์ไปยังสโตร์ส่วนกลาง การเลือกตัวจัดการขึ้นอยู่กับความชอบของทีมและโครงสร้างพื้นฐาน