Frontend Academy · บทเรียน

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

บทเรียน 3 จาก 415 ขั้นตอน

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

เหตุผลที่ควรเผยแพร่ไปยัง npm

หากมีแอปมากกว่าหนึ่งแอปใช้ระบบออกแบบของคุณ ให้เผยแพร่เป็นแพ็กเกจ ผู้ใช้งานติดตั้งด้วย npm/yarn/pnpm ล็อกเวอร์ชัน และอัปเดตตามกำหนดเวลาของตนเอง

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

เวอร์ชันใช้รูปแบบ MAJOR.MINOR.PATCH MAJOR: การเปลี่ยนแปลงที่ไม่เข้ากันได้ MINOR: ฟีเจอร์ใหม่ที่เข้ากันได้กับของเดิม PATCH: แก้ไขข้อบกพร่องเท่านั้น

เมื่อใดควรเพิ่มเวอร์ชัน

เปลี่ยนชื่อพร็อพใช่ไหม MAJOR เพิ่มพร็อพใหม่ที่ไม่บังคับใช่ไหม MINOR แก้ข้อบกพร่องของ CSS ใช่ไหม PATCH รุ่นก่อน 1.0 (0.x.y) สามารถทำให้เกิดการเปลี่ยนแปลงที่ไม่เข้ากันได้ใน MINOR ได้ — แต่ควรคำนึงถึงผู้ใช้งาน

package.json — ไฟล์แสดงข้อมูลแพ็กเกจ

กำหนดค่ารูปแบบที่แพ็กเกจของคุณจะแสดงบน npm

{
  "name": "@yourorg/design-system",
  "version": "1.4.2",
  "main": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",
  "exports": {
    ".": { "import": "./dist/index.esm.js", "require": "./dist/index.cjs.js" },
    "./theme": "./dist/theme.js"
  },
  "files": ["dist", "README.md"],
  "peerDependencies": { "react": "^18.0.0" }
}

ผลลัพธ์จากการสร้าง

ส่งมอบ CommonJS, ESM และคำประกาศประเภท เครื่องมืออย่าง tsup หรือ vite build --lib จัดการเรื่องนี้ให้

// tsup.config.ts
export default {
  entry: ['src/index.ts'],
  format: ['cjs', 'esm'],
  dts: true,
  clean: true,
  external: ['react', 'react-dom']
};

// package.json: "build": "tsup"

peerDependencies

ระบุ React/Vue และอื่น ๆ เป็น peerDependencies เพื่อให้ผู้ใช้งานใช้เวอร์ชันของตนเอง หากระบุเป็น dependencies ปกติ แพ็กเกจจะรวมสิ่งเหล่านี้ซ้ำสองครั้ง ส่งผลให้ hooks และบริบททำงานผิดพลาด

รองรับ Tree-shaking ได้ดี

ใช้การส่งออกแบบ ESM และหลีกเลี่ยงผลข้างเคียง เพื่อให้เครื่องมือรวมโค้ดลบ components ที่ไม่ได้ใช้ได้ ระบุใน package.json: "sideEffects": false (หรือระบุไฟล์เฉพาะ เช่น CSS)

การเผยแพร่ไปยัง npm

เข้าสู่ระบบครั้งเดียว จากนั้นจึงเผยแพร่

npm login

# Bump version + publish:
npm version patch   # 1.4.2 -> 1.4.3
npm publish

# Or scoped public package:
npm publish --access public

การทำรีลีสอัตโนมัติด้วย Changesets

Changesets คือชุดเครื่องมือสมัยใหม่สำหรับการเผยแพร่โมโนรีโปและไลบรารี ในคำขอผสานแต่ละครั้งจะมีไฟล์ “changeset” อธิบายการเปลี่ยนแปลง จากนั้น CI สำหรับรีลีสจะเพิ่มเวอร์ชันและเผยแพร่

npm install -D @changesets/cli
npx changeset init

# In each PR:
npx changeset
# pick package, type (major/minor/patch), describe change
# commits .changeset/<random>.md

# CI on main:
npx changeset version  # bumps versions in package.json + generates changelog
npx changeset publish  # publishes to npm

บันทึกการเปลี่ยนแปลงอัตโนมัติ

Changesets สร้าง CHANGELOG.md สำหรับแต่ละแพ็กเกจโดยอัตโนมัติจากคำอธิบายใน changeset ผู้ใช้งานจึงอ่านได้ว่าแต่ละเวอร์ชันมีการเปลี่ยนแปลงอะไร

แท็กการเผยแพร่ของ npm

ใช้ dist-tags สำหรับรุ่นก่อนเผยแพร่: npm publish --tag beta จะเผยแพร่โดยไม่เขียนทับ latest ผู้ใช้งานเลือกติดตั้งรุ่นนี้ได้ด้วย npm install @yourorg/design-system@beta

รีจิสทรีส่วนตัว

แพ็กเกจภายในสามารถใช้ GitHub Packages, GitLab Package Registry หรือ Verdaccio ที่โฮสต์เองได้ ตั้งค่าด้วย .npmrc: @yourorg:registry=https://npm.pkg.github.com

การเลิกใช้เวอร์ชันเก่า

ทำเครื่องหมายเวอร์ชันว่าเลิกใช้แล้ว เพื่อแสดงคำเตือนแก่ผู้ติดตั้ง

npm deprecate @yourorg/design-system@1.0.0 'Use 2.x for React 18 support'

ตรวจสอบความเข้าใจอย่างรวดเร็ว

หากคุณเปลี่ยนชื่อพร็อพของ component ที่ส่งออก ต้องเพิ่มเวอร์ชัน SemVer ประเภทใด

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป: การกำหนดเวอร์ชันและการเผยแพร่

SemVer: MAJOR.MINOR.PATCH — การเปลี่ยนแปลงที่ไม่เข้ากันได้ ฟีเจอร์ และการแก้ไข สร้าง CJS + ESM + types (tsup, vite --lib) ใช้ React/Vue เป็น peerDependencies ใช้ sideEffects:false เพื่อรองรับ tree-shaking เผยแพร่ด้วย npm publish หรือทำให้เป็นอัตโนมัติด้วย Changesets สร้าง CHANGELOG โดยอัตโนมัติ ใช้ dist-tags สำหรับรุ่นเบตา และใช้รีจิสทรีส่วนตัวสำหรับแพ็กเกจภายใน

เริ่มต้นได้ฟรี

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

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

คอร์ส: 41
บทเรียน: 163

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

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

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

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

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

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

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

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

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

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

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

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

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

← กลับไปที่ Frontend Academy