كيفية تطوير JavaScript المزيد من المكونات

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

تقديم مدخل وحدات ES6

يدعم webpack و rollup تنفيذ بعض التحسينات الثابتة على وحدات ES6 (مثل Tree Shaking و Scope Hoisting)، وسيقرأان الأولويه حقل module في ملف package.json كمدخل وحدات ES6، وإن لم يكن هناك حقل module سيقرأان حقل main كمدخل وحدات CommonJS. عادةً ما يكون الأسلوب هو: كتابة الكود المصدر بلغة ES6، ثم استخدام أداة تحويل لإنشاء وحدات CommonJS و ES6 باستخدام أداة تحويل، مما يمكن من تقديم حقل main و module في نفس الوقت.

تقديم ملفات التصريح لتypescript

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

من الأفضل استخدام TypeScript ل كتابة مكتبتك، حيث سيتم إنشاء إعلانات النوع تلقائيًا عند التجميع. بالإضافة إلى ذلك، يمكنك أيضًا مراجعة الوثائق للحفاظ على ملف الإعلانات اليدوي. يمكنك إضافة ملف index.d.ts في مجلد جذور مكتبتك أو إعلان موضع الإعلانات في package.json.

جعل المكتبة تعمل في Node.js والمتصفح في نفس الوقت

يمكنك التحقق من تشغيل المكتبة حاليًا في Node.js أو المتصفح من خلال التحقق من وجود متغير عالمي يسمى window (مثل !!typeof window)، ثم استخدام طريقة مختلفة لتحقيق وظائفك.

هذه الطريقة شائعة، ولكن إذا استخدم المستخدم أداة الت打包 للمكتبات، فإن كل من تنفيذ Node.js و المتصفح سيتم تضمينه في ملف الإخراج النهائي. لمواجهة هذه المشكلة، قدم المجتمع المفتوح مقترحًا لإضافة مجال browser في package.json، وقد دعمته حاليًا webpack و rollup.

يوجد طريقتان لاستخدام مجال browser:

اعطاء مجال browser مسار ملف كمدخل للمكتبة عند استخدامها في المتصفح، ولكن يجب الانتباه إلى أن أداة الت打包 ستستخدم أولاً المسار المحدد في مجال browser كمدخل للمكتبة، مما سيؤدي إلى تجاهل مجال module، مما يؤدي إلى عدم تحسين أداة الت打包 لكودك. لمزيد من التفاصيل، يرجى الرجوع إلى هذا المسألة.

إذا كنت ترغب في استبدال بعض الملفات فقط، يمكنك الإعلان عن�체.

لنأخذ مثالًا، لنفترض أن لديك ملفين في مكتبتك: http.js و xhr.js، الأول يستخدم مكتبة http في Node.js لإرسال الطلبات، والثاني يستخدم XMLHTTPRequest في المتصفح لتحقيق نفس الوظيفة. من أجل استخدام الملف المناسب، يجب أن تُستخدم دائمًا require(‘./path/to/http.js’) في كود مكتبتك، وتمثل الإعلان في package.json:

{
 "browser": {
  "./path/to/http.js": "./path/to/xhr.js"
 }
}

بهذه الطريقة، عند استخدام مكتبتك في أداة الت打包، ستقوم الأداة بتضمين كود xhr.js فقط في ملف الإخراج النهائي.

استخدام مختلف الخدمات لتسليح مشروعك

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

خدمة أكثر استخداماً في المشروع هي التجميع المستمر. يمكن لتجميع المستمر تشغيل المهام مثل الاختبار، التحقق من أسلوب الكود، التعبئة، على الخادم، وتشغيلها تلقائيًا عند تقديمك للكود، من بين الخدمات الشائعة Travis CI، CircleCI وAppVeyor. Travis CI مجاني للمشروعات المفتوحة المصدر، ويقدم بيئات تشغيل Linux وOS X؛ CircleCI مجاني للمشروعات المفتوحة المصدر والخاصة، ولكن لديه محدودة 1500 دقيقة تشغيل في الشهر؛ AppVeyor يقدم بيئة تشغيل Windows، ويكون مجانيًا للمشروعات المفتوحة المصدر.

بعد إكمال الاختبار، يمكنك أيضًا تحميل تغطية الاختبار إلى Coveralls. هذه الخدمة تسمح لك بتصفح تغطية الاختبار للكود عبر الإنترنت.

إذا كنت ترغب في اختبار مكوناتك في جميع الإصدارات المختلفة من المتصفحات والمنصات، يمكنك استخدام Sauce Labs وBrowserStack، كلاهما مجاني للمشروعات المفتوحة المصدر، ولكن يتطلب إرسال بريد إلكتروني للاستفسار.

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

هذا هو كل محتوى نشاركه معكم حول كيفية تطوير مكونات JavaScript المفيدة، إذا كان لديك أي أسئلة غير واضحة، يمكنك مناقشتها في منطقة التعليقات أدناه، شكراً لدعمك لتعليم呐喊.

البيان: محتويات هذا المقال تم جمعها من الإنترنت، ويحق للمالك الأصلي حقوق الطبع والنشر، ويتم جمع المحتويات من قبل المستخدمين عبر الإنترنت الذين يقدمون المساهمات بشكل تلقائي ويتم تحميلها، ويتمتع هذا الموقع بلا حقوق ملكية، ولا يتم تعديل المحتويات بشكل يدوي، ولا يتحمل الموقع أي مسؤولية قانونية تتعلق بذلك. إذا لاحظت أن هناك محتويات تشتبه في حقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال '#' بـ '@') لإبلاغنا، وقدم الدليل على الدليل، وسيتم حذف المحتويات المشتبه في حقوق النسخ فور التحقق منها.