بیت یا گیت واسه کامپوننت ها؟

بیت ی سیستم هست که امکان ساختن کالکشن های کامپوننت و استفاده انها در پروژه های مختلف رو فراهم میکنه. به چه شکلی؟

یعنی ما میایم یدونه کامپوننت میسازیم حالا فرقی هم نداره تو چه فریمورکی بعد میایم روی بیت پوشش میکنیم دقیقا مثل یک گیت. حالا فرضا من میخوام همین کامپوننت رو تو ی پروژه دیگه استفاده کنم. اینجا میام با بیت ایمپورتش میکنم فرض کنید مثل پول کردن گیت. ولی ی فرق داره. مثلا ی کامپوننت ممکنه ی تعداد دیپندنسی داشته باشه اینجا بیت میاد دیپندنسی ها رو هندل میکنه. ی امکان مهم دیگه ورژن گذاری هست. مثلا من این کامپوننت رو اینیت کردم و میام پوش میکنم تو بیت با ورژن ۰.۰.۱. حالا فرداش میام یخورده توسعش میدم و باز پوشش میکنم اما اینبار مثلا با ورژن ۰.۰.۲ !!! هر زمان بخوام هم میتونم بین ورژن های مختلف جا به جا شم! یعنی فرضا دیدم ی باگ داره سریع برمیگردم به ورژن قبلی.

حالا میخوام بصورت عملی ی پروژه nuxt با هم بسازیم و ی کامپوننت بهش اضافه کنیم. بعد میایم همین کامپوننت رو پوش میکنیم به بیت و بعد توی ی پروژه دیگه پول میکنیم!

قبل شروع کردن بد نیست که فیلتر شکن خودتون رو روشن کنید!

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

حالا میام ی کامپوننت Users میسازم و میذارم توی پوشه components

حالا میخوام ببیام به بیت پوش کنم این کامپوننت رو . اول از همه با کامند لاین بیت رو نصب کنیم

npm install bit-bin -g

بعد لازم هست لاگین کنیم با کامند لاین که خب لازمه اکانت داشته باشیم پس قبلش اکانت رو بسازید

حالا داخل کامند لاین bin login رو بزنید.

بعد لاگین میخوام بیت رو به پروژه ناکست خودم اضافه کنم. میام bit init رو داخل پوشه ای که package.json پروژه هست میزنم که معمولا داخل روت پروژه هست

خب حالا من ی تعداد کامپوننت دارم اما بیت هنوز نمیدونه! یعنی من لازمه به بیت بگم که اقا بیا فلان کامپوننت رو track کن! بیاین به بیت بگیم که users کامپوننت من رو ترک(track) کن!

bit add components/users.vue --id users

با این دستور بالا میتونم بهش بگم اما این دستور دقیقا چیکار میکنه؟!

قسمت bit add که واضحه دارم بهش میگم یچیزیو اضافه کن! اما پارامتر اول path کامپوننتی هست که میخوام track کنه! حالا وقتشه بگم ای دی این کامپوننت چیه که با قسمت دوم دستور این رو بهش گفتم

خب حالا این دستورو زدم چی شد دقیقا؟! اگر الان بیام bit status رو بزنم در جواب بهم میگه ی کامپوننت جدید پیدا کرده! شباهت زیادی به git status داره!

خب حالا کامپوننت رو اضافه کردم پس برم پوشش کنم به بیت! اما هنوز ی کار دیگه قبل پوش مونده! ما میخوایم این کامپوننت رو تو پروژه های دیگه استفاده کنیم! پس لازمه اول بیلد کنیم! واسه بیلد خب به کامپایلر نیاز هست که میشه با این دستور نصبش کرد!

bit import bit.envs/compilers/vue --compiler

خب حالا وقشته که کامپوننت رو بیلد کنیم! با دستور

bit build

خب حالا اگه مثل گیت فرض کنیم وقشته که وارد مرحله staging بشیم! اینجا توی بیت دقیقا stage کردن داریم. به این شکل که من میام ی ورژن به کامپوننت میدم و اون رو استیج میکنم! با دستور:

bit tag users 0.0.1

تو این دستور من دارم به بیت میگم که کامپوننت users منو با ورژن ۰.۰.۱ استیج کن!

حالا اگه بیام bit status بگیرم به من میگه که کامپوننت users استیج شده

خب حالا مرحله بعد استیج توی git چی بود؟ push! حالا من میخوام پوش کنم به بیت اما تو بیت به اسم اکسپورت شناخته میشه

اما! قبل اکسپورت باید بدونیم که کجا میخوایم اکسپورتش کنیم؟ باید ی کالکشن بسازیم و بعد داخل کالکشن خاص بیایم اکسپورت کنیم! اگه وارد داشبورد بیت بشید داخل هدر ی گزینه نیو میبینید. داخل عکس زیر هم گذاشتم

بعد از کلیک روی نیو روی کالکشن کلیک کنید! حالا من به این شکل پر کردم

