Angular Academy · درس

البناء باستخدام ng-packagr

أنشئ مخرجات Angular Package Format

البناء باستخدام ng-packagr درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.

تحتاج المكتبات إلى بناء خاص

لا يمكنك نشر TypeScript والقوالب الخام؛ إذ يتوقع المستهلكون مخرجات مُجمّعة وموحّدة. تُبنى مكتبات Angular وفق Angular Package Format (APF) باستخدام ng-packagr، وهي الأداة التي تستخدمها CLI داخليًا.

Angular Package Format

يمثل APF البنية الرسمية لمكتبات Angular القابلة للتوزيع: وحدات ES محسّنة، وتعريفات للأنواع، وبيانات وصفية مرتبة بحيث يتمكن أي تطبيق Angular من استهلاك المكتبة وتطبيق tree-shaking عليها بشكل موثوق.

بناء مكتبة

شغّل 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 Package Format (حزم FESM و.d.ts وpackage.json المُنشأ) إلى dist/. اضبط المخرجات عبر ng-package.json، وابنِ في وضع الإنتاج، واعتمد على التجميع الجزئي للتوافق بين الإصدارات، وأبقِ التبعيات النظيرة خارج الحزمة.

الأسئلة الشائعة

هل درس «البناء باستخدام ng-packagr» مجاني؟

نعم — نص درس «البناء باستخدام ng-packagr» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.

ماذا ستتعلم في «البناء باستخدام ng-packagr»؟

أنشئ مخرجات Angular Package Format تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟

لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «البناء باستخدام ng-packagr»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟

نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Angular Academy