كيفية إنشاء مكتبة Angular 4 متوافقة مع AOT / JIT مع قوالب SCSS / HTML خارجية

متطلبات TL أو DR أو مكتبة

لقد قمتُ بإنشاء مشروع أولي لمكتبة الزاوي قد يثير اهتمامك في حالة:

  • تريد إنشاء مكتبة مكونات لـ Angular 4 ونشرها على NPM.
  • تريد أن تكون مكتبتك جاهزة لمزيد من تجميع AOT و JIT.
  • تريد أن تكون مكتبتك جاهزة للاستخدام الإضافي مباشرة في المتصفحات (دعنا نقول حزمة UMD المحملة بواسطة SystemJS).
  • تريد كتابة أنماط المكونات في ملفات SCSS الخارجية.
  • تريد كتابة قوالب المكونات في ملفات HTML الخارجية.
  • تريد أن يكون لديك وضع المراقبة لبنيات المكتبة (بما في ذلك إنشاء AOT).

يحتوي هذا المشروع على مثال مكتبة TickTock. المكتبة نفسها صغيرة والشيء الوحيد الذي تقوم به هو عرض الوقت الحالي. ولكن الأهم من ذلك هو أن المشروع يحتوي على بيئة قابلة لإعادة الاستخدام للمكتبات الزاويّة التي تسمح ببنائها واختبارها ودقتها وتوثيقها واستكشافها ونشرها.

الإحباط من المطور الخلفي

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

بمجرد أن قررت تطوير مشروعي الخاص بالحيوانات الأليفة ، كان من المثير بالنسبة لي أن أغوص في عالم الواجهة الأمامية (كما اعتدت أن أقوم به من قبل عندما حكمت jQuery ذلك العالم :)

وكنت محبطًا ...

React، AngularJS، Angular 2، Angular 4، Vue، Ember، Webapck، Rollup، Babel، Prepack، Node.js، NPM، Yarn، Gulp، Grunt، Karma، Jasmine، Protractor، Istanbul، Mocha، Chai، Sinon، TypeScript، ECMAScript و ES5 و ES2015 و TSlint و Codelyzer و AMD و UMD و CommonJS و Compodoc و SystemJS و Ahead-of-وقت التجميع وتجميع في الوقت المناسب وتجميع فقط في الوقت المحدد و Redux و Flux و RxJS ووعود ومراقبات و SCSS و Flex ... ! توقف! هذا كثير جدًا بالنسبة إلى الشخص الذي اعتقد أنه إذا كنت تعرف jQuery فأنت نينجا في المقدمة: D ماذا تختار؟ كيفية استخدامها معا؟ هذا كثير من التوليفات الممكنة ، رجل!

Whaaaat؟

بالطبع لن أغطي كل هذه الموضوعات هنا. ولن أقول إنني قد غطيتهم بالكامل بنفسي حتى الآن.

ما سأفعله هو مشاركة القليل من تجربتي (الإحباطات والإجابات التي وجدتها بنفسي) في منطقة معينة - تطوير مكتبة المكونات لـ Angular 4.

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

الأسئلة

عندما قررت نقل إحدى وحدات Angular 4 الداخلية الخاصة بي إلى مكتبة npm منفصلة لجعلها قابلة لإعادة الاستخدام في العديد من المشاريع المستقبلية ، واجهت الأسئلة التالية التي لم تكن تافهة بالنسبة لي.

1. ماذا للتصدير وبأي شكل؟

إذا كنت أرغب في أن تكون مكتبتي متوافقة مع AOT / JIT وأن تكون قابلة للاستخدام في عمليات إنشاء المستعرضات عبر SystemJS ، فما التنسيقات والهيكل الذي ينبغي علي تصديره؟

  • هل يجب أن يكون ملف حزمة JS واحدًا فقط أم أنه يجب أن يكون العديد من ملفات JS غير المجمعة مع الحفاظ على بنية المجلد؟ أو ينبغي أن يكون كلاهما؟
  • هل أحتاج إلى تصدير ملفات * .js.map و * .d.ts؟ ما المقصود بالملفات * .metadata.json و * .ngfactory.ts ، وهل يجب علي تصديرها أيضًا؟
  • هل يجب علي تضمين Angular core في حزم JS أو هل يجب أن أتخطاها؟ إذا كنت بحاجة إلى تخطي ذلك ، فكيف يجب أن أفعل ذلك؟
  • ما هو معيار JS الذي يجب استخدامه: ES5 أو ES2015؟

