เกิดอะไรขึ้นเมื่อคุณรันคำสั่ง npm?

คุณกด Enter หลังจากพิมพ์คำสั่ง npm แล้วก็นั่งรอ ทันใดนั้น โปรเจกต์ของคุณก็ใช้งานได้ มันให้ความรู้สึกเหมือนมีเวทมนตร์

แต่มันไม่ใช่เวทมนตร์ มันคือกระบวนการส่งคำขอผ่านเครือข่าย (network requests), การวิเคราะห์โค้ด (code parsing) และการปรับแต่งไฟล์ให้เหมาะสม (file optimizations)

เลิกใช้คำสั่งแบบสุ่มสี่สุ่มห้า แล้วมาทำความเข้าใจกลไกเบื้องหลัง 6 คำสั่งหลักเหล่านี้กัน

  1. npm install คำสั่งนี้จะอ่านไฟล์ package.json ของคุณ และติดต่อกับ cloud registry เพื่อค้นหา dependencies ที่จำเป็น • ดาวน์โหลด package ต่างๆ ลงในโฟลเดอร์ node_modules • จัดการความขัดแย้งของเวอร์ชัน (version conflicts) • สร้างไฟล์ package-lock.json เพื่อบันทึกเวอร์ชันที่แน่นอนเอาไว้

  2. npm run format:check นี่คือขั้นตอนการตรวจสอบ โดยจะใช้เครื่องมืออย่าง Prettier ในการสแกนไฟล์ของคุณ • สร้างโครงสร้างจำลอง (virtual layout) ของโค้ดคุณ • เปรียบเทียบโค้ดของคุณกับกฎการเขียนโค้ด (style rules) ที่ตั้งไว้ • แจ้งเตือนข้อผิดพลาดโดยไม่มีการเปลี่ยนแปลงไฟล์ของคุณ

  3. npm run format คำสั่งนี้จะแก้ไขปัญหาที่พบจากการตรวจสอบ • รัน Prettier ในโปรเจกต์ของคุณ • เขียนไฟล์ของคุณใหม่เพื่อให้ตรงตามกฎการเขียนโค้ด • จัดการเรื่องการเว้นวรรคและการจัดรูปแบบให้โดยอัตโนมัติ

  4. npm run lint ให้คิดซะว่ามันคือเครื่องมือตรวจคำผิดสำหรับโค้ดของคุณ โดย ESLint จะสแกนหาข้อผิดพลาด เช่น: • ข้อผิดพลาดทางไวยากรณ์ (Syntax mistakes) • ตัวแปรที่ไม่ได้ใช้งาน (Unused variables) • การลืม import • การใช้งาน React Hook ที่ไม่ถูกต้อง

  5. npm run build คำสั่งนี้เตรียมแอปของคุณให้พร้อมสำหรับการใช้งานจริง โดยจะสร้างโฟลเดอร์ dist ขึ้นมา • ทำ tree shaking เพื่อลบโค้ดที่ไม่ได้ใช้งานออก • ทำการ minify โค้ด โดยการลบช่องว่างและย่อชื่อตัวแปรให้สั้นลง • รวม JavaScript, CSS และ assets ต่างๆ เข้าเป็นไฟล์ที่ปรับแต่งมาอย่างเหมาะสม (optimized files) • ไฟล์เหล่านี้พร้อมสำหรับการ deploy ไปยังเซิร์ฟเวอร์แล้ว

  6. npm run dev คำสั่งนี้จะเริ่มรัน local server เพื่อให้คุณทำงานได้ • ใช้ Native ES Modules ในการ compile ไฟล์เฉพาะเมื่อเบราว์เซอร์ร้องขอเท่านั้น • ใช้ Hot Module Replacement (HMR) เพื่ออัปเดตเว็บไซต์ของคุณทันทีโดยไม่ต้องรีเฟรชหน้าเว็บ

  7. npm run preview นี่คือการตรวจสอบขั้นตอนสุดท้าย โดยจะข้าม source code ของคุณไปและดูเฉพาะในโฟลเดอร์ dist เท่านั้น • จำลองการทำงานของแอปเมื่ออยู่บนเซิร์ฟเวอร์จริง • ช่วยให้คุณตรวจพบ bug ก่อนที่จะ deploy ไปยัง production

Terminal ไม่ใช่กล่องดำ การเข้าใจเครื่องมือเหล่านี้จะช่วยให้คุณ debug ได้เร็วขึ้นเมื่อเกิดปัญหา

มีคำสั่งไหนไหมที่เปลี่ยนวิธีการเขียนโค้ดของคุณหลังจากที่คุณเข้าใจการทำงานของมัน? บอกเราได้ที่ด้านล่างนี้

Source: https://dev.to/ashomondi/the-magic-under-the-terminal-what-actually-happens-when-you-run-npm-commands-13ba