اختبار إنشاء مكتبة مكون لـ Angular باستخدام الأمر الجديد لـ Angular / Cli - library

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

تكمن المشكلة في أن الخيار الثاني يتطلب جهودًا تحضيرية كبيرة وكل مشروع فريد من نوعه - مع أدواته الخاصة التي يحتاج كل مطور جديد إلى التعامل معها مرة أخرى. في نهاية يوليو ، اقترح فريق Angular حله الخاص والشامل لهذه المشكلة عن طريق إضافة أمر جديد لإنشاء مكتبات - مكتبة إلى الزاوي / cli.

دعونا نرى ما جاء منها.

للاختبارات ، تم أخذ أحدث نسخة مستقرة من الزاوي / cli - 6.1.5 (09/04/2018)

العالم المثالي

في عالم مثالي ، يجب أن يكون كل شيء مناسبًا. لذا ، بالنسبة لمكتبة المكونات ، أود أن أسلط الضوء على ثلاث نقاط مهمة

• توحيد المشاريع والبدء السريع
• راحة التنمية
• سهولة التوزيع

لذا ، دعنا نبدأ من البداية.

من أجل إنشاء مكتبتنا الخاصة ، نحتاج إلى اتخاذ خطوتين - إنشاء مشروع جديد وإضافة مكتبة إليه. أولاً ، أنشئ مشروعًا جديدًا:

npx @angular/cli@latest new mylibapp 

بعد تنفيذ الأمر ، سنرى مشروعًا قياسيًا (لـ 6 الزاوي ، والذي يختلف عن الإصدار الخامس) حيث سيتم إنشاء مشروعين فرعيين - mylibapp الرئيسي و mylibapp-e2e. يتم وصف المشروع الزاوي نفسه الآن في angular.json.

لا توجد مكتبات حتى الان.

وهنا هو التحذير الأول. اسمنا مأخوذ بالفعل من قبل المشروع الرئيسي ، واسم المكتبة لن يعمل أيضًا. لذلك ، إذا كنت تريد تسمية المكتبة my-super-library ، فأنت بحاجة أولاً إلى إنشاء مشروع ، والذي يجب تسميته بشكل مختلف إلى حد ما. على سبيل المثال ، مشروع my-super-library. وعندها فقط ، أنشئ مكتبة بالاسم المطلوب.

الآن قم بإنشاء مشروع فرعي ثالث وإنشاء مكتبة.

 cd mylibapp npx ng generate library mylib --prefix mlb 

ليس من الضروري تحديد بادئة ، ولكن من المرغوب فيه جدًا عدم التقاطع مع مكتبات أخرى.

كما ترون الآن ، تمت إضافة مكتبتنا الثالثة كمشروع فرعي ثالث. لديها حزمة منفصلة خاصة بها: json و tsconfig و karma.conf.js ، والتي تتيح لك تكوينها دون خوف من إيذاء المشاريع الأخرى. بالمناسبة ، إذا رغبت في ذلك ، يمكننا إضافة مكتبة أخرى وسيكون أيضًا مشروعًا فرعيًا منفصلًا. ولكن هذا هو السبب في أنه لا يمكن تمييز المكتبة بمشروع منفصل تمامًا (على سبيل المثال في .Net) لا أعرف. وإذا لم يكن من الصعب إزالة مشروع e2e يدويًا ، فإن المشروع الرئيسي لم يعد موجودًا. ونتيجة لذلك ، يظهر رمز إضافي في المستودع ، وهو ليس جيدًا جدًا.

الآن دعونا نرى ما هي الأدوات التي نحصل عليها على الفور. هذه مجموعة من tslint + codelyzer ، karma + jasmine ومنقلة لـ e2e. على سبيل المثال مجموعة قياسية من المشروع الزاوي ، لا شيء خاص بالمكتبة لم نحضره. هذا غريب بعض الشيء ، لأن بعض الأدوات لعرض المكونات وإدخالها في الوثائق (مثل كتاب القصة ) هي ببساطة أمر لا بد منه. ولكن حسنًا ، سنفترض أنهم هنا تركونا ببساطة مكانًا للمناورة.

دعنا نجري الاختبارات والبطن للتأكد من أن كل شيء يعمل.

 npm test mylib npx ng lint mylib 

كل شيء سار على ما يرام بالنسبة لي ، ولكن تم استخدام Chrome للاختبار ، وهو أمر غريب أيضًا. ليس لدي شيء ضده ، ولكن على خوادم البناء لن تكون 90 ٪. لماذا لم يستخدموا نفس العرائس غير واضح.

لتلخيص:

الايجابيات

• البدء السريع لمشروع جديد
• نهج موحد

سلبيات

• كود إضافي في المشروع
• يجب الانتهاء من الأشياء الواضحة بيديك.

حتى الآن ، لا شيء حرج ، نواصل البحث أكثر.

التنمية

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

 npx ng build mylib 

 import { MylibModule } from "mylib"; ... @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, MylibModule ], providers: [], bootstrap: [AppComponent] }) 

 npm start 

بعد الانتهاء من كل شيء ، سنرى مكوننا من المكتبة. ولكن مرة أخرى هناك فارق بسيط - وضع المراقبة للمكتبة لم يتم بعد ، هل تحتاج إلى تشغيل المكتبة بناء نفسك في كل مرة؟ ستظهر الساعة فقط في الزاوي / cli 6.2+. وليس خارج الصندوق ، لذلك سيكون عليك إضافة علامة جديدة في tsconfig.json

