0Pricing
Frontend Academy · บทเรียน

npm และ package.json: dependencies และ scripts

เริ่มต้นโปรเจกต์ด้วย npm init เพิ่ม dependencies สำหรับรันไทม์และการพัฒนา เขียน npm scripts ที่นำกลับมาใช้ซ้ำได้ และทำความเข้าใจ semver

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

npm คืออะไร

npm (ตัวจัดการแพ็กเกจของ Node) ใช้จัดการการพึ่งพาและสคริปต์ของโครงการ โดยอ่าน package.json เพื่อทราบสิ่งที่ต้องติดตั้ง และเขียน package-lock.json เพื่อบันทึกเวอร์ชันที่แน่นอน มีการเผยแพร่แพ็กเกจมากกว่าสองล้านรายการในรีจิสทรี npm

การเริ่มต้นโครงการ

npm init -y สร้าง package.json พร้อมค่าเริ่มต้น แฟล็ก -y ยอมรับค่าเริ่มต้นทั้งหมดโดยไม่แสดงคำถาม

mkdir my-project && cd my-project
npm init -y
# Creates package.json

ไฟล์ package.json

ฟิลด์สำคัญ ได้แก่ name, version, description, main (จุดเริ่มต้น), scripts, dependencies และ devDependencies

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "jest"
  },
  "dependencies": {
    "react": "^18.3.0"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

การติดตั้งแพ็กเกจ

npm install package จะเพิ่มแพ็กเกจลงในการพึ่งพา npm install -D package จะเพิ่มลงใน devDependencies (ไม่จำเป็นในระบบใช้งานจริง) ส่วน npm install โดยไม่มีอาร์กิวเมนต์จะติดตั้งทุกอย่างใน package.json

npm install react react-dom      # production dep
npm install -D vite jest eslint  # dev deps only
npm install                      # install all from package.json

การกำหนดเวอร์ชันเชิงความหมาย

npm ใช้ semver: major.minor.patch คำนำหน้า ^ อนุญาตให้อัปเดตเป็นเวอร์ชันที่เข้ากันได้ (มี major เดียวกัน) คำนำหน้า ~ อนุญาตเฉพาะการอัปเดต patch ส่วนเวอร์ชันที่ระบุแน่นอนจะไม่มีคำนำหน้า

"react": "^18.3.0"  // 18.3.0 to < 19.0.0 (compatible)
"lodash": "~4.17.21" // 4.17.21 to < 4.18.0 (patch only)
"fixed": "1.2.3"     // exactly 1.2.3

สคริปต์ npm

กำหนดคำสั่งในฟิลด์ scripts แล้วเรียกใช้ด้วย npm run scriptname สคริปต์ในตัว เช่น test และ start เรียกใช้ได้โดยตรงด้วย npm test หรือ npm start

"scripts": {
  "dev": "vite",
  "build": "tsc && vite build",
  "preview": "vite preview",
  "test": "jest --coverage",
  "lint": "eslint src",
  "typecheck": "tsc --noEmit"
}

npm run กับ npx

npm run ใช้เรียกสคริปต์จาก package.json ส่วน npx จะเรียกใช้แพ็กเกจจาก node_modules หรือดาวน์โหลดและเรียกใช้ชั่วคราว เหมาะสำหรับคำสั่งที่ใช้ครั้งเดียว เช่น npx create-vite@latest

package-lock.json

package-lock.json บันทึกเวอร์ชันที่แน่นอนของแพ็กเกจทุกตัวที่ติดตั้ง รวมถึงการพึ่งพาต่อเนื่องของแพ็กเกจเหล่านั้น ควรคอมมิตไฟล์นี้เพื่อให้ผู้พัฒนาทุกคนและ CI ใช้เวอร์ชันเดียวกัน และห้ามแก้ไขด้วยตนเอง

node_modules และ .gitignore

ห้ามคอมมิต node_modules เพราะอาจมีขนาดหลายร้อย MB ควรเพิ่มลงใน .gitignore เสมอ ทุกคนสามารถกู้คืนโฟลเดอร์นี้ได้ด้วย npm install

# .gitignore
node_modules/

การอัปเดตและการนำแพ็กเกจออก

npm update อัปเดตแพ็กเกจภายในช่วง semver ของแพ็กเกจนั้น npm outdated แสดงแพ็กเกจที่สามารถอัปเดตได้ ส่วน npm uninstall package จะลบแพ็กเกจออก

npm outdated                # show outdated packages
npm update react             # update to latest compatible
npm uninstall lodash         # remove package

npm เทียบกับ yarn และ pnpm

ทางเลือกอื่นนอกเหนือจาก npm ได้แก่ yarn (ทำงานเร็วกว่า รองรับเวิร์กสเปซ และ Plug'n'Play) และ pnpm (ใช้พื้นที่ดิสก์อย่างมีประสิทธิภาพด้วยคลัง symlink จัดการการขึ้นต่อกันอย่างเข้มงวด และเร็วที่สุดสำหรับโมโนรีโป) คำสั่งหลักของทั้งสามเครื่องมือมีลักษณะคล้ายกัน

# pnpm equivalents:
pnpm install
pnpm add react
pnpm add -D vite
pnpm run dev

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

แฟล็ก -D ทำหน้าที่อะไรเมื่อเรียกใช้ npm install -D jest?

สรุป: npm และ package.json

npm init สร้าง package.json ส่วน npm install เพิ่มการขึ้นต่อกัน -D ใช้สำหรับ devDependencies เครื่องหมาย ^ ใน semver หมายถึงการอัปเดตที่เข้ากันได้ สคริปต์ใช้เรียกใช้คำสั่งด้วย npm run ส่วน package-lock.json จะบันทึกเวอร์ชันที่แน่นอน — ให้คอมมิตไฟล์นี้ไว้ เพิ่ม node_modules ใน .gitignore และใช้ npx เรียกใช้คำสั่งของแพ็กเกจแบบครั้งเดียว

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

บทเรียน “npm และ package.json: dependencies และ scripts” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “npm และ package.json: dependencies และ scripts”

เริ่มต้นโปรเจกต์ด้วย npm init เพิ่ม dependencies สำหรับรันไทม์และการพัฒนา เขียน npm scripts ที่นำกลับมาใช้ซ้ำได้ และทำความเข้าใจ semver คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “npm และ package.json: dependencies และ scripts” ใช้เวลานานแค่ไหน

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

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

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

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

  1. ES Modules: import, export และ dynamic import
  2. npm และ package.json: dependencies และ scripts
  3. Vite: เซิร์ฟเวอร์พัฒนาและการบิลด์
  4. แนวคิดการรวมโค้ด: tree shaking และ code splitting
← กลับไปที่ Frontend Academy