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

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

กำหนดเวอร์ชันและเผยแพร่ไลบรารีของคุณ

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

การแบ่งปันไลบรารีของคุณกับโลก

เมื่อสร้างเป็นรูปแบบแพ็กเกจ Angular แล้ว ไลบรารีจะถูกเผยแพร่ไปยังรีจิสทรี ซึ่งโดยปกติคือ npm เพื่อให้โครงการใด ๆ ติดตั้งได้ด้วย npm install บทเรียนนี้ครอบคลุมการกำกับรุ่นและขั้นตอนการเผยแพร่

เผยแพร่ผลลัพธ์ dist ไม่ใช่ซอร์ส

คุณต้องเผยแพร่แพ็กเกจที่สร้างแล้วใน dist/<lib> ซึ่งมี package.json ที่สร้างขึ้นและบันเดิลที่คอมไพล์แล้ว ไม่ใช่โครงการซอร์สดิบ ขั้นตอนการสร้างนี่เองที่ทำให้ผู้อื่นนำแพ็กเกจไปใช้ได้

ng build ui-kit --configuration production
cd dist/ui-kit

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

แพ็กเกจ npm ใช้ semver: MAJOR.MINOR.PATCH เพิ่ม PATCH สำหรับการแก้ไข เพิ่ม MINOR สำหรับฟีเจอร์ที่ใช้งานร่วมกับเวอร์ชันเดิมได้ และเพิ่ม MAJOR สำหรับการเปลี่ยนแปลงที่ทำให้ใช้งานร่วมกันไม่ได้ ผู้ใช้พึ่งพาหลักการนี้เพื่ออัปเกรดอย่างปลอดภัย

0.0.1 -> 0.1.0   # new feature, no breaks (minor)
0.1.0 -> 0.1.1   # bug fix (patch)
0.1.1 -> 1.0.0   # breaking change (major)

การกำหนดรุ่น

รุ่นมาจาก package.json ของไลบรารีเอง อัปเดตก่อนสร้าง หรือใช้ npm version เพื่อเพิ่มรุ่นอย่างสอดคล้องกัน

# inside projects/ui-kit (or use the field directly)
npm version minor   # bumps and tags the version

การเข้าสู่ระบบ npm

ยืนยันตัวตนกับรีจิสทรีก่อนเผยแพร่ npm login จะจัดเก็บโทเค็นเพื่อให้คำสั่งเผยแพร่ได้รับอนุญาต

npm login
# enter username, password / token, email

การเผยแพร่

จากไดเรกทอรีแพ็กเกจที่สร้างแล้ว ให้เรียกใช้ npm publish npm จะอัปโหลดแพ็กเกจและทำให้ติดตั้งได้ด้วยชื่อและรุ่นของแพ็กเกจ

cd dist/ui-kit
npm publish

แพ็กเกจแบบมีขอบเขต

แพ็กเกจขององค์กรใช้ขอบเขต เช่น @myorg/ui-kit โดยค่าเริ่มต้น แพ็กเกจแบบมีขอบเขตจะเป็นส่วนตัวบน npm ให้ส่ง --access public เพื่อเผยแพร่แบบสาธารณะ

npm publish --access public

การติดตั้งไลบรารีที่เผยแพร่แล้ว

จากนั้นผู้ใช้จะเพิ่มไลบรารีนี้เหมือนการพึ่งพาทั่วไปและนำเข้าจาก API สาธารณะ Angular จะค้นหาบันเดิล FESM และชนิดข้อมูลผ่าน package.json ที่สร้างขึ้น

npm install ui-kit
// then:
import { ButtonComponent } from 'ui-kit';

รุ่นก่อนเผยแพร่และแท็ก

เผยแพร่รุ่นที่ยังไม่เสถียรภายใต้แท็กการแจกจ่าย เช่น next เพื่อไม่ให้กลายเป็นรุ่นเริ่มต้น latest ผู้ใช้ต้องเลือกใช้โดยระบุอย่างชัดเจน

npm publish --tag next
npm install ui-kit@next

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

สำหรับไลบรารีภายในเท่านั้น ให้เผยแพร่ไปยังรีจิสทรีส่วนตัว (แพ็กเกจส่วนตัวของ npm, GitHub Packages หรือ Verdaccio) โดยกำหนดค่าใน .npmrc ขั้นตอนการเผยแพร่เหมือนเดิม ต่างกันเพียง URL ของรีจิสทรีและการยืนยันตัวตน

ทำงานอัตโนมัติใน CI

ทีมที่มีวุฒิภาวะจะเผยแพร่จาก CI เมื่อมีรุ่นที่ติดแท็ก: ไปป์ไลน์จะสร้างไลบรารี เรียกใช้การทดสอบ และเรียกใช้ npm publish พร้อมโทเค็นที่จัดเก็บไว้ วิธีนี้ช่วยหลีกเลี่ยงข้อผิดพลาดจากการทำด้วยตนเอง และทำให้ตรวจสอบรุ่นย้อนกลับไปยังคอมมิตได้

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

คุณเผยแพร่อะไรไปยัง npm

สรุปทบทวน

เผยแพร่ผลลัพธ์ที่สร้างแล้วใน dist/<lib> โดยกำกับรุ่นตาม semver เพิ่มรุ่น จากนั้นใช้ npm login แล้วจึงใช้ npm publish (เพิ่ม --access public สำหรับแพ็กเกจแบบมีขอบเขต และ --tag next สำหรับรุ่นก่อนเผยแพร่) ผู้ใช้ติดตั้งด้วย npm install และนำเข้าจาก API สาธารณะ ทำให้การเผยแพร่ใน CI เป็นอัตโนมัติเพื่อความน่าเชื่อถือ

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

บทเรียน “การเผยแพร่ไปยัง npm” ฟรีหรือไม่

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

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

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

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

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

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

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

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

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

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

  1. การสร้างไลบรารีด้วย ng generate
  2. API สาธารณะและจุดนำเข้า
  3. การสร้างด้วย ng-packagr
  4. การเผยแพร่ไปยัง npm
← กลับไปที่ Angular Academy