Angular Academy · บทเรียน

การสร้างด้วย ng-packagr

สร้างเอาต์พุตรูปแบบแพ็กเกจ Angular

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

ไลบรารีต้องใช้การสร้างแบบพิเศษ

คุณไม่สามารถเผยแพร่ TypeScript และเทมเพลตดิบได้ เพราะผู้ใช้คาดหวังผลลัพธ์ที่คอมไพล์แล้วและเป็นไปตามมาตรฐาน ไลบรารี Angular จะถูกสร้างเป็น รูปแบบแพ็กเกจ Angular (APF) โดยใช้ ng-packagr ซึ่งเป็นเครื่องมือที่ CLI เรียกใช้งานเบื้องหลัง

รูปแบบแพ็กเกจ Angular

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

การสร้างไลบรารี

เรียกใช้ ng build โดยระบุเป้าหมายเป็นโครงการไลบรารี CLI จะเรียกใช้ ng-packagr และเขียนผลลัพธ์แพ็กเกจไปยัง dist/

ng build ui-kit
# outputs dist/ui-kit in Angular Package Format

สิ่งที่ ng-packagr สร้างขึ้น

โฟลเดอร์ dist มีบันเดิล FESM (โมดูล ES แบบรวม), ไฟล์ชนิดข้อมูล .d.ts และ package.json ที่สร้างขึ้นพร้อมช่องรายการ module และ types ที่ถูกต้อง

dist/ui-kit/
  fesm2022/ui-kit.mjs   # flattened ES module
  index.d.ts            # type declarations
  package.json          # generated, points to the above

การตั้งค่า ng-package.json

ไลบรารีแต่ละแห่งมี ng-package.json ซึ่งบอก ng-packagr ถึงปลายทางผลลัพธ์และไฟล์นำเข้า CLI จะอ่านไฟล์นี้ระหว่างการสร้าง

// projects/ui-kit/ng-package.json
{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/ui-kit",
  "lib": { "entryFile": "src/public-api.ts" }
}

การสร้างสำหรับใช้งานจริง

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

ng build ui-kit --configuration production

การคอมไพล์บางส่วน

ไลบรารีจะคอมไพล์ในโหมด Ivy แบบ บางส่วน ไม่ใช่การคอมไพล์อย่างสมบูรณ์ วิธีนี้ทำให้ใช้งานร่วมกันได้กับ Angular หลายรุ่น โดยแอปที่นำไปใช้จะคอมไพล์ส่วนที่เหลือ (การเชื่อมโยง) ระหว่างการสร้างของแอปเอง

การพึ่งพาแบบเพียร์ในผลลัพธ์

ng-packagr จะเก็บ Angular และการพึ่งพาแบบเพียร์อื่น ๆ ไว้ภายนอก แทนการรวมเข้าในบันเดิล package.json ที่สร้างขึ้นจะแสดงรายการเหล่านี้เป็น peerDependencies เพื่อให้ผู้ใช้จัดหาสำเนาที่ใช้ร่วมกันเพียงชุดเดียว

ทรัพยากรและสไตล์

คุณสามารถรวมสไตล์และทรัพยากรแบบคงที่ไว้ในแพ็กเกจได้ ให้ประกาศสิ่งเหล่านี้ใน ng-package.json เพื่อให้ ng-packagr คัดลอกและประมวลผลลงในผลลัพธ์ dist สำหรับผู้ใช้

"assets": ["./styles/theme.css"]

การตรวจสอบการสร้าง

หลังการสร้าง ให้ตรวจสอบ dist/ui-kit: ยืนยันว่ามีบันเดิล FESM ไฟล์ .d.ts และ package.json ที่ช่อง exports/module ชี้ไปยังไฟล์ที่สร้างแล้ว นี่คือสิ่งที่ npm จะได้รับอย่างแท้จริง

โหมดเฝ้าดูสำหรับการพัฒนา

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

ng build ui-kit --watch

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

ไลบรารี Angular ถูกสร้างเป็นรูปแบบใด

สรุปทบทวน

สร้างไลบรารีด้วย ng build <lib> ซึ่งจะเรียกใช้ ng-packagr เพื่อสร้างรูปแบบแพ็กเกจ Angular (บันเดิล FESM, .d.ts, package.json ที่สร้างขึ้น) ลงใน dist/ กำหนดค่าผลลัพธ์ผ่าน ng-package.json สร้างด้วยการตั้งค่าสำหรับใช้งานจริง ใช้การคอมไพล์บางส่วนเพื่อให้ใช้งานได้กับหลายรุ่น และเก็บการพึ่งพาแบบเพียร์ไว้ภายนอก

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

บทเรียน “การสร้างด้วย ng-packagr” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การสร้างด้วย ng-packagr”

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

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

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

บทเรียน “การสร้างด้วย ng-packagr” ใช้เวลานานแค่ไหน

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

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

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

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

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