خب حالا وقتی بزنید روی create وارد ی صفحه به این شکل میشید

سمت راست نوشته export to this collection. این دستور رو کپی کنید و وارد کامند لاین پیست کنید!

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

bit export alizangiabadicode.test-for-virgool

این داره میگه اکسپورت کن به این یوزر نیم(alizangiabadicode) و به این کالکشن خاص(test-for-virgool).

خب حالا ی bit status بگیریم دیگه استیج نیست!

خب حالا اگه از سایت خود بیت وارد کالکشنی که ساختیم بشیم میتونم کامپوننتمو ببینم!

اگه وارد کامپوننت بشم قابلیت این رو داره که بصورت لایو به من نشونش بده! چرا؟ چون که تمام دیپندنسی هایی که که این کامپوننت داررو همراه خودش اورده!

خب تا الان ما اومدیم ی پروژه ساختیم و ی کامپوننتش رو داخل بیت اکسپورت کردیم! حالا وقتشه ببینیم چجوری میشه داخل ی پروژه دیگه استفادش کرد!

واسه ساختن ی پروژه دیگه با دستور

ی پروژه ناکست دیگه میسازم! حالا میخوام کامپوننت جدید رو ایمپورت کنم اما چجوری؟! اگه به سایت بیت بریم و به همون صفحه کالکشن برگردیم و وارد کامپوننت بشیم ی قسمتی رو میبینیم به اسم install user as a packge. به عکس پایین ی نگاه بندازید!

خب حالا دستوره چیه؟

npm i @bit/alizangiabadicode.test-for-virgool.users

خیلی سادست! ی پکیج npm رو دارم به package.json اضافه میکنم!

خب حالا بریم سراغ استفاده از کامپوننتمون! خب من میرم داخل پیج اصلی اپ ناکست و میام داخل index.vue این کامپوننت رو ایمپورت میکنم! و بعد ایمپورت میام به کامپوننتام اضافه میکنم! که توی عکس زیر نشون دادم

خب حالا اگه پروژرو ران کنم با npm run dev میبینم که کامپوننتم داره نشون داده میشه!

اما خب همیشه اینقدر ساده نیست! مثلا ممکنه من بخوام تو این پروژه تغییرات جزیی بدم! کامپوننت کجاست که بخوام تغییرش بدم؟! کامپوننت داخل نود ماژول های منه و من اگه بخوام باید برم اونجا تغییرش بدم. ولی این منطقی نیست! چرا؟ چون که با هر بار npm install تمام تغییرای من میپرن!!!

خب اینجا بیت واسه من ی پیشنهاد داره! میگه بیا اول من رو به پروژه اضافه کن یعنی دستور bit init‌

بعد میگه بیا خود کامپوننت رو ایمپورت کن! با دستور

bit import alizangiabadicode.test-for-virgool/users

خب این دستور از چه قسمتایی تشکیل شده؟ اول که گفتیم ایمپورت کن و بعد اومدیم یوزرنیم و بعدش کالکشن نیم و بعد اسلش ای دی کامپوننت رو نوشتیم!

خب حالا بعد اجرای دستور اگه وارد پوشه کامپوننت بشم میبینم users فولدر واسه من ساخته شده! خب حالا راحت میام تغییرمو میدم

خب حالا تغییرمو دادم اما میخوام این تغییرمو اکسپورت کنم تا بتونم تو پروژه های دیگه استفاده کنم!

خب اگه بیام ی bit status بگیم میگه که کامپوننت یوزر ی تغییری کرده! حالا تمام مراحل قبل رو میریم یعنی اول استیج با دستور

bit tag users 0.0.2

البته اینبار با ورژن ۰.۰.۲ !!

بعد هم اکسپورت با دستور

bit export alizangiabadicode.test-for-virgool

خب حالا تغییرات رو فرستادیم بالا بریم توی سایت بیت و ببینیم کامپوننت چه تغییری کرده!

جالبه ورژن تغییر کرده به 0.0.2 ! حالا من میتونم ورژن قبل رو هم ببینم! یعنی ورژن های مختلف رو دارم و میتونم بینشون جابه جا شم! اما قبل اینکه وارد این بحث بشم بیایم ببینیم که اصلا این تغییرات رو که اکسپورت کردیم چجوری داخل پروژه اول استفاده کنیم!

خب من وارد پروژه اول میشم و میام دستور

bit import

رو وارد میکنم خروجی که باید ببینید به این شکله!

داره میگه که این کامپوننت ی ورژن جدید واسش اومده! اما اصلا نگفت که ما الان داریم از ورژن جدید استفاده میکنیم! خب چجوری برم به ورژن جدید؟ با دستور

bit checkout 0.0.2 users

این دستور چیه؟ داره میگه برو به ورژن ۰.۰.۲ کامپوننت با ای دی users. حالا ورژن لوکال من داره از ورژن جدید استفاده میکنه!

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