2. كيفية التصدير؟

دعنا نتظاهر بأن لدينا جميع الإجابات على السؤال الأول. كيف يمكنني بناء ذلك بعد ذلك؟ يبدو أن هناك الكثير من الخيارات:

  • Webpack أو التراكمية؟
  • برنامج التحويل البرمجي لـ TypeScript (tsc) أو برنامج التحويل البرمجي الزاوي (ngc)؟
  • "ngc + Webpack" أو "ngc + Rollup"؟
  • ngtools / webpack البرنامج المساعد Webpack دون ngc؟
  • تراكمي المساعد الزاوي ، تراكمي المساعد دون ngc؟

3. كيفية استخدام أنماط SCSS الخارجية وقوالب HTML؟

هناك العديد من الأمثلة الجيدة على مشغلات المكتبات Angular (أفضلها هو مولد Yo للمكتبات Angular) ولكنها لا تدعم أنماط SCSS الخارجية أو قوالب HTML أو وضع المراقبة لبنيات AOT. لكنني أردت أن يكون لدي قوالب وأنماط ومنطق يتعلق بالمكون بشكل منفصل.

تكمن المشكلة في أن Webpack يتيح لك الحصول على قوالب SCSS و HTML خارجية مع وضع المراقبة ، ولكنها أداة تجميع بحكم طبيعتها وبالتالي تنتج حزمًا غير متوافقة مع AOT. يوفر برنامج Angular Compiler بدوره إخراجًا سهل الاستخدام AOT (جميع الملفات بشكل منفصل مع * .metadata.jsons) ولكنه لا يدعم وضع المراقبة حتى الآن كما أنه لا يدعم قوالب SCSS الخارجية.

4. تدفق التنمية

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

كيفية توفير وضع المراقبة لـ AOT-build؟

كما ذكرنا في السؤال السابق ، لا يدعم Angular Compiler وضع المراقبة بعد. كنت بحاجة إلى حل بديل هنا.

كيفية ربط المكتبة المطورة محليا بالمشروع المحلي؟

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

الاجابات

يمكنك استعراض مشروع البذور لمكتبة الزاوي على جيثب لرؤية مثال العمل الكامل وملفات المصدر. لقد قدمت أيضًا README وصفيًا لذلك يجب أن يكون من السهل فهم الفكرة بأكملها.

ولكن الآن دعونا نركز على الأسئلة المذكورة أعلاه.

1. ماذا للتصدير وبأي شكل؟

1.1 الملفات التي تستهلكها المتصفحات مباشرة

بما أنني أردت أن تكون مكتبتي جاهزة للاستهلاك من المتصفح بواسطة SystemJS ، فقد احتجت بالتأكيد إلى تصديرها كملف JS واحد (حزمة).

يفهم SystemJS تنسيقات الوحدات النمطية المختلفة مثل ESM (ECMAScript Module) و AMD (تعريف الوحدة غير المتزامنة) و CJS (CommonJS) وما إلى ذلك. لذا ، فقد أختار بشكل أساسي أيًا من هذه.

ولكن هناك أيضًا تنسيق آخر يسمى UMD (تعريف الوحدة النمطية العالمي). يبدو أن هذا التنسيق مناسب تمامًا لتقديم المكتبة كحزمة لأنه يطبق في النهاية تنسيقات AMD و CommonJS. في النتيجة ، قد يتم استهلاك الحزمة الخاصة بنا حتى في النهاية الخلفية بواسطة Node.

لذلك نحن نحصل على ملفنا الأول الذي يجب تصديره:

index.umd.js

لراحة المستهلك ، يجب أن توفر المكتبة أيضًا نسخة مصغرة من الحزمة لتقليل وقت التنزيل للمستخدم:

index.umd.min.js

