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

การเผยแพร่ไปยัง npm และการกำหนดเวอร์ชันเชิงความหมาย

ฟิลด์ใน package.json (main, module, exports) บันทึกการเปลี่ยนแปลง semantic-release และขั้นตอนการเผยแพร่ด้วย npm

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

เตรียมเผยแพร่

การเผยแพร่ทำให้ติดตั้งไลบรารีของคุณได้ผ่าน npm install ก่อนหน้านั้น package.json ต้องประกาศจุดเข้าอย่างถูกต้อง และคุณต้องควบคุมว่าไฟล์ใดจะถูกส่งไปพร้อมแพ็กเกจ

ฟิลด์ main และ module

main ชี้ไปยังการสร้างแบบ CommonJS สำหรับเครื่องมือรุ่นเก่า ส่วน module ชี้ไปยังการสร้างแบบ ESM เพื่อให้ตัวรวมสมัยใหม่เลือกรุ่นที่สามารถตัดโค้ดที่ไม่ได้ใช้ออกได้

{
  "main": "./dist/my-ui-lib.cjs.js",
  "module": "./dist/my-ui-lib.es.js"
}

แผนผัง exports

ฟิลด์ exports สมัยใหม่กำหนดจุดเข้าแบบมีเงื่อนไข โดยมีลำดับความสำคัญเหนือ main/module และควบคุมการเข้าถึงเส้นทางย่อย

{
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/my-ui-lib.es.js",
      "require": "./dist/my-ui-lib.cjs.js"
    },
    "./style.css": "./dist/style.css"
  }
}

การส่งออกแบบมีเงื่อนไข

เงื่อนไข import, require และ types ช่วยให้ Node และตัวรวมแก้ไขไฟล์ที่เหมาะสมสำหรับ ESM, CommonJS และ TypeScript ตามลำดับ

การควบคุมไฟล์ที่เผยแพร่

ใช้ฟิลด์ files เพื่อกำหนดรายการไฟล์ที่อนุญาตให้ส่งไป หรือใช้ .npmignore เพื่อกำหนดรายการไฟล์ที่ไม่อนุญาต การส่งเฉพาะ dist และไม่นำต้นฉบับกับการทดสอบไปด้วยจะช่วยให้แพ็กเกจมีขนาดเล็ก

{
  "files": ["dist"]
}

.npmignore

หากต้องการกำหนดรายการไฟล์ที่ไม่อนุญาต .npmignore จะยกเว้นไฟล์แม้ไม่ได้ตั้งค่าฟิลด์ files หากไม่มีทั้งสองอย่าง npm จะเผยแพร่เกือบทุกไฟล์

# .npmignore
src
tests
vite.config.ts
*.log

ดูตัวอย่างแพ็กเกจด้วย npm pack

เรียกใช้ npm pack เพื่อสร้างไฟล์บีบอัดและตรวจสอบอย่างละเอียดว่าไฟล์ใดจะถูกเผยแพร่จริง ซึ่งเป็นการตรวจสอบความปลอดภัยที่สำคัญก่อนเผยแพร่

npm pack
# inspect the listed files; nothing secret should appear

การกำหนดรุ่นเชิงความหมาย

SemVer ใช้รูปแบบ MAJOR.MINOR.PATCH ให้เพิ่มรุ่น แพตช์ สำหรับการแก้ไขข้อผิดพลาดที่เข้ากันได้กับการใช้งานเดิม รุ่น ย่อย สำหรับฟีเจอร์ที่เข้ากันได้กับการใช้งานเดิม และรุ่น หลัก สำหรับการเปลี่ยนแปลงที่ทำให้การใช้งานเดิมเสียหาย

คำสั่งเพิ่มรุ่นด้วย npm

คำสั่ง npm version จะเพิ่มรุ่นใน package.json และสร้างแท็ก git ในขั้นตอนเดียว

npm version patch   # 1.0.0 -> 1.0.1
npm version minor   # 1.0.1 -> 1.1.0
npm version major   # 1.1.0 -> 2.0.0

การเผยแพร่แพ็กเกจด้วย npm

npm publish จะอัปโหลดแพ็กเกจ แพ็กเกจสาธารณะที่มีขอบเขตจำเป็นต้องใช้แฟล็ก --access public ในครั้งแรก

npm publish --access public

prepublishOnly และแท็กการเผยแพร่

สคริปต์ prepublishOnly ช่วยให้มีการสร้างใหม่ก่อนเผยแพร่ และ --tag next จะเผยแพร่รุ่นก่อนเปิดตัวโดยไม่ย้ายแท็ก latest

{
  "scripts": {
    "prepublishOnly": "npm run build"
  }
}
// npm publish --tag next

ตรวจสอบอย่างรวดเร็ว

คุณเพิ่มพร็อพเสริมใหม่โดยไม่ทำให้การใช้งานเดิมเสียหาย ควรเพิ่มรุ่นแบบใด

สรุป

กำหนดค่า main, module และแผนผัง exports แบบมีเงื่อนไข (import/require/types) และควบคุมไฟล์ที่ส่งไปด้วย files หรือ .npmignore ดูตัวอย่างด้วย npm pack จากนั้นเพิ่มรุ่นตาม SemVer โดยใช้ npm version patch/minor/major และเผยแพร่ด้วย npm publish (เพิ่ม --access public สำหรับแพ็กเกจที่มีขอบเขต)

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

บทเรียน “การเผยแพร่ไปยัง npm และการกำหนดเวอร์ชันเชิงความหมาย” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การเผยแพร่ไปยัง npm และการกำหนดเวอร์ชันเชิงความหมาย”

ฟิลด์ใน package.json (main, module, exports) บันทึกการเปลี่ยนแปลง semantic-release และขั้นตอนการเผยแพร่ด้วย npm คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “การเผยแพร่ไปยัง npm และการกำหนดเวอร์ชันเชิงความหมาย” ใช้เวลานานแค่ไหน

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

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

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

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

  1. การกำหนดค่าโหมดไลบรารีของ Vite
  2. คำประกาศ TypeScript สำหรับไลบรารีคอมโพเนนต์
  3. การตัดโค้ดที่ไม่ใช้และการนำเข้าอัตโนมัติ
  4. การเผยแพร่ไปยัง npm และการกำหนดเวอร์ชันเชิงความหมาย
← กลับไปที่ Vue Academy