لماذا وكيف كسول تحميل المكتبات الزاويه

Chillax ، حجم الحزمة هو الصحيح حيث ينبغي أن يكون! (الأصل  بواسطة هولجر لينك)
تستند هذه المقالة إلى تجربة حياة حقيقية من بيئة مؤسسة كبيرة تضم أكثر من 60 SPA و مكتبة cca 30 ...

المكتبات الزاوية هي طريقة رائعة لتنظيم الشفرة! يأتي Angular CLI بدعم مدمج مذهل لإنشاء مشاريع المكتبة وإنشائها واختبارها داخل مساحة العمل القياسية.

تتألق المكتبات أكثر في البيئات مع تطبيقات Angular متعددة مع إمكانية كبيرة لإعادة استخدام التعليمات البرمجية وتكوينها!

يمكن للمكتبات أيضًا أن تكون ذات فائدة كبيرة في المتاجر التي تحتاج إلى عرض مشاريع العملاء في إيقاع مرتفع! في هذه الحالة ، يمكن للمكتبات تمثيل الوظائف الإضافية القابلة لإعادة الاستخدام القابلة للتكوين من البرامج البسيطة مثل مشغل الموسيقى أو الخلاصة الاجتماعية إلى أكثر تعقيدًا مثل المسؤول المنفوخ الكامل مع مسارات فرعية متعددة!

يتم بناء المكتبات حاليًا بمساعدة ng-packagr التي تؤدي إلى جانب التقدم في آلية حقن التبعية (المتوفرة في: "الجذر" بناء الجملة) إلى حزم صغيرة قابلة للتشجير! وهذا يمثل سببًا آخر لاحتضان المكتبات كوحدة من الكود المشترك في النظام البيئي الزاوي!

demonstrated يتم توضيح المفاهيم الموضحة في هذه المقالة باستخدام قصاصات رمز العمل ومثال مشروع GitHub مع عرض حي!

ما الذي سنتعلمه؟

  • تصنيف المكتبات الزاويّة بناءً على الغرض منها
  • طرق مختلفة لتطبيق المكتبة (مساحة عمل Angular CLI مقابل monorepo)
  • تحميل كسول القياسية من وحدات التطبيق
  • كيف لا كسول تحميل وحدات من المكتبات الزاوي
  • كيفية القيام تحميل كسول السليم من وحدات من المكتبات الزاوي
  • كيف سيكون هذا التغيير (للأفضل) مع الزاوي IVY

تصنيف المكتبات الزاوية

يمكن أن تأتي المكتبات الزاويّة بأشكال مختلفة ولأغراض مختلفة!

  • utils - مجموعة من الأدوات المساعدة المختلفة ، عادة في شكل خدمات عديمي الجنسية
  • مكتبة المكونات - مجموعة من المكونات البسيطة (البكم) القابلة لإعادة الاستخدام مع واجهة برمجة التطبيقات (API) البسيطة فقط ، والتي تم تسهيلها باستخدام معظمها من أدوات تزيينInput و @ Output
  • انخفاض في المكون - مكون أكثر تعقيدًا مع حالة معالجة / جلب بيانات خاصة به والتي لا يزال بإمكانها التواصل مع التطبيق الأصل باستخدامInput و @ Output (على سبيل المثال ، تمرير في التكوين أو إخبار الوالد بنتيجة بعض العمليات ...)
  • تطبيق فرعي - أكثر المكتبات تعقيدًا والتي يمكن أن تعمل كتطبيق قائم بذاته إذا لزم الأمر. يمكن أن تأتي مثل هذه المكتبة بوحدات متعددة مع طرقها ومكوناتها وخدماتها ...
  • آخر؟ - اسمحوا لي أن أعرف في الردود حتى أتمكن من إضافة حالة الاستخدام الخاصة بك إلى هذه القائمة!

بالطبع ، ليس دائمًا ما يتم تنظيفه تمامًا ويمكن للخطوط الفاصلة بين الأنواع أن تشوش ...

ينصب تركيزنا في هذا الدليل على "التطبيق الفرعي" الأكثر تعقيدًا مثل المكتبات!

التحديات التي يمكن حلها باستخدام مكتبات التطبيقات الفرعية

  • وظيفة معقدة مشتركة عبر العديد من التطبيقات (مثل صفحة البحث ، صفحة الإعدادات)
  • تقسيم ميزات التطبيق الكبير (مع العديد من الطرق البطيئة) إلى مكتبات متعددة لزيادة تعزيز العزلة وتسريع عملية الإنشاء / الاختبار وتوفير دورة حياة مستقلة وتمكين تشغيلها كتطبيقات قائمة بذاتها
  • وحدات نمط lego (الوظيفة الإضافية) ، تطبيق حيث يمكن للأشخاص تمكين / شراء ميزات إضافية

