JavaScript Academy · บทเรียน

package.json, สคริปต์ และ deps กับ devDeps

ทำความเข้าใจฟิลด์ใน package.json กำหนดสคริปต์อย่างง่าย และรู้ความแตกต่างระหว่าง dependencies กับ devDependencies

บทเรียน 1 จาก 38 ขั้นตอน

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

ทำไมต้องใช้ package.json

เป้าหมาย: อ่านและใช้ package.json

  • ฟิลด์สำคัญ: name, version, type
  • scripts: เรียกใช้คำสั่งสั้น ๆ
  • dependencies เทียบกับ devDependencies
  • เวอร์ชันแบบมีความหมาย (เครื่องหมาย caret/tilde) — ทำความรู้จักเบื้องต้น
package.json, สคริปต์ และ deps กับ devDeps — ภาพประกอบ 1

ภาพรวมฟิลด์

package.json คือไฟล์แสดงรายการข้อมูลโครงการ สคริปต์ และรายการการพึ่งพา

// Emulate a minimal package.json as a JS object
const pkg = {
  name: "hello-app",
  version: "1.0.0",
  type: "module",
  scripts: {
    start: "node index.js",
    build: "echo building...",
    test: "echo tests..."
  },
  dependencies: {
    "chalk": "^5.3.0"
  },
  devDependencies: {
    "eslint": "^9.0.0"
  }
};

console.log("name:", pkg.name);
console.log("version:", pkg.version);
console.log("type:", pkg.type);
console.log("scripts:", Object.keys(pkg.scripts));
package.json, สคริปต์ และ deps กับ devDeps — ภาพประกอบ 2

สคริปต์ตามชื่อ

เพิ่มคำสั่งไว้ใต้ scripts (เช่น build, test) แล้วเรียกใช้ด้วยตัวจัดการแพ็กเกจของคุณ

// Tiny emulator for "npm run <name>"
function runScript(name) {
  const cmd = pkg.scripts[name];
  if (!cmd) {
    console.log("no such script:", name);
    return;
  }
  console.log("running:", name, "->", cmd);
}

runScript("build");
runScript("test");
runScript("missing");
package.json, สคริปต์ และ deps กับ devDeps — ภาพประกอบ 3

อะไรควรอยู่ที่ไหน

dependencies คือสิ่งที่จำเป็นขณะแอปทำงาน ส่วน devDependencies คือเครื่องมือที่ใช้เฉพาะระหว่างการพัฒนา

// List production deps vs development-time tools
function listDeps() {
  console.log("deps:", Object.keys(pkg.dependencies));
  console.log("devDeps:", Object.keys(pkg.devDependencies));
}

// Rule of thumb in comments:
// dependencies -> needed at runtime (your app uses them when running)
// devDependencies -> only for development (lint, test, build tools)

listDeps();
package.json, สคริปต์ และ deps กับ devDeps — ภาพประกอบ 4

พื้นฐาน Semver

Semver ใช้ช่วงค่าเพื่อระบุการอัปเดตที่อนุญาต: caret (อัปเดตเวอร์ชันรองและแพตช์), tilde (อัปเดตแพตช์) หรือระบุเวอร์ชันตรงทั้งหมด

// Semantic version ranges (intent only)
// ^1.2.3  -> allow minor/patch updates (1.x compatible)
// ~1.2.3  -> allow patch updates (1.2.x)
// 1.2.3   -> exact version

const ranges = ["^1.2.3", "~1.2.3", "1.2.3"];
for (const r of ranges) {
  console.log("range:", r);
}
package.json, สคริปต์ และ deps กับ devDeps — ภาพประกอบ 5

บันทึกเชิงปฏิบัติ

เคล็ดลับ:

  • เขียนสคริปต์ให้สั้นและชัดเจน (เช่น build, test)
  • ไลบรารีขณะทำงาน → dependencies; เครื่องมือพัฒนา → devDependencies
  • เริ่มต้นด้วยช่วงค่า ^ แล้วล็อกเวอร์ชันให้ตรงทั้งหมดภายหลังหากจำเป็น
package.json, สคริปต์ และ deps กับ devDeps — ภาพประกอบ 6

แบบทดสอบฟิลด์ scripts

ตรวจสอบอย่างรวดเร็ว: คำสั่งต่าง ๆ อยู่ที่ใด

package.json, สคริปต์ และ deps กับ devDeps — ภาพประกอบ 7

สรุป

สรุป: package.json แสดงข้อมูลโครงการ มี scripts สำหรับเรียกใช้งาน และแยก dependencies (ขณะทำงาน) ออกจาก devDependencies (เครื่องมือพัฒนา) ใช้ช่วงค่า Semver ที่เรียบง่ายเพื่อให้เป็นปัจจุบันอยู่เสมอ

package.json, สคริปต์ และ deps กับ devDeps — ภาพประกอบ 8
เริ่มต้นได้ฟรี

เรียนรู้ JavaScript ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส
59
บทเรียน
200

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

บทเรียน “package.json, สคริปต์ และ deps กับ devDeps” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “package.json, สคริปต์ และ deps กับ devDeps”

ทำความเข้าใจฟิลด์ใน package.json กำหนดสคริปต์อย่างง่าย และรู้ความแตกต่างระหว่าง dependencies กับ devDependencies คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “package.json, สคริปต์ และ deps กับ devDeps” ใช้เวลานานแค่ไหน

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

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

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

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

  1. package.json, สคริปต์ และ deps กับ devDeps
  2. npx และช่วงเวอร์ชันตามหลักความหมาย
  3. เครื่องมือภายในโครงการกับทั่วระบบ ไบนารี และเวิร์กโฟลว์ที่เหมาะกับทีม
← กลับไปที่ JavaScript Academy