مساحات عمل الغزل: قم بتنظيم قاعدة كود مشروعك مثل المحترفين

في أي وقت أبدأ فيه العمل في مشروع جديد ، أسأل نفسي ، "هل يجب أن أستخدم مستودعات git منفصلة لخادم الواجهة الخلفية وعميل (عملاء) الواجهة الأمامية؟ ما هي أفضل طريقة لتنظيم قاعدة التعليمات البرمجية؟ "

كان لدي هذا السؤال نفسه بعد بضعة أشهر من العمل على موقع الويب الخاص بي. كان لدي في الأصل كل الكود في نفس المستودع: استخدمت النهاية الخلفية Node.js والواجهة الأمامية استخدمت ES6 مع Pug. لقد اعتمدت هذه المنظمة للراحة ، نظرًا لأن وجود كلا المشروعين في نفس الريبو سهّل البحث عن الوظائف والفئات ، وسهّل إعادة البناء. ومع ذلك ، وجدت بعض الجوانب السلبية:

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

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

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

ما هي مساحات عمل الغزل؟

Yarn هو مدير حزم من قبل الأشخاص في Facebook ، وله ميزة رائعة تسمى مساحات عمل Yarn. تتيح لك مساحات عمل الغزل تنظيم قاعدة كود مشروعك باستخدام مستودع متآلف (monorepo). الفكرة هي أن المستودع الواحد سيحتوي على حزم متعددة. الحزم معزولة ويمكن أن تعيش بشكل مستقل عن المشروع الأكبر.

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

تم قبول مشاريع Monorepo على نطاق واسع من قبل الشركات الكبيرة مثل Google أو Facebook ، وقد أثبتوا قدرة monorepo على التوسع.

"

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

إنشاء مشروع Monorepo باستخدام React and Express باستخدام مساحات عمل الغزل في ست خطوات

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

المتطلبات الأساسية

لإكمال هذا البرنامج التعليمي بالكامل ، ستحتاج إلى تثبيت Yarn على جهازك. إذا لم تكن قد قمت بتثبيت Yarn من قبل ، فيرجى اتباع هذه التعليمات.

هذه هي الخطوات التي سنتبعها في هذا البرنامج التعليمي:

1. قم بإنشاء مشروعك ومساحة عمل الجذر
2. قم بإنشاء مشروع React وأضفه إلى قائمة مساحة العمل
3. أنشئ مشروعًا سريعًا وأضفه إلى مساحة العمل
4. قم بتثبيت جميع التبعيات وقل مرحبًا بـ yarn.lock
5. استخدام حرف البدل (*) لاستيراد جميع الحزم الخاصة بك
6. قم بإضافة برنامج نصي لتشغيل كلا الحزمتين

1. أنشئ مشروعك ومساحة عمل الجذر

في محطة جهازك المحلية ، قم بإنشاء مجلد جديد يسمى example-monorepo :

 $ mkdir example-monorepo

داخل المجلد ، أنشئ package.json جديدًا باستخدام مساحة عمل الجذر الخاصة بنا.

 $ cd example-monorepo $ touch package.json

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

 { "private": true, "name": "example-monorepo", "workspaces": [], "scripts": {} }

2. إنشاء مشروع React وإضافته إلى قائمة مساحة العمل

في هذه الخطوة ، سننشئ مشروع React جديدًا ونضيفه إلى قائمة الحزم داخل مساحة عمل الجذر.

أولاً ، لنقم بإنشاء مجلد يسمى الحزم حيث سنضيف المشاريع المختلفة التي سننشئها في البرنامج التعليمي:

 $ mkdir packages

لدى Facebook أمر لإنشاء مشاريع React جديدة: create-react-app . سنستخدمه لإنشاء تطبيق React جديد بكل التكوينات والبرامج النصية المطلوبة. نحن بصدد إنشاء هذا المشروع الجديد باسم "client" داخل مجلد الحزم الذي أنشأناه في الخطوة 1.

 $ yarn create react-app packages/client

بمجرد إنشاء مشروع React الجديد ، نحتاج إلى إخبار Yarn بالتعامل مع هذا المشروع كمساحة عمل. للقيام بذلك ، نحتاج ببساطة إلى إضافة "client" (الاسم الذي استخدمناه سابقًا) داخل قائمة "مساحات العمل" في حزمة الجذر. json . تأكد من استخدام نفس الاسم الذي استخدمته عند تشغيل أمر create-react-app .

 { "private": true, "name": "example-monorepo", "workspaces": ["client"], "scripts": {} }

3. أنشئ مشروعًا سريعًا وأضفه إلى مساحة العمل

حان الوقت الآن لإضافة تطبيق خلفي! نحن نستخدم express-generator السريع لإنشاء هيكل عظمي سريع مع جميع التكوينات والبرامج النصية المطلوبة.

تأكد من تثبيت express-generator على جهاز الكمبيوتر الخاص بك. يمكنك تثبيته باستخدام Yarn بالأمر التالي:

 $ yarn global add express-generator --prefix /usr/local

باستخدام express-generator ، نقوم بإنشاء تطبيق Express جديد باسم "الخادم" داخل مجلد الحزم .

 $ express --view=pug packages/server

أخيرًا ، أضف الحزمة الجديدة "server" إلى قائمة مساحات العمل داخل الحزمة root.json .

 { "private": true, "name": "example-monorepo", "workspaces": ["client", "server"], "scripts": {} }

ملاحظة : تم تبسيط هذا البرنامج التعليمي باستخدام حزمتين فقط (الخادم والعميل). في مشروع ما ، قد يكون لديك عادةً العديد من الحزم التي تحتاجها ، وبحسب الاصطلاح ، يستخدم مجتمع المصادر المفتوحة نمط التسمية هذا: @your-project-name/package-name . على سبيل المثال: أستخدم @ferreiro/server على موقع الويب الخاص بي.

4. قم بتثبيت جميع التبعيات وقل مرحبًا بـ yarn.lock

بمجرد إضافة تطبيق React الخاص بنا ، وكذلك خادمنا السريع ، نحتاج إلى تثبيت جميع التبعيات. تعمل مساحات عمل الغزل على تبسيط هذه العملية ولم نعد بحاجة إلى الانتقال إلى كل تطبيق فردي وتثبيت تبعياتها يدويًا. بدلاً من ذلك ، نقوم بتنفيذ أمر واحد - yarn install - ويقوم Yarn بعمل السحر لتثبيت جميع التبعيات لكل حزمة ، وتحسينها وتخزينها مؤقتًا.

قم بتشغيل الأمر التالي:

 $ yarn install

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

5. استخدام حرف البدل (*) لاستيراد جميع الحزم الخاصة بك

حتى الآن ، بالنسبة لكل حزمة جديدة أضفناها ، اضطررنا أيضًا إلى تحديث الحزمة الجذرية.json لتضمين الحزمة الجديدة إلى workspaces:[] list.

يمكننا تجنب هذه الخطوة اليدوية باستخدام حرف بدل (*) يخبر Yarn بتضمين جميع الحزم داخل مجلد الحزم .

داخل الحزمة root.json ، حدِّث محتوى الملف بالسطر التالي: "workspaces": ["packages/*"]

 { "private": true, "name": "example-monorepo", "workspaces": ["packages/*"], "scripts": {} }

6. قم بإضافة برنامج نصي لتشغيل كلا الحزمتين

اخر خطوة! نحتاج إلى طريقة لتشغيل كلتا الحزمتين - عميل React وعميل Express - في وقت واحد. في هذا المثال ، concurrently . تتيح لنا هذه الحزمة تشغيل أوامر متعددة بالتوازي.

أضف concurrently إلى حزمة الجذر. json :

 $ yarn add -W concurrently

أضف ثلاثة نصوص برمجية جديدة داخل حزمة مساحة عمل الجذر. json . يقوم نصان بتهيئة عملاء React و Express بشكل مستقل ؛ يستخدم الآخر concurrently لتشغيل كلا النصين بالتوازي. انظر هذا الرمز للرجوع اليها.

 { "private": true, "name": "example-monorepo", "workspaces": ["packages/*"], "scripts": { "client": "yarn workspace client start", "server": "yarn workspace server start", "start": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\" } }

ملاحظة : لن نحتاج إلى كتابة نصوص start الخاصة بنا في حزم "الخادم" و "العميل" لأن الأدوات التي استخدمناها لإنشاء هذه الحزم ( create-react-app التفاعلي والمولد express-generator ) تضيف بالفعل هذه البرامج النصية لنا. لذلك نحن على ما يرام!

أخيرًا ، تأكد من تحديث البرنامج النصي Express boot-up لتشغيل خادم Express على المنفذ 4000. وإلا فسيحاول العميل والخادم استخدام نفس المنفذ (3000).

انتقل إلى الحزم / الخادم / بن / www وقم بتغيير المنفذ الافتراضي في السطر 15.

 var port = normalizePort(process.env.PORT || '4000');

الآن نحن جاهزون لتشغيل حزمنا!

 $ yarn start

أين أذهب من هنا

دعنا نلخص ما غطينا. أولاً ، تعرفنا على مساحات عمل Yarn ولماذا تعتبر أداة رائعة لإنشاء مشروع monorepo. بعد ذلك ، أنشأنا أول مشروع JavaScript monorepo باستخدام Yarn ، وقمنا بتقسيم منطق تطبيقنا إلى حزم متعددة: العميل والخادم. أيضًا ، أنشأنا أول نصوص برمجية أساسية npm وأضفنا التبعيات المطلوبة لكل تطبيق.

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

أيضًا ، إذا كنت تريد رؤية موقع ويب للإنتاج يستخدم هذا الأسلوب لفصل تطبيقات الواجهة الخلفية والواجهة الأمامية إلى حزم مستقلة ، فيمكنك التحقق من مصدر موقع الويب الخاص بي ، والذي يتضمن أيضًا مسؤول مدونة. عندما قمت بترحيل قاعدة التعليمات البرمجية لاستخدام مساحات عمل Yarn ، قمت بإنشاء طلب سحب باستخدام Kyle Wetch.

علاوة على ذلك ، قمت بإعداد البنية التحتية لمشروع هاكاثون يستخدم مساحات عمل React و webpack و Node.js و Yarn ، ويمكنك التحقق من الكود المصدري هنا.

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

لأية تعليقات أو أسئلة ، لا تتردد في التواصل معي على Twitter. أيضًا ، في الأشهر التالية ، سأقوم بنشر المزيد من المحتوى حول هذا الموضوع في مدونتي ، حتى تتمكن من الاشتراك هناك أيضًا. ترميز سعيد!