كيفية سقالة مكونات React تلقائياً وتوفير الوقت

الصورة بواسطة Saksham Gangwar على Unsplash

قبل أن نبدأ: تستخدم هذه المقالة رمز مثال JavaScript / Node.js ، ولكن يمكنك نقل هذه المفاهيم إلى أي لغة باستخدام الأدوات المناسبة.

مقدمة مثيرة

هل وجدت نفسك تنشئ الملفات نفسها مرارًا وتكرارًا في مشاريعك؟

انا افعل ذلك ايضا.

أصابعي تؤلمني!

لست متفاجئا. أنت تأخذ العمل من الروبوتات.

إنشاء نفس الملفات مرارا وتكرارا هو ممل وغير ضروري.

TLDR؟ لقد حصلت عليك - إليك عرض توضيحي

الأتمتة السحرية - كما وعدت.

أرني الرمز

أحترم إحساسك بالإلحاح - سأقتصر على المطاردة

الرمز

نريد أتمتة إنشاء الملفات - وهذا هو سبب ظهوركم جميعًا اليوم. أولاً ، نحتاج إلى تحديد الملفات التي نريد إنشاؤها.

لقد قمت بإنشاء الكثير من مكونات React مؤخرًا ، لذا فإن الإعداد الخاص بي يدور حول ذلك - ولكن يمكنك تعديل هذا التغيير لأي شيء حرفيًا.

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

الخطوة 1: القوالب

إعدادهم مرة واحدة والربح.

نحتاج القوالب. لقد استخدمت Template Literals ، لكنني أفعل ذلك بأي طريقة كانت منطقية بالنسبة لك - كن مبدعًا.

هذه هي الملفات التي أقوم بإنشائها في كل مرة أقوم فيها بإنشاء مكون React:

  1. index.jsx
  2. {} مكون .test.js
  3. {} مكون .sass

ملاحظة: {Component} يستلزم استيفاء السلسلة.

أنا أجري اختبارًا مع Jest ، وأستخدم أداة إنشاء تطبيق التفاعل. أعرف أن الكثير من الناس يفضلون CSS-in-JS هذه الأيام - لكن مهلا. اسمحوا لي أن أعرف في التعليقات ما أنت فيه.

على أي حال - هنا نذهب:

هذا هو الجزء الأكثر فوضى من الشفرة التي ستراها هنا - الوعد الخنصر.

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

الخطوة 2: لنقم ببعض الوظائف!

نحن نستخدم وحدة fs التي تم حزمها مع Node. انها القوات المسلحة البوروندية. يفعل أشياء كثيرة.

سنستخدم بعض وظائف الأسهم وقليلًا من البرمجة الوظيفية. لا تخف - فقط اذهب معه.

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

هذا الكاري مع التطبيق الجزئي - إنه أيضًا إغلاق.

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

هيا نواصل:

أولا نطلب خ. نحن في حاجة إليها في حياتنا.

ثم نعلن fileExists كتعبير وظيفة.

أخيرًا ، لدينا تعبير وظيفة آخر يسمى WriteToPath. يستغرق المسار ويعيد دالة أخرى تقبل سلسلة الملف ومحتوى ذلك الملف. ثم يكتب الملف أو يرمي خطأ (سيناريو الحالة الأسوأ).

هل فهمتها بشكل صحيح؟ نحن بصدد إنشاء بعض الملفات.

الخطوة 3: تعرف على Chokidar

حقيقة ممتعة: إنها كلمة هندية.

تشوكيدار - (الهند) حارس ، حارس ، حارس البوابة ؛ الشخص الذي يسكن "تشوكي" أو مركز شرطة أو حراسة.

نحن نتحدث عن حزمة npm. يعتمد على صديقنا الجديد ، ويمكنك استخدامه للعديد من الأشياء الرائعة.

إنه يشاهد ملفاتنا لنا مثل الصقر.

حسنا ليس بالضبط مثل الصقر.

انها ليست طائر.

مثل على الإطلاق.

على أي حال ، إليك الرمز ...

أولاً نطلبها.

بعد ذلك نحدد ما نريد مشاهدته. أشاهد دليل src / components ، لكن يمكنك مشاهدة أي مجموعة من المسارات. يمكنك حتى تمرير مجموعة من المسارات. إذا كنت لا تتعرف على جزء ** في src / components / ** - يطلق عليه نمط الكرة الأرضية.

بعد ذلك ، نحدد الأحداث التي نريد الاستماع إليها. أستمع فقط لإضافة دليل باستخدام .on ("addDir") ولكن يمكنك الاستماع للأحداث الأخرى أيضًا.

بعد ذلك ، دعنا نستخلص اسم المكون عن طريق استبدال أي شيء قبل اسم المكون:

SRC / مكونات / رأس / مكونات / عنوان

يصبح

عنوان

أخيرًا سوف نتحقق من أن اسم المكون يمرر هذا التسجيل:

/ ^ [^ \ / _] * $ /

طالما أنه لا يوجد به شرطة مائلة أمامية أو شرطة سفلية - من الجيد أن يتم ذلك. هذا يتجنب تلويث __tests__ المجلدات أو المتداخلة / الدلائل عن طريق الخطأ.

الخطوة 4: الوقت لجعل بعض الملفات!

لقد وصلت إلى الخطوة الأخيرة. تهانينا! لقد كان رائعا جدا.

هذه الوظيفة التالية تحمل اسم كريتيفيليس.

إنه فوضوي بعض الشيء - يمكن إعادة تشكيله.

نعتذر مقدمًا إذا كان الرمز أدناه يسيء إليك.

دعنا نحفر

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

عبارة if محددة للغاية لإعدادي. لا أريد إنشاء ملفاتي إذا كان المجلد الجديد يسمى المكونات. أنا فقط إنشاء مكونات داخل مجلد فرعي للمكونات.

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

دعونا نتحدث عن متغير noneExist. إذا كان هذا صحيحًا ، فلن يكون هناك أي من الملفات التي نريد إنشاؤها في المجلد الجديد. الفكرة هي أنك لا تعبث مع مجلد لمجرد أنه لا يحتوي على ملف اختبار أو ملف sass. ربما لا يحتاج هذا المجلد إلى مجلد واحد.

const noneExist = Object.values ​​(ملفات)
  .MAP (toFileMissingBool)
  .reduce (checkAllMissing)؛

لهذا السبب قمتُ بإنشاء هذه الوظائف المسماة بشكل غريب أعلاه.

نقوم بتعيين القيم في الملفات إلى منطقية والتي تمثل ما إذا كان هذا الملف مفقودًا أم لا. ثم نأخذ هذه المجموعة من المنطقية ونخفضها إلى قيمة منطقية واحدة تمثل ما إذا كانت جميع الملفات موجودة أم لا.

لذلك إذا كان كل هذا صحيحًا ، فلن يكون هناك أي صواب أيضًا. ولكن حتى لو كان خطأً ، فلن يكون هناك أي خطأ.

أتمنى أن تكون قد حصلت على كل ذلك. انها قليلا من الفم.

آخر جزء من الشفرة:

Object.entries (files) .forEach (([type، fileName]) => {
  writeFile (اسم الملف ، القوالب [النوع] (الاسم)) ؛
})؛

نأخذ المفتاح (النوع) والقيمة (fileName) ونكتب ملفًا في المسار المحدد مع المحتوى من القالب ذي الصلة.

زعنفة.

تمثل صورة السلاحف البحرية مدى شعورك بالمجان الذي يجب أن تشعر به الآن بعد أن أصبحت مؤتمتًا بكل شيء.

إذا كنت تريد الرمز الكامل لإنشاء مكونات رد الفعل تلقائيًا ، فهذا موجود هنا.

اسمحوا لي أن أعرف ما فكرت - البقاء على اتصال.

قل لي إذا وجدت أي أخطاء.

اتبعني على Twitter أو Medium أو Github.

إذا كنت سعيدًا وأنت تعلم أنه يصفق يديك!