Kodokon kodokon.com

โมดูล ES และ npm: การจัดระเบียบโปรเจกต์ของคุณ

จัดโครงสร้างโปรเจกต์ Node ด้วย package.json โมดูล ES ดีเพนเดนซีของ npm และสคริปต์ต่าง ๆ

9 นาที · 3 คำถาม

เปิดบทเรียนนี้ใน Kodokon

โปรเจกต์จริงไม่ได้อยู่ในไฟล์เดียว คุณจะแบ่งมันออกเป็น โมดูล (module) ไฟล์ที่ export สิ่งที่มันมีให้ และ import สิ่งที่มันต้องการ คุณรู้จักไวยากรณ์ import / export จากคอร์ส JavaScript อยู่แล้ว มาดูกันว่า Node เปิดใช้งานมันได้อย่างไร ทุกอย่างเริ่มต้นที่ package.json บัตรประจำตัวของโปรเจกต์ ไฟล์ในรูปแบบ JSON ที่อธิบายชื่อ เวอร์ชัน และการตั้งค่าของมัน ในการสร้างมัน ให้เข้าไปในโฟลเดอร์ว่าง ๆ แล้วรัน npm init -y (ตัวเลือก -y จะตอบรับคำตอบเริ่มต้นทั้งหมด) จากนั้นเพิ่มบรรทัด "type": "module" มันบอก Node ว่าไฟล์ .js ของคุณใช้โมดูล ES

JSON
{
  "name": "my-project",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "start": "node main.js",
    "dev": "node --watch main.js"
  }
}
package.json ของคุณหลังจาก npm init -y เติมด้วยบรรทัด type และสคริปต์สองตัวที่เราจะใช้ต่อไปข้างล่าง

มาสร้างสองไฟล์ในโฟลเดอร์นี้กัน math.js export ฟังก์ชันหนึ่ง และ main.js import มันเข้ามา รายละเอียดเฉพาะของ Node คือ การ import ไฟล์ในเครื่องต้องขึ้นต้นด้วย ./ และลงท้ายด้วยนามสกุล .js ทั้งสองอย่างนี้จำเป็นต้องมี ต่างจากที่เครื่องมือเว็บบางตัวยอมให้ละเว้นได้

JAVASCRIPT
// math.js
export function add(a, b) {
  return a + b;
}

// main.js
import { add } from "./math.js";

console.log(add(2, 3));
สองไฟล์แยกกัน รัน node main.js แล้วผลลัพธ์ 5 จะปรากฏขึ้น

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

BASH
npm install chalk
หลังจากคำสั่งนี้ chalk จะปรากฏใน dependencies และใน node_modules จากนั้นคุณสามารถ import มันได้เหมือนโมดูลทั่วไป

เสาหลักสุดท้าย คือ npm scripts ทางลัดของคำสั่งที่ประกาศไว้ในส่วน scripts ของ package.json npm run dev จะรันคำสั่งที่บันทึกไว้ภายใต้ชื่อ dev ไม่ว่าคำสั่งจริงจะยาวแค่ไหนก็ตาม สคริปต์ dev ของเราใช้ node --watch ตัวเลือกที่ รีสตาร์ตโปรแกรมโดยอัตโนมัติ ทุกครั้งที่มีไฟล์เปลี่ยนแปลง สะดวกมากในระหว่างการพัฒนา

BASH
npm run start
npm run dev
แต่ละคำสั่งจะรันสคริปต์ที่มีชื่อเดียวกัน หยุดโหมด watch ด้วย Ctrl+C

ทดสอบความรู้

ตรวจสอบว่าคุณจำประเด็นสำคัญของบทเรียนนี้ได้ครบถ้วน

  1. ไฟล์ package.json มีบทบาทอะไร?
    • อธิบายโปรเจกต์ คือ ชื่อ เวอร์ชัน สคริปต์ และดีเพนเดนซี
    • บรรจุโค้ด JavaScript หลักของโปรเจกต์
    • เก็บโค้ดของแพ็กเกจที่ดาวน์โหลดมา
    • แทนที่โฟลเดอร์ node_modules
  2. จะเกิดอะไรขึ้นเมื่อคุณรัน npm install chalk?
    • chalk ถูกคัดลอกตรงเข้าไปในไฟล์ main.js ของคุณ
    • chalk ถูกดาวน์โหลดเท่านั้น โดยไม่ทิ้งร่องรอย
    • chalk ถูกวางไว้ใน node_modules และเพิ่มเข้าไปใน dependencies
  3. ทำไมต้องเพิ่มบรรทัด type module ใน package.json?
    • เพื่อให้ npm ติดตั้งแพ็กเกจได้เร็วขึ้น
    • เพื่อให้ Node อ่านไฟล์ .js เป็นโมดูล ES (import/export)
    • เพื่อเผยแพร่โปรเจกต์บน npm โดยอัตโนมัติ