ایجاد یک Monorepo مقیاس پذیر برای Vue – Workspaces

در پست قبلی به اصطلاح فضاهای کاری اشاره کردم. این یک نقطه شروع خوب است که همچنین نحوه ساختار پروژه های آینده و موجود خود را نشان می دهد. اولی (شروع بدون هیچ پروژه ای) آسان است، دومی (موجود) کمی کار بیشتری می طلبد اما با کمی شانس، همه چیز باید به آرامی اجرا شود.

مراحل زیر نحوه انجام این کار را با نخ کلاسیک شرح می دهد. می توانید از نخ توت (بسیار مشابه) یا pnpm نیز استفاده کنید. در pnpm این رویکرد با افزودن چنین توضیحات ساختاری به فایل pnpm-workspace.yaml کمی متفاوت عمل می کند. بقیه کاملا شبیه هستند.

صبر کنید، اما چرا npm نه؟ من شنیده ام که فضای کاری هم دارد.

AFAIK به دلیل مشکلات جدی در بالا بردن و عدم توانایی حل چنین وابستگی ها هنوز آماده monorepo نیست. توضیح خوبی در مورد مبارزه با اخطارهای npm در این مقاله ارائه شده است ؛)

بریم سر کار

1. اگر نخ را هنوز ندارید نصب کنید:

   npm install --global yarn
   

2. یک دایرکتوری جدید با a ایجاد کنید package.json ساختار فایل به صورت زیر است:

   {
       "name": "your_company_or_so",
       "version": "1.0.0",
       "workspaces": {
           "packages": [
               "apps/*",
               "libs/*",
               "whatever_else/*"
           ]
       },
       "dependencies": {
           // all repeating dependencies
       }
       // ...
   }
   

3. یک دسته از زیر دایرکتوری ها مانند اضافه کنید apps، libsو غیره مانند نمونه package.json.

4. پروژه های خود را در دایرکتوری های ذکر شده قرار دهید و/یا موارد جدید ایجاد کنید.

5. تکرار را قطع کنید dependencies و devDependencies از پروژه های شما package.json فایل ها را در زیر شاخه ها قرار دهید و آنها را در package.json فایل در دایرکتوری ریشه اینها اکنون به همه پروژه های شما متصل هستند – استثناها ممکن است (در زیر بخوانید).

6. تمام موارد خود را حذف کنید node_modules در دایرکتوری های فرعی

7. همانطور که در پست قبلی ذکر شد، می توانید کتابخانه های خود را مستقیماً با پروژه ها، با اصلاح آنها، به آنها متصل کنید package.json مثل این:

   {
       "name": "@monorepo/app_1",
       "version": "1.0.0",
       "type": "module",
       "scripts": {
           // ...
       },
       "dependencies": {
           "@monorepo/commons": "*",
           "@monorepo/ui": "*"
       },
       // ...
   }
   

8. به دایرکتوری ریشه بروید و وابستگی ها را برای همه پروژه ها به طور همزمان نصب کنید:

   yarn install
   

در مورد وابستگی هایی که یکسان نیستند چطور؟

ابتدا آنها را به همان نسخه، ترجیحاً جدیدتر، بیاورید.

در حال حاضر خیلی وقت گیر است.

من آن را دریافت می کنم – مهلت ها، و غیره. شما فقط می توانید آنها را در جایی که هستند رها کنید. من همچنان اکیداً توصیه می‌کنم که فقط یک نسخه از Vue، React، Typescript و غیره داشته باشید، زیرا هرچه بسته‌های بیشتری به همان نسخه متصل شوند، به‌روزرسانی همه پروژه‌ها به‌طور همزمان و مقابله با Refactor‌ها پس از به‌روزرسانی همه پروژه‌ها آسان‌تر است. یکی برو

خوب، من آنچه را که می توانستم به روز کردم، اما هنوز وابستگی هایی وجود دارد که به نسخه های مختلف نیاز دارند.

خوب است، هیچ عیبی ندارد. تصمیم بگیرید که کدام نسخه رایج تر است و این یکی را به ریشه منتقل کنید package.json. نسخه کمتر رایج در آن باقی خواهد ماند package.json فایل پروژه ای که از آن استفاده می کند. به این ترتیب به مدیر بسته خود سیگنال می دهید که به آن نسخه خاص در یک پروژه خاص نیاز دارید و به طور مستقل نصب می شود.

در مورد وابستگی هایی که فقط یک بار استفاده می شوند چطور؟ آیا آنها را هم جابجا کنم؟

این به شما بستگی دارد. اگر فرض می کنید که بیشتر مورد استفاده قرار می گیرند، مطمئناً آنها را جابجا کنید. آیا آنها فقط یک بار برای این پروژه خاص استفاده می شوند و احتمال تغییر آن بسیار کم است؟ نه، شما مجبور نیستید آن را حرکت دهید و ریشه را آلوده کنید package.json.

عیب یابی

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

می توانید سعی کنید این یک مهاجرت به ریشه را حذف کنید package.json فایل و نگهداری آن در پروژه ها package.json در عوض فایل ها

من با وابستگی های خارج از آن مشکل دارم node_modules در پروژه (به دایرکتوری دیگری منتقل شد).

این کاملا غیر معمول است، اما این اتفاق می افتد. اگر با چنین مشکلاتی مواجه شدید، فکر کنید nohoist گزینه ای برای نخ کلاسیک که در اینجا توضیح داده شده است. یا حتی بهتر از آن، به yarn berry یا pnpm. تا جایی که من اطلاع دارم، آنها باید عاری از چنین مشکلاتی باشند.