مونوریپو چیست و چگونه آن را در react پیاده سازی کنیم؟

رویکرد مونوریپو در دهه ی گذشته اولین بار توسط گوگل پیشنهاد شده ولی در چند سال اخیر بسیار پر استفاده تر شده.

مونوریپو چیست؟

مونوریپو یک مفهوم ساختاریه در راستای اینکه شما به جای مدیریت چندین ریپازیتوری میتوانید کد های ایزوله شده ی خود را در یک ریپازیتوری نگهداری بکنید.این به این معنا نیست که لزوما پروژه های شما "باید" از لحاظ منطقی و کاربردی به هم مربوط باشند.

فرض کنید کار شما به سمتی کشیده شده که دارای وب اپلیکیشن جداگانه,IOS app و android app مخصوص به خود و موارد دیگر است(هرچند که اگر به این حد رسید بهتره شاید یه تجدید نظر بکنید:دی) .در این حالت monorepo بودن پروژه بسیار کمک کننده است.

تیم ما در وب اپلیکیشن خود چرا نیازمند این شد که به سمت monorepo بره؟

وب اپلیکیشن ما دارای دو مفهوم متفاوت از buyer و seller داشت که باید کاملا از همدیگر جدا میبودند و بیلد جداگونه گرفته میشد . از طرفی تا حد زیادی دارای کامپوننت های مشترک بودند و نیاز داشتیم اکثر اوقات این دو قسمت پروژه رو به صورت همزمان توسعه بدیم. حال ما توسط مونوریپو میتونستیم قسمت seller ,buyer رو به صورت دو پکیج جداگونه در نظر گرفته و علاوه بر اون پکیچی به اسم common برای کامپوننت ها و چیز های مشترک بسازیم و در هر دو استفاده کنیم.

حالا اگر از این مفهوم استفاده نکنیم چی؟

این به این معنیه که برای هرپکیج باید یک سری کانفیگ هارو کپی کنیم و فرض کنید هر بار اضافه کردن تغییرات مثل هم, ساخت مرج ریکوست و بیلد و ...

بسیار طاقت فرسا!

چگونه پیاده سازی کنیم؟

یکی از بهترین روش ها و معمول ترین روش ها استفاده از Lerna هست که ما در اینجا بهش میپردازیم.با این حال روش دیگری با استفاده از خود yarn هم وجود داره.

استفاده از Lerna:

ایده اصلی لرنا اینه که پروژه ی شما یک فولدری به نام packages داره که شامل تیکه کد (پروژه) های ایزوله شما هست .لرنا یکی از قابلیت های خوبی که داره bootstrap هست.با بوت استرپ این پروژه ها توانایی اینو دارند که همدیگر رو ایمپورت بکنند بدون اینکه چیزی توی npm پابلیش بشه.

مراحل پیاده سازی:

ابتدا توی فولدر جدیدی که ساختین yarn init رو میزنین

yarn init

همونطور که میدونید بعد زدن دستور از ما سوالایی میپرسه که فعلا میتونیم رد بکنیم.

حال که package.json ما ساخته شد لرنا رو اضافه میکنیم

yarn add -D lerna

پس از اون :

lerna init

*حواستون باشه اگر ویندوز هستید و دستور رو نمیشناسه npx lerna init رو بزنین.

اسکریپت زیر رو به package.json اضافه کنین

&quotscripts&quot: {
    &quotbootstrap&quot: &quotlerna bootstrap&quot,
    &quotbuild&quot: &quotlerna run build&quot,
    &quotstart&quot: &quotlerna run start --stream&quot
  },

yarn bootstap: اتصال پروژه ها به یکدیگر

yarn build: همه ی پروژه های داخل فولدر پکیج بیلد گرفته میشه

yarn start: ران شدن پروژه

فایل lerna.json هم همچین شکلی تقریبا باید باشه

{&quotpackages&quot: [&quotpackages/*&quot],
&quotversion&quot: &quot0.0.0&quot,
&quotnpmClient&quot: &quotyarn&quot,
&quotuseWorkspaces&quot: true}

در حال حاضر باید فولدر packages رو بتونید ببینید.

حال زمان این رسیده که دو پروژه ری اکت تست بسازید! داخل فولدر packages برید و دستور زیر رو طبق چیزی که میخواید تغییر بدید .

npx create-react-app app --template typescript

حال زمان ارتباط گیری پروژه ها توسط بوت استرپ هست که باید توی فولدر root صدا زده بشه نه پکیجز:

lerna bootsrap

دقت کنید اگر ارور

error Workspaces can only be enabled in private projects.

میخورید باید"private":"true"به package.json اضافه کنید.

حال اگر yarn start رو بزنین باید پروژه های شما با هم ران بشه:)!

ولی احتمال هم داره نشه؟ چرا؟ چون دوتاشون میخوان رو پورت 3000 بالا بیان. پس داخل package.json یکی از پروژه ها قسمت "scripts"

دستور start رو به این صورت تغییر بدید:

//for windows 
&quotstart&quot: &quotset PORT=3006 && react-scripts start&quot,
//for linux
&quotstart&quot: &quotPORT=3006 react-scripts start&quot

تموم! حالا دوتا پروژه ها با هم ران میشن. اگر هم بخواید جداگونه ران بکنیدشون داخل هر فولدر جداگونه yarn start رو بزنین.

خسته نباشید شما موفق شدید :)