حسنًا ، لقد حرصنا على المستخدمين النهائيين ، ولنهتم أيضًا بالمطورين الذين قد يرغبون في تصحيح الحزمة. الحمد لله لدينا JavaScript SourceMaps. إنها في الأساس طريقة لتعيين ملف مدمج / مترجم / مصغر مرة أخرى إلى حالة غير مبنية.

لذلك هناك ملفان آخران للتصدير:

index.umd.js.map،
index.umd.min.js.map

بمجرد نشر المكتبة على npm ، يصبح مجلد dist مع مكتبتك متاحًا أيضًا على خادم UNPKG. قد تجد أمثلة واقعية للملفات المذكورة أعلاه هناك:

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

1.1.1 استبعاد النواة الزاوية من الحزمة

قد يكون الأمر واضحًا ولكن يجب أن نضع في الاعتبار أننا نكتب مكتبة لمشروع Angular. نظرًا لأن المشروع نفسه يجب أن يحتوي على Angular core باعتباره تبعية ، فلا ينبغي أن تدرج المكتبة المصادر Angular في الحزم التي تنتجها. للقيام بذلك ، نحتاج إلى إعداد تبعيات النظراء في ملف package.json الخاص بنا.

{
  ...
  "peerDependencies": {
    "@ angular / common": "^ 4.0.0" ،
    "@ angular / core": "^ 4.0.0"
  }
  ...
}

النسخة الكاملة من package.json في مستودع البذور - مكتبة الزاوي.

ثم استبعد حزم الأقران من الحزمة عن طريق مطالبة Webpack bundler بالقيام بذلك في webpack-umd.config.ts.

استيراد * كـ angularExternals من 'webpack-angular-externals' ؛
استيراد * كـ rxjsExternals من 'webpack-rxjs-externals' ؛
التصدير الافتراضي {
  ...
  externals: [angularExternals ()] ،
  ...
}

النسخة الكاملة من webpack-umd.config.ts في مستودع البذور لمكتبة الزاوي.

1.2 الملفات التي سيتم استهلاكها بواسطة المشروعات الزاوية في الخلفية

أحد المتطلبات التي يجب أن تفي بها مكتبتك هو أن تكون متوافقًا مع AOT. ذلك لأنك ، كمطور للمكتبة ، لن تعرف أبدًا أي نوع من المشاريع سيحاول أن تستهلك مكتبتك: مع أنواع JIT أو AOT من التجميع أو حتى مع كليهما. وربما لا تريد تقليص جمهور المستهلكين.

وفقًا للوثائق الزاوية الرسمية ، يفضل استخدام JIT في التطوير و AOT في الإنتاج.

هذه ليست الأسباب الوحيدة لدعم تجميع AOT. يعد AOT نفسه خيارًا رائعًا لتقليل الوزن الإجمالي للمكتبة ، وتسريع عملية التقديم والاستثناء المتعلق بالقالب أثناء التجميع وليس أثناء التنفيذ في المتصفحات. مزيد من المعلومات حول AOT على مزايا JIT التي قد تقرأها في الوثائق الرسمية ، على سبيل المثال ، في مقالة Minko Gechev.

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

نحن بحاجة إلى مترجم Angular (أو ngc) للقيام بذلك من أجلنا. NGC هو نوع من الغلاف على TSC (TypeScriptCompiler) ولكنه يأخذ خصوصيات Angular في الاعتبار أثناء تجميع ملفات * .ts (انظر الملفات الإضافية التي ينتجها أدناه).

دعنا ننسى NGC للحظة ونفكر في سبب حاجتنا إلى هذا التحويل من TypeScript إلى JavaScript على الإطلاق. نظرًا لأنه قد يتم كتابة مستهلكي المشروع في المكتبة على TypeScript وكذلك على JavaScript ، فنحن بحاجة إلى أن نبني تصميماتنا لتكون TypeScript غير ملائمة. بمعنى آخر ، نحتاج إلى نقل المصادر من تنسيق * .ts إلى * .js باستخدام أحد المعايير الحالية: ES5 أو ES2015 (المعروف أيضًا باسم ES6). وبهذه الطريقة ، لن تتمكن مشاريع TypeScript من استهلاك مكتبتك فحسب ، بل ستستهلك أيضًا مشاريع JavaScript. يمكنك قراءة المزيد عن ES5 و ES2015 (المعروف أيضًا باسم ES6) في مقالة John Papa. في حالتنا ، سنقوم بإصدار إصدار ES5 من ملفات JavaScript إلى جانب ملفات ES2015 لتوفير دعم أكبر للمتصفحات "غير الحديثة".

https://johnpapa.net/es5-es2015-typescript/

حسنًا ، دعنا نعود إلى Compular Angular. لسوء الحظ ، لم يتم توثيقه بدرجة كافية (مقارنة ، دعنا نقول ، TSC) في الوقت الحالي. وبالتالي قد يكون من الصعب فهم قطعة المعلومات التالية ومربكة.

تأخذ NGC ملفات TypeScript للمكون والخدمة كمدخل وتنتج الملفات التالية كمخرجات:

  • * .js - [أنتج بواسطة tsc ، تذكر أن ngc عبارة عن برنامج تجميع] تم تمثيل JavaScript في ملف المكون / الخدمة * .ts من الإدخال.
  • * .d.ts - [أنتجتها tsc ، تذكر أن ملفات ngc عبارة عن ملف تعريف]. نظرًا لأن الملفات ذات الأنواع * .ts يتم نقلها إلى ملفات * .js التي لا تدعم الكتابة ، فإن برنامج TypeScript Compiler بحاجة إلى وضع جميع أنواع المعلومات على ملفات * .d.ts منفصلة حتى تتمكن من استخدام ملفات * .js هذه في مشاريع TypeScript في وقت لاحق. بالمناسبة ، هناك مشروع definitelyTyped مع الكثير من تعريفات الأنواع التي ساهمت بالفعل في الكثير من مكتبات JS التي لا تحتوي على TypeScript.
  • *. المصنع - مصنع مكون. بمعنى آخر ، مثيل للمكون في وقت التشغيل - مزيج من ملف الفئة الأصلية وتمثيل JavaScript لقالب HTML للمكون. لا يزال يتم الرجوع إلى فئة المكون الأصلي داخليًا بواسطة المصنع الذي تم إنشاؤه.
  • * .css.shim.ts - نسخة مجمعة من أنماط CSS للمكون.
  • * .metadata.json - بيانات التعريف المرتبطة بالمكون الحالي (أو NgModule). إنه نوع من تمثيل JSON للكائنات التي نمررها إلى مصمميComponent ،NgModule. يحتوي هذا الملف على المعلومات التي سيحتاجها NGC للمشروع (وليس المكتبة) والتي كانت موجودة في ملفات * .ts الخاصة بالمكتبة الأصلية ولكن لم يتم تضمينها في ملفات * .d.ts.

كما ذكر Chuck Jazdzewski: "يجب أن تتضمن جميع المكتبات ملف * .metadata.json جنبًا إلى جنب مع أي ملفات * .d.ts التي تنتجها وإلا فلن تعمل بشكل صحيح مع ngc. إذا لم يكن لدينا هذه المعلومات ، فلن نتمكن من إنشاء مصانع للمكتبة ".

كما كتب Minko Gechev في مقالته: "يحتاج المحول البرمجي الزاوي إلى بيانات التعريف للمكونات من أجل تجميع قوالبها. لنفترض أننا في تطبيقنا نستخدم مكتبة مكونات لجهة خارجية. كيف يعرف برنامج التحويل البرمجي Angular AoT البيانات الوصفية للمكونات المحددة هناك إذا تم توزيعها على أنها جافا سكريبت عادي؟ لا. لكي تتمكن من ترجمة تطبيق مقدمًا ، مع الإشارة إلى مكتبة Angular خارجية ، يجب توزيع المكتبة مع * .metadata.json التي ينتجها المترجم. "