طرق تنفيذ المكتبات Angular في عام 2019 (Angular CLI vs nrwl / nx)

أصبح CLI الزاوي أفضل كثيرًا بمرور الوقت ، ويوفر حاليًا تجربة مطور قوية جدًا. تحصل المكتبات التي يتم تطويرها في Angular CLI افتراضيًا على ملف package.json الخاص بها ، لذا من المفترض أن يتم نشرها بشكل مستقل إلى مستودع npm كتأثيرات قائمة بذاتها يتم استهلاكها باستخدام تثبيت npm.

من ناحية أخرى ، يعطينا nrwl / nx مساحة عمل نمط monorepo مع ملف package.json واحد فقط. لا تزال المكتبات مستوردة مع معرفة "my @ my-org / some-lib" ؛ ولكن يتم الآن تسهيل ذلك بواسطة الأسماء المستعارة المحول البرمجي Typescript مع المسارات النسبية إلى الدلائل المكتبة المحلية بدلاً من عقدة / دقة العقدة القياسية. أيضًا ، عند النشر إلى npm ، ستستخدم جميع التطبيقات والمكتبات نفس الإصدار الذي يعد طريقة أحادية لإدارة إدارة دورة الحياة!

لا يهم حقًا أي نمط من التطوير نختاره. في النهاية ، لا يزال يتعين علينا إيجاد طريقة للإشارة إلى مكتبتنا لتكون قادرة على تحميلها ، وهذا ما سنتعلمه بعد ذلك!

كيفية تحميل المكتبات كسول

لنبدأ بشيء قياسي. عادة ما نحدد الطرق المحملة كسولة كمسار نسبي لبعض الوحدات في قاعدة بيانات التطبيق المحلي ...

كيف نقوم عادةً بتحميل وحدات التحميل التي تمثل جزءًا من التطبيق نفسه ...

ماذا يعني إذا أردنا ضبط ذلك لتحميل كسول وحدة نمطية من مكتبة؟

يمكن أن تأتي المكتبة إما من node_modules / كقائمة بذاتها مثبتة من npm أو يمكن أن تكون مشروع مكتبة محلي في مساحة عمل Angular CLI (أو nx).

هل يمكننا الإشارة فقط إلى السلسلة في هاتين الحالتين؟
محاولة الرجوع إلى مكتبة مثبتة من npm أو مكتبة مدمجة في مجلد dist الخاص بمساحة العمل المحلية لا يعمل!
هذه الأساليب لا تعمل!

كيف يمكننا كسول تحميل وحدة المكتبة الخاصة بنا باستخدام بناء الجملة المتوقع كما هو موضح في المثال الأول أعلاه؟ بمعنى آخر ، كيف يمكننا توفير الوحدة النمطية للمكتبة بطريقة يمكننا من خلالها الرجوع إليها بمسار نسبي مثل ./some-path/some.module#SomeModule؟

لحسن الحظ ، هناك طريقة يمكننا من خلالها إنشاء وحدات تجميع بسيطة للغاية داخل قاعدة بيانات التطبيقات الاستهلاكية والتي ستقوم باستيراد الوحدة من المكتبة بطريقة قياسية باستخدام import {SomeLibModule} من '@ my-org / some-lib' و بعد ذلك ، قم باستيراد الوحدة النمطية داخل مجموعة ديكوراتNgModule: صفيف [SomeLibModule] كما هو موضح أدناه.

هذه هي! وحدة غلاف صغيرة تمكننا من دمج مكتبتنا كطريق محمّل كسول في تطبيقنا! الاشياء المدهشة!
اتبعني على Twitter للحصول على إخطار حول أحدث منشورات المدونة Angular وإرشادات الواجهة الأمامية المهمة!

الخطوة الأخيرة

بمجرد أن تصبح الوحدة النمطية للالتفاف جاهزة ، يمكننا الرجوع إليها في المسار باستخدام مسار نسبي قياسي لأن الوحدة النمطية المُلفوفة تنتمي إلى مشروع التطبيق نفسه.

يشير طريقنا البطيء الآن إلى وحدة المجمع المحلية بحيث تعمل كما هو متوقع!
رائع! الآن لدينا تطبيق الزاوي الذي يحمل بسلاسة وحدة ميزة الأحمال من مكتبة أخرى وضعت بشكل مستقل!

كل ما كان علينا فعله هو إنشاء وحدة غلاف بسيطة ويعمل كل شيء كما هو متوقع!

المستقبل مع الزاوي اللبلاب

في المستقبل ، من المحتمل أن تكون هناك إمكانية لتحميل وحدات التحميل باستخدام بناء جملة JavaScript (async import () القياسي بدلاً من السلسلة السحرية الخاصة بـ Angular CLI مثل loadChildren: './some.module#SomeModule'.

في هذه الحالة ، ستبدو وكأنها loadChildren: () => import ('@ my-org / some-lib'). ثم (m => m.SomeLibModule) التي ستزيل ضرورة استخدام الوحدات النمطية المجمعة.

هذا هو بناء الجملة التحميل كسول المستقبل الافتراضي الذي يعمل حاليا أيضا (مع تعديل طفيفة tsconfig.json) ولكن فقط مع بناء DEV ...

من الممكن حاليًا جعل هذا العمل بدون IVY عن طريق ضبط tsonfig.json. يتعين علينا استخدام "الوحدات النمطية": "esnext" بدلاً من "الوحدات النمطية" الافتراضية: "es2015" ولكنها لن تعمل إلا عند استخدام DEV build ...

لسوء الحظ ، فإن تشغيل ng build --prod سينتهي هذا الأمر وسنحصل على خطأ: لم يتم اكتشافه (الوعد): خطأ: لم يتم تحميل برنامج التحويل البرمجي Runtime عندما نحاول الانتقال إلى الطريق باستخدام الاستيراد الديناميكي. (ربما يمكننا أن نجعل هذا العمل من خلال جلب @ الزاوي / المترجم في بناء همز ولكن لم أختبر ذلك)

في الوقت الحالي ، علينا أن نلتزم بحل وحدة المجمع!

تحرير: شكرًا لـ Igor Minar على تعليقاتك على Twitter:

واحد لا / تصحيح: بناء الجملة () للتحميل كسول جهاز التوجيه ليست محددة لبلاب. لقد عملنا بجد لفصله عن Ivy وسنعمل على توفيره لخط أنابيب ViewEngine (ما قبل Ivy) وكذلك في الإصدار 8.

لذلك يبدو هذا أفضل ، وذلك بفضل فريق Angular للعمل الرائع!

ملخص

لقد تعلمنا أنه يمكننا تطبيق "تطبيقات فرعية" قابلة لإعادة الاستخدام في شكل مكتبات Angular يمكن تنفيذها بمعزل تام وتحميلها كسول عند الطلب وأيضًا تأتي مع طرقها الخاصة!

حاليًا يمكننا تحقيق ذلك عن طريق استخدام الحد الأدنى لوحدة المجمّع التي نستخدمها لاستيراد وحدة lib ومن ثم الرجوع إليها كطريق محمّل كسول!

تحقق من التنفيذ والعيش التجريبي على جيثب!

يمكن العثور على التطبيق والعرض المباشر على جيثب!

أهم الملفات هي:

  • بعض-lib.module.ts
  • بعض-ليب-wrapper.module.ts
  • التطبيق-routing.module.ts

Booom ، لقد انتهينا!

أتمنى أن تكون قد استمتعت بهذا الدليل وستجعل تطبيقاتك أكثر أداءً وقابلية للصيانة عن طريق تقسيمها إلى مكتبات منفصلة قابلة لإعادة الاستخدام يمكن تطويرها بمعزل عن طريق فرق منفصلة! هذا النهج يمكن أن تساعد بشكل كبير في إعداد المؤسسة المؤسسة!

يرجى دعم هذه المقالة بـ "لمساعدتها على الانتشار إلى جمهور أوسع".

أيضًا ، لا تتردد في اختبار الاتصال بي إذا كانت لديك أي أسئلة باستخدام إجابات المقالة أو Twitter DMstomastrajan.

و لا تنسى أبدا ، المستقبل مشرق
من الواضح المستقبل المشرق ( بواسطة كريستوف هاوتييه)
Psst! هل تعتقد أن NgRx أو Redux مبالغة لاحتياجاتك؟ تبحث عن شيء أبسط؟ تحقق من @ الزاوي ملحقات / مكتبة النموذجية!
جرب @ مكتبة angular-extensions / model! تحقق من المستندات وجيثب
بدء مشروع الزاوي؟ تحقق من الزاوي NgRx المواد كاتب!
الزاوي NgRx Material Starter مع المدمج في أفضل الممارسات ، theming وأكثر من ذلك بكثير!

إذا وصلت إلى هذا الحد ، فلا تتردد في الاطلاع على بعض مقالاتي الأخرى حول تطوير برامج Angular و frontend بشكل عام ...