sajjadmrx
sajjadmrx
خواندن ۳ دقیقه·۹ ماه پیش

چجوری تایپ فایل هارو بین بک اند و فرانت به اشتراک بزاریم؟

اشتراک گذاری فایل ها
اشتراک گذاری فایل ها

😵‍💫 مشکل چیه؟

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

به عنوان مثال بک اند یه تایپ یا اینترفیس واسه ریسپانس در نظر میگیره، حالا ما باید به صورت دستی اون فایل تایپ رو تو فرانت کپی کنیم و خوب اینجوری یکم اذیت کننده هست مخصوصا وقتی تغییرات داریم.

یا وقتی که پروژهای میکروسرویس داریم نیازه بعضی از فایل هارو بین سرویس ها شیر کنیم! به عنوان مثال proto فایل ها رو.

🤔 راحل چیه؟؟

استفاده از ابزار تحت فرمان ( cli ) به اسم neox-cli
neox چیست؟

یک ابزار متن باز ( open source ) هست، که با استفاده از گیت میتونه به ما کمک کنه که فایل هارو بین سرویس هامون به اشتراک بزاریم.

🧩 آموزش نصب

پکیج منیجر npm
پکیج منیجر npm

همینطور که قبلا بهش اشاره کردیم neox-cli یک ابزار تحت فرمان هست که با node.js نوشته شده. و به صورت یک لایبری در npm برای استفاده عموم منتشر شده
نصب این ابزار مثل تمامی لایبری ها هست
و ما میتونیم به دو صورت این ابزار رو نصب کنیم:
1. به صورت گلوبال ( پیشنهادی جهت استفاده در تمامی زبـان ها ).

npm install neox-cli -g

2. فقط در یک پروژه جاوااسکریپتی ( قابل استفاده از npm ).

npm install neox-cli


🎯 نحوه استفاده

github or gitlab
github or gitlab

سعی میکنم در این بخش به صورت خیلی ساده و مرحلی نحوه استفاده از neox-cli رو شرح بدم.

1. ساخت یه ریپوزیتوری ( repository ) در گیت هاب یا گیت لب.

ساخت ریپوزیتوری در گیت ها
ساخت ریپوزیتوری در گیت ها

خب همینطور که در تصویر بالا میبیند ما یک ریپوزیتوری خصوصی ( private ) ساختیم و اسم اونو crosstypes گذاشتیم.
هدف ما اشتراک گذاری تایپ فایل ها بین تیم بک اند و تیم فرانت هست، اما ما میتونیم این کارو هم برای میکروسرویس هامون هم انجام بدیم

2. اضافه کردن فایل به ریپوزیتوری

user interface
user interface

خب ما میخوایم این interface رو به اشتراک بذاریم.
این فایل رو به crosstype اضافه میکنیم و اونو در ریپوزیتوری ( repository ) push میکنیم.

3. اضافه کردن neox به پروژه/هامون

initialize neox
initialize neox

خب در قدم اول باید neox رو initialize کنیم
اینکارو با دستور زیر انجام میدیم.

neox init

این دستور واسه ما یک فایل به اسم neoX.config.json ایجاد میکنه.

neoX.config.json example
neoX.config.json example

فیلدهای این فایل شامل:

repo: لینک ریپوزیتوری که میخواهید از اون استفاده کنید، ما در بالا یک ریپوزیتوری به نام crosstype ایجاد کردیم.
outDir: اسم فولدری که میخواهید محتوای ریپوزیتوری در اونجا گذاشته بشه.
isSubmodule: مشخص کنید که میخواهید این زیرمجموعه باشه یا خیر. همچنین با فعال کردن این گزینه فولدر .git از outdir حذف نمیشه و به شما امکان استفاده از دستور `neox check` رو میده.
exclude: فایل های که میخواهید حذف بشن رو مشخص کنید.

در نهایت فایل ما این شد:

neoX.config.json example
neoX.config.json example

4. استفاده از neox

neox pull
neox pull

ما میتونیم لیستی از ریپوها داشته باشیم، پس اینجا ( تصویر بالا ) باید مشخص کنیم که کدوم ریپو مدنظرمونه یا اینکه گزینه all رو بزنیم.

neox pull
neox pull

من گزینه .shared-types رو انتخاب کردم، و در نهایت محتوای ریپوزیتوری در فولدر .shared-types قرار داده شد.

neox pull نتیجه
neox pull نتیجه

به این صورت ما میتونیم از neox استفاده کنیم، من در این نمونه از پروژه typescript استفاده کردم
اما شما میتونید تو هر پروژهی با هر زبانی استفاده کنید ( با نصب به صورت گلوبال )

سعی کردم به صورت خلاصه این ابزار رو بهتون معرفی کنم، اما این ابزار امکانات جالبه دیگه ای هم داره که ازتون دعوت میکنم به گیت هابش برید و دایکومنتش رو ببیینید:
گیت هاب:
https://github.com/EternalC0der/neoX-cli
npm:
https://www.npmjs.com/package/neox-cli

پایان. ( تکمیل میشه )

گیت هابopen sourceuser interface
سعی میکنم چیزای که بلدم رو به اشتراک بذارم.
شاید از این پست‌ها خوشتان بیاید