كما أننا لسنا بحاجة إلى تسليم ملفات * .ngfactory.ts الخاصة بمكتبتنا لأنها شيء سيتم تجميعه وإنتاجه بواسطة NGC على جانب المشروع (وليس المكتبة) بناءً على ملفات * .metadata.json التي يجب أن توفرها المكتبة. كما هو موضح هنا: "يتوقع التنفيذ الفعلي لـ AOT أن يتم تنفيذ AOT دائمًا على مستوى المشروع وألا يحدث أبدًا على مستوى المكتبة (على الرغم من أن الحرف غير صحيح تمامًا ؛ يمكنك استخدام أداة AOT في المكتبة لإنتاج ملفات" بيانات التعريف " ). باستخدام هذا التصميم ، يمكنك أن تستهلك مكتبة مكتوبة (على سبيل المثال) مع Angular 2.3.3 ، حتى لو كان مشروعك يستخدم Angular 2.4.5 (مخرجات AOT مختلفة بعض الشيء) أو Angular 4.x (مخرجات AOT مختلفة جدًا).

حسنًا ، دعنا نلخص. لكي نتمكن من الاستفادة من مشاريعنا Angular في مشاريعنا مع أنواع AOT / JIT من التجميع ، نحتاج إلى إنتاج الملفات الأربعة التالية من كل ملف * .ts:

** / *. js - نسخة منقولة من ملف * .ts في معيار ES5.
** / *. js.map - خريطة JavaScript لتصحيح الأخطاء بطريقة ممتعة.
** / *. d.ts - ملفات التعريف لحفظ أنواع المعلومات.
** / *. metadata.json - بيانات التعريف المطلوبة لمزيد من تجميع AOT.

1.2.1 تكوين المترجم الزاوي

إذا كيف يمكننا تشغيل ngc؟ يتم ذلك عبر البرامج النصية npm. ألقِ نظرة على ملف package.json:

{
  "البرامج النصية": {
    ...
    "ngcompile": "node_modules / .bin / ngc -p tsconfig-aot.json"
    ...
  }،
  "devDependencies": {
    ...
    "@ angular / compiler": "^ 4.0.0" ،
    "@ angular / compiler-cli": "^ 4.0.0"
    ...
  }
}

النسخة الكاملة من package.json في مستودع البذور - مكتبة الزاوي.

كما قد تلاحظ أن Angular Compiler يأخذ ملف التكوين tsconfig-aot.json كمعلمة. هنا حيث يحدث كل التكوين ngc. هنا نطلب من المترجم إنتاج ملفات JS في معيار ES5 ، لتخطي إنشاء ngfactory ، وإنتاج خرائط المصدر وملفات التعريف وما إلى ذلك:

{
  "compilerOptions": {
    "الهدف": "es5" ، // تحديد معيار ES
    "الوحدة النمطية": "es2015" ،
    "sourceMap": true ، // اطلب tsc لإنشاء ملفات * .map.js
    "التعريف": true ، // اطلب tsc لإنشاء ملفات * .d.ts
    "outDir": "dist" ، // حدد مجلد الإخراج للملفات
    ...
  }،
  "files": [// حدد ملف الإدخال لـ tsc / ngc
    "./tmp/src-inlined/index.ts"
  ]،
  "angularCompilerOptions": {// التكوين المحدد لبرنامج التحويل الزاوي
    "genDir": "dist" ،
    "skipTemplateCodegen": صحيح ، // لا تنتج * .ngfactory.ts
    ...
  }
}

النسخة الكاملة من tsconfig-aot.json في مستودع البذور - مكتبة الزاوي.

2. كيفية التصدير؟

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

تدفق بناء مكتبة الزاوي

يمكنك إلقاء نظرة على قسم "تطور بناء مكتبة البذور" Angular-Library-Seed في نهاية هذه المقالة للحصول على حلول أخرى محتملة لا يمكن أن تناسب جميع متطلباتي لسبب ما.

2.1 الاستفادة من اللب

السمة المميزة لهذا النهج هي تضمين جميع قوالب HTML الخارجية مع أنماط SCSS الخاصة بهم (المترجمة إلى CSS) إلى ملفات * .component.ts ذات الصلة عبر Gulp. من خلال القيام بذلك في النهاية ، ستتلقى مجلدًا مؤقتًا به ملفات ** / * .s ts التي قد يتم تجميعها بسهولة بواسطة برنامج التحويل البرمجي Angular. سوف يساعدنا Gulp أيضًا على محاكاة وضع المراقبة لبرنامج التحويل البرمجي Angular (المزيد حول ذلك لاحقًا).

2.2 مواز يبني

الميزة الأخرى لهذا النهج هي أن ESM و UMD و Test يبنيان مستقلان تمامًا ويمكن القيام بهما بشكل متوازٍ أو منفصل واحدًا تلو الآخر:

# تشغيل جميع يبني في وقت واحد.
بناء الغزل
# تشغيل ESM بناء فقط.
بناء الغزل: esm
# تشغيل UMD بناء فقط.
بناء الغزل: umd

اقرأ المزيد حول عملية الإنشاء في README لمكتبة الزاوي.

2.3. تراكمي أو Webpack

Rollup و Webpack هما حزمتان عظيمتان كنت أبحث فيهما.

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

يحتوي كل من Webpack و Rollup على إضافات متعلقة بـ TypeScript / Angular (نسخ تراكمي من البرنامج المساعد ، الزاوي ، التراكمي ، المساعد ، ngtools / webpack ، اللواصق الرهيبة ، إلخ).

لكنني شخصياً قررت استخدام Webpack حتى الآن لأنه يبدو لي أكثر نضجًا وتوثيقًا جيدًا مع دعم أكبر من المجتمع.

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

بمجرد أن أقترح عليك شيء: لا تستخدم كليهما في نفس الوقت :) اجعلك تكدس التكنولوجيا نحيفًا قدر الإمكان. بمجرد انتهائي مع تطبيق Rollup الذي جعل حزمة UMD و Webpack يقومان بحزمة مماثلة ولكن بالنسبة لاختبارات Karma - كانت علامة حمراء بالنسبة لي لذا فقد تحولت إلى Webpack لكلا الحالتين.

3. كيفية استخدام أنماط SCSS الخارجية وقوالب HTML؟

وجود Gulp في ترسانة المكتبة يجعل من الممكن إجراء تجميع SCSS قبل القوالب المضمنة. تتم عملية تضمين القالب باستخدام مكتبة gulp-inline-ng2-tempalte والتي بدورها تتيح لك توفير وظيفة معالج القالب.

ألقِ نظرة على مثال gulpfile.js في مستودع مكتبة البذور الزاوي للحصول على مزيد من التفاصيل.

4. تدفق التنمية

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

هناك عدة طرق للذهاب إلى هنا:

  • استخدم مشروع مستهلك المكتبة الحقيقي الخاص بك واربط مكتبتك به عبر أمر ارتباط الغزل (انظر أدناه).
  • استخدام التطبيقات التجريبية التي يتم توفيرها لراحتك كجزء من مستودع الزاوي مكتبة المكتبة.
  • استخدم Angular-CLI لإنشاء مشروع مستهلك مكتبة لك ، ثم استخدم رابط الغزل لربط مكتبتك به.

توفير وضع المراقبة للمترجم AOT لتجربة تطوير أفضل

حسنًا ، لذلك نحن الآن لا نستخدم برنامج Angular Compiler في وضع المراقبة حتى الآن. لكن استخدام Gulp في مكتبة الزاوي يمنحنا إمكانية محاكاة وضع المراقبة. ألقِ نظرة على gulpfile.js (ملف به نصوص Gulp):

يراقب أي تغييرات ملف في مجلد src وبمجرد اكتشاف أي تغيير الملف فإنه يفرض برنامج التحويل البرمجي AOT لإعادة ترجمة المكتبة.

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

يمكن العثور على النسخة الكاملة من gulpfile.js في مستودع البذور - مكتبة الزاوي.

باستخدام التطبيقات التجريبية

يمكنك الاستفادة من أوضاع المشاهدة لكل من إنشاء المكتبة وإنشاء المشروعات التجريبية من أجل الاطلاع على التغييرات التي تم إجراؤها على الكود المصدري للمكتبة في متصفحك على الفور.

للقيام بذلك تحتاج إلى:

  1. افتح مثيلين وحدة التحكم.
  2. قم بتشغيل إنشاء مكتبة في وضع المراقبة في مثيل وحدة التحكم الأولى عن طريق تشغيل بناء الغزل: مشاهدة (على افتراض أنك في مجلد جذر الزاوي مكتبة المكتبة).
  3. قم بتشغيل إنشاء مشروع تجريبي (إصدار JIT) في وضع المراقبة من خلال تشغيل بدء الغزل في مثيل وحدة التحكم الثانية (على افتراض أنك في مجلد البذور / التجريبي لمكتبة الزاوي).

ونتيجة لذلك ، بمجرد تغيير شفرة مصدر المكتبة ، سيتم إعادة تجميعها تلقائيًا ، وبالتالي سيتم إعادة إنشاء المشروع التجريبي JIT تلقائيًا وستكون قادرًا على رؤية تلك التغييرات في متصفحك على الفور.

لمزيد من التفاصيل حول مشاريع العرض التوضيحي ، وهيكل المجلدات والأوامر npm ، يرجى إلقاء نظرة على مشاريع التجريبي الزاوي لمكتبة البذور README.

باستخدام رابط الغزل

نظرًا لأن الزاوي-library-seed يستخدم Yarn كمدير افتراضي للحزم ، فلا يتعين علينا التعامل مع خلل ارتباط npm الذي يتسبب في قيام npm بسرقة تبعية المكتبة منه ونقلها إلى مجلد node_modules الخاص بالمشروع. (نتيجة لذلك ، لا تعمل جميع البرامج النصية لبناة البرامج داخل حزمة المكتبة).

لذلك يمكنك ببساطة تشغيل رابط الغزل لربط مكتبتك بالمشروع:

# تشغيل هذا داخل مجلد المكتبة الخاصة بك
رابط الغزل
# تشغيل هذا داخل مجلد المشروع الخاص بك (استبدال اسم المكتبة)
غزل الارتباط الزاوي مكتبة البذور

ولكن في حالة تشغيل المشروع على Angular CLI ، فقد تواجه خطأً آخر لن يسمح لك أن يكون لديك مجلد node_modules داخل مجلد المكتبة المرتبط بك وسوف تفشل عمليات إنشاء AOT (prod) الخاصة بك مع الخطأ: "خطأ في رمز واجه خطأ القيم ثابتة. استدعاء وظيفة akemakeDecorator ".

هنا هو الحل المقترح. لذلك يمكنك ببساطة إضافة السطر التالي إلى ملف tsconfig.json الخاص بـ AngularCLI:

"مسارات": {"@ angular / *": ["../node_modules/@angular/*"]}

اقرأ المزيد عن تطوير مكتبة سير العمل والمشاريع التجريبية التي توفرها مكتبة الزاوي البذور في قسم README ذات الصلة.

ميزات المشروع الإضافية

بالإضافة إلى وظيفة بناء المكتبة الرئيسية ، يحتوي مشروع مكتبة angualar على الميزات التالية:

  • اختبار مع الكرمة والياسمين.
  • تقرير تغطية الاختبار عبر اسطنبول.
  • Linting مع TSLint و Codelyzer لتحليل الكود الثابت.
  • استكشاف البنية الخاصة بك عبر Sourcemap Explorer الذي يعرض لك تصوراً ثلاثي الأبعاد لمساعدتك على تصحيح مصدر التعليمات البرمجية بالكامل.
  • توليد الوثائق عبر Compodoc. نلقي نظرة على سبيل المثال الوثائق.
  • استضافة الوثائق عبر صفحات جيثب.
  • التكامل المستمر مع Travis CI.
  • رمز التغطية رمز عبر Codecov كتذكير لتغطية رمز مع الاختبارات.

ملاحظة # 1 تطوير مكتبة الزاوي - البذور

هذه مجرد أمثلة عديدة على كيفية بناء مكتبة Angular اعتمادًا على المتطلبات. لقد وجدت أن الحاجة إلى وجود ملفات SCSS و HTML خارجية هي المشكلة الأكبر لأنها جلبت أنواع مختلفة من الحلول معها مثل نسخ القوالب في مجلد dist أو استخدام Gulp لتضمين القوالب في ملفات * .component.ts وما إلى ذلك.

تطور بناء مكتبة الزاويتدفق بناء مكتبة الزاوي

لكن في النتيجة ، أعتقد أن تدفق البنية أصبح أكثر أو أقل بشكل مباشر ، مع إمكانية القيام بأي بنية (للاختبارات ، لـ UMD ، لـ ESM) بشكل متوازٍ.

ملاحظة # 2

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