tsconfig.json

 "angularCompilerOptions": { "enableResourceInlining": true, } 

ثم قم بتشغيل البنية باستخدام علامة الساعة:

 ng build mylib --watch 

إذا كنت تستخدم cli ل 6.2 لسبب ما ، فسيتعين عليك بناءها بنفسك ، وهو أمر سيء بصراحة.

الآن دعنا نضيف مكون جديد. للقيام بذلك ، قم بتشغيل أمر إنشاء المكون القياسي. نظرًا لأن المكتبة ليست مشروعنا الرئيسي ، يجب عليك استخدام علامة المشروع ، والتي هي أيضًا مزعجة قليلاً (ولكن إذا كانت المكتبة حلاً مستقلاً ...).

 npx ng generate component some-nice-image --project mylib 

الآن ، تحت mylib / src ، قم بإنشاء مجلد الأصول ، وأضف صورة وأعد بناء المكتبة مرة أخرى لرؤية النتيجة. ثم تنتظرنا مفاجأة أخرى - لا توجد صورة. اتضح أن الموارد المستخدمة في المكتبة لا تدخل تلقائيًا في البناء ، تحتاج إلى نسخها بنفسك (أو ما شابه ). ويبدو أن ذلك ليس مخيفًا ، ولكنه لا يزال غير صحيح إلى حد ما.

لكن اهتزاز الأشجار يجب أن يعمل من خارج منطقة الجزاء. لنقم بإنشاء مكون آخر في المكتبة ولكننا لن نستخدمه في المشروع الرئيسي. تجميع المشروع الرئيسي في وضع الإنتاج

 npx build --prod 

ونرى أن حجم الحزمة لم يتغير. اهتزاز الأشجار يعمل حقًا مع المكتبات!

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

 npm i -D @drag13/when-do npm i @drag13/round-to 

لقد وضعتهم عن عمد بطرق مختلفة للتحقق من كيفية تعامل الحزم مع هذا لاحقًا. يتم تعيين كل شيء دون مشاكل. نحاول جمع والحصول على تحذير

لا ينصح بتوزيع حزم npm بـ "تبعيات". يرجى النظر في إضافة drag13 / تقريب إلى "تبعيات الأقران" أو إزالته من "التبعيات"

توزيع حزم تبعية npm غير مرغوب فيه. يرجى النظر في إضافة drag13 / التقريب إلى التبعية إلى تبعيات الأقران أو حتى إزالتها من التبعيات

ثم الخطأ:

يجب إضافة التبعية إلى السحب 13 / تقريب إلى القائمة البيضاء بشكل صريح

يجب إضافة تبعية السحب 13 / التقريب إلى القائمة البيضاء بشكل صريح.

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

يعمل الباقي كما هو الحال في مشروع Angular عادي.

لتلخيص بإيجاز:

الإيجابيات:

• نحن نعمل في بيئة مألوفة مع فرق مألوفة
• هناك اهتزاز شجرة خارج منطقة الجزاء

السلبيات:

• "لرؤية المكون" تحتاج إلى استخدام المشروع بأكمله
• لا يوجد وضع مشاهدة حتى الان
• يجب نسخ الموارد يدويًا أو لتكوين عملية الإنشاء بنفسك.

وأخيرًا ، انتقل إلى المنشور

نشر

كل شيء هنا. يستخدم Angular / cli ng-packgr الراسخ للنشر ، والذي يقوم بتجميع التعليمات البرمجية الخاصة بنا بشكل مستقل في حزمة مناسبة لنشر npm ، مع ترك إعداد ملف package.json (وهو ليس صغيرًا) ، والتصغير ، والتغليف في تنسيقات مختلفة (على سبيل المثال ، في UMD) .

لنشر الحزمة الخاصة بك (أو رؤية ما بداخلها) ، تحتاج إلى تشغيل ثلاثة أوامر

 npx ng build --prod cd dist/mylib npm publish 

إذا كنت لا تريد النشر ، فاستبدل أمر النشر بحزمة

ونتيجة لذلك ، حصلت على ما يلي:

أولاً ، دعنا نلقي نظرة على package.json ، والتي تبدو مختلفة تمامًا عن package.json الأصلية في مكتبتنا.

كما ترى ، لم تقم packagr بحذف devDependencies ، على الرغم من أن البعض يفعل ذلك. بالإضافة إلى ذلك ، يسرنا نظريًا عدد التنسيقات الموضحة في package.json (على الرغم من أنني لا أعرف نصفها).

تحتوي الحزمة داخل الحزمة على حزمة مصغرة وغير مصغرة بتنسيق UMD ، والعديد من حزم التنسيق الداخلي الزاوي (fesm5 ، fesm2015). ولكن الأهم من ذلك ، أن رئيس المطورين لن يضر بهذا الأمر ، وهو أمر رائع.

دعنا ننتقل إلى الاستنتاجات.

الإيجابيات:

• الراحة
• التفكير

المجموع

كان الحل مثيرًا للاهتمام ، ولكنه كان خامًا. البداية والنشر ملائمان للغاية ، ولكن لا تزال هناك أسئلة للتطوير. من المحبط بشكل خاص أن المكتبة الآن ليست مشروعًا مستقلاً حسب التصميم ، بل هي إضافة إلى المشروع الرئيسي مع إمكانية النشر.

من ناحية أخرى ، تم تنفيذ جزء كبير من العمل ، وتتطور الوظائف باستمرار ، وأنا متأكد من أنه بمرور الوقت ، سنحصل على أداة ممتازة للتطوير.