الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

رد فعل Monorepo الأصلي

نهج آراء لدعم منصات متعددة مع React Native باستخدام مساحات عمل الغزل monorepo.

تحقق من تشغيل React Native في كل مكان للحصول على دليل متعمق حول كيف ولماذا أوصي بتجربة هذا النهج إذا كنت تخطط لدعم منصات متعددة في تطبيقك.

  • ملخص
  • إعدادات عمل الغزل monorepo
  • Android & iOS
  • Windows & MacOS
  • الويب
  • امتدادات المتصفح والإلكترون

ملخص

يستخدم هذا monorepo مساحات عمل الغزل و typeScript لدعم المشروع الأصلي React.

تتمثل الفكرة الأساسية في عزل رمز تطبيق JavaScript من تكوينات النظام الأساسي (الرمز الأصلي + حزم التطبيق مثل Metro و WebPack).
تحدث هذه العزلة باستخدام مساحات عمل مختلفة: لدينا مساحة عمل app لرمز تطبيق JavaScript ، ومساحة عمل للهاتف mobile لتكوين REACT Native Mobile ، ومساحة عمل macos لتكوين MACOS الأصلي React ، وما إلى ذلك.

نحن نحتضن nohoist تمامًا للسماح باستخدام إصدارات مختلفة من React Native على كل منصة (الموصى بها ولكن غير مطلوبة) ، مما يؤدي إلى تبسيط اعتماد التحديثات الأصلية الجديدة React.
بفضل Nohoist ، يمكن لكل مساحة عمل منصة ( mobile ، macos ، إلخ) أن تعتمد على أي إصدار من React Native ، بغض النظر عن الإصدار الذي تستخدمه مساحات عمل النظام الأساسي الأخرى. على سبيل المثال ، يمكننا استخدام [email protected] على تطبيق الهاتف المحمول و [email protected] على تطبيق MacOS-طالما أن رمز تطبيق JavaScript يدعم كلا الإصدارين.
يعزز هذا النهج التحديثات الأصلية React Tergual على التحديثات في LockStep.

لمزيد من التفاصيل ، تحقق من "Running React Native في كل مكان: إعدادات عمل الغزل Monorepo".

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

المنصات المدعومة

  • Android (React Native 0.65)
  • iOS (React Native 0.65)
  • Windows (React Native 0.65)
  • MacOS (React Native 0.63)
  • تلفزيون Android (React Native 0.65)
  • TVOS (React Native 0.65)
  • الويب (React Native 0.65)
  • امتداد المتصفح على الويب (رد فعل 0.65)
  • الويب - الإلكترون (React Native 0.65)
  • Web - Next.js (React Native 0.65)

ابدء

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

باستخدام هذا المستودع كخليقة

  1. استنساخ المستودع: [email protected]:mmazzarolo/react-native-universal-monorepo.git
  2. قم بتشغيل Yarn تثبيت cd react-native-universal-monorepo && yarn

إنشاء هذا الإعداد من الصفر

تعليمي خطوة بخطوة على إنشاء هذا المستودع من الصفر:

  • ملخص
  • إعدادات عمل الغزل monorepo
  • Android & iOS
  • Windows & MacOS
  • الويب
  • امتدادات المتصفح والإلكترون

البرنامج التعليمي للتلفزيون و next.js من thefinnomenon:

  • إضافة دعم تلفزيون TVOS و Android إلى MonoRepo
  • next.js في Monorepo-

موارد إضافية:

  • قم بتشغيل تطبيق React Native على الويب مع React Native for Web
  • بناء تطبيق سطح المكتب باستخدام الإلكترون وإنشاء تطبيق React
  • تطوير امتداد المتصفح مع إنشاء تطبيق React

الأوامر المتاحة

الأوامر تطوير وبناء:

  • yarn android:metro : ابدأ خادم المترو لنظام Android/iOS
  • yarn android:start : ابدأ في تطوير تطبيق Android
  • yarn android:studio : افتح تطبيق Android على Android Studio
  • yarn ios:metro : ابدأ خادم المترو لنظام Android/iOS
  • yarn ios:start : ابدأ في تطوير تطبيق iOS
  • yarn ios:pods : تثبيت تبعيات IOS Cocoapods
  • yarn ios:xcode : افتح تطبيق iOS على Xcode
  • yarn macos:metro : ابدأ خادم المترو ل macos
  • yarn macos:start : ابدأ في تطوير تطبيق MacOS
  • yarn macos:pods : تثبيت Macos Cocoapods تبعيات
  • yarn macos:xcode : افتح تطبيق MacOS على Xcode
  • yarn web:start : ابدأ في تطوير تطبيق الويب
  • yarn web:build : إنشاء بناء إنتاج لتطبيق الويب
  • yarn electron:start : ابدأ في تطوير تطبيق الإلكترون
  • yarn electron:package:mac : حزمة إنتاج ثنائي لتطبيق الإلكترون لـ MacOS
  • yarn electron:package:win : حزمة إنتاج ثنائي لتطبيق الإلكترون لنظام التشغيل Windows
  • yarn electron:package:linux : حزمة إنتاج ثنائي لتطبيق الإلكترون لـ Linux
  • yarn browser-ext:start : ابدأ في تطوير امتداد المتصفح
  • yarn browser-ext:build : إنشاء بناء إنتاج لتمديد المتصفح
  • yarn windows:metro : ابدأ خادم المترو لنظام التشغيل Windows
  • yarn windows:start : ابدأ في تطوير تطبيق Windows
  • yarn tv:android:metro : ابدأ خادم المترو لـ Android TV
  • yarn tv:android:start : ابدأ في تطوير تطبيق Android TV
  • yarn tv:android:studio : افتح تطبيق Android TV في Android Studio
  • yarn tv:tvos:metro : ابدأ خادم المترو لـ TVOS
  • yarn tv:tvos:start : ابدأ في تطوير تطبيق TVOS
  • yarn tv:tvos:xcode : افتح تطبيق TVOS في Xcode
  • yarn tv:tvos:pods : تثبيت تبعيات TVOS Cocoapods
  • yarn next:start : ابدأ تطبيق Next.js
  • yarn next:build : إنشاء تطبيق Next.js
  • yarn next:serve : خدمة تطبيق Next.js

أوامر أخرى (نستخدم المراكز الفائقة لتشغيل هذه الأوامر على جميع مساحات العمل):

  • yarn lint : الوبر كل مشروع
  • yarn lint:fix : lint + إصلاح كل مشروع
  • yarn test : قم بتشغيل اختبارات كل مشروع
  • yarn typecheck : قم بتشغيل مجموعة TypeScript على كل مشروع

التبعيات الأصلية

أثناء العمل على React Native في Monorepo ، ستلاحظ أن العديد من الحزم لن تعمل بشكل صحيح عند الرفع-إما لأنها تحتاج إلى ربطها أصليًا أو لأنها تنتهي مرتين ، وكسر البناء (على سبيل المثال ، react ، react-dom ).
هذه ليست مشكلة مع النهج المستخدم في هذا المشروع في حد ذاته. إنها مشكلة شائعة مع Monorepos.

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

في هذا المونوروبو ، يمكنك رؤية مثال على هذه المكتبات في react-native-async-storage .

في Bundler Bundler و WebPack المستخدمة عبر Monorepo ، نستخدم مجموعة من أدوات الإنشاء لضمان حل حزم Nohoisted بشكل صحيح.
لذا ، طالما قمت بإضافة هذه المكتبات إلى قائمة nohoist ، يجب أن تكون على ما يرام؟

الغزل الكلاسيكي مقابل الغزل 2+

نحن نسعى جاهدين لجعل هذا الإعداد متوافقًا مع Yarn Classic - ولكن مع بعض التعديلات ، فإنه متوافق مع Yarn 2+ أيضًا (توفير جميع فوائد Yarn 2+).
انظر #22 لمزيد من المعلومات.

إعداد الغزل 2+

  1. قم بتشغيل yarn set version berry في جذر المشروع. سوف ينشئ ملف .yarnrc.yml .
  2. أضف الأسطر التالية إلى .yarnrc.yml لضمان إنشاء أدلة node_modules في كل مساحة عمل: 
 nodeLinker : node-modules
nmHoistingLimits : workspaces
  1. يخبر nmHositingLimits كيفية رفع التبعيات لكل مساحة عمل. من خلال تعيينه على workspaces سيتم تثبيت جميع التبعيات في كل من node_modules الخاصة بكل مساحة عمل بدلاً من رفعها إلى المجلد الجذري. هذا يعني أنه يمكنك الآن أنه يمكنك بأمان قسم noHoist في package.json Root.json.

تحقق من دليل "البدء" في Yarn 2+لمزيد من المعلومات.

القضايا المعروفة

في بعض الحالات ، لن يتمكن Yarn Classic من حل التبعيات بشكل صحيح والتي لها peerDependency على react-native .
انظر #22 لبعض الحلول. يعد الإصلاح على ريبو react-native-monorepo-tools .

المساهمة

المساهمات والمناقشات والتعليقات مرحب بها! يرجى السؤال عما إذا كانت هناك أي خطط نشطة لتغييرات الميزات قبل تقديم PRS جديدة؟

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل