یومَن (Yeoman) چیست و چطور به کدنویسی در react کمک میکند

یومَن چیست؟

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

جواب بلند: یومن یک ابزار (generator) در اختیار شما قرار میده که یک بار بشینید ساختار یک پروژه ( یا مثلا یک کامپوننت یا بخشی از پروژه ) رو کد نویسی کنید و از حالا به بعد هر وقت میخواید یک پروژه جدید بسازید کافیه که فقط دستوری که از قبل تعیین کردید رو صدا بزنید تا براتون کل کدها با همون ساختار فولدربندی هایی که کردید رو با پارامترهایی که تعریف کردید بسازه و شمارو از شَر کپی پِیست کردن خلاص میکنه.

مثال:

ریداکس: فرض کنید یه پروژه ری اکت ریداکسی دارید و هر بار که یک سرویس جدید میخواید ایجاد کنید باید فایل های action, service, reducer رو بسازید، توی این فایل ها کلی نامگذاری هست، کلی کد، کلی ساختاربندی هست و چیزای دیگه که با کپی پیست کردن و rename کردن تابع ها و فایل ها همیشه یه جایی از دستتون در میره و به خطا میخورید، این وسط ممکنه بخواید یه سری فایل های پروژه ارو هم به ازای هر بار ساختن یه اکشن جدید بازنویسی کنید. خب کار سخت و روو اعصابیه! حالا فرض کنید یه دستور داشته باشید مثل yo myapp redux که همه این کارهارو بکنه!

کامپوننت: فرض کنید میخواید یه کامپوننت جدید ری اکتی بسازید. با این ساختاری که میبینید. لازم هست که تمام این فایل ها ساخته بشه، نام گذاری بشه و کدهای داخلش هم ایجاد بشه. فرض کنید با دستور yo myapp component یه کامپوننت با نام CPAlert ساخته بشه و توی فولدر CP هم قرار بگیره.

پروژه: یا حتی ممکنه بخواید کل ساختار یه پروژه ارو با یک خط کد بسازید. دقیقا همون کاری که expressjs ازش استفاده کرده برای اینکه بتونید خیلی سریع یه پروژه بسازید.

نصب و راه اندازی یومَن

ابتدا ابزار یومن را به صورت گلوبال نصب کنید:

 npm install -g yo

سپس generator-generator را نصب کنید. این پروژه به ساخت سریع تر generator ها کمک میکند.

npm install -g generator-generator

ایجاد یک generator جدید:

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

دقت کنید نام پروژه شما به صورت پیشفرض با generator- شروع میشود، بنابراین مجددا از این نام در نامگذاری پروژه مولد خود استفاده نکنید.

yo generator

در فولدر پروژه فولدری با نام generators وجود دارد که درون آن فایل index.js قرار گرفته است که تمامی تنظیمات و تسک ها درون این فایل قرار دارد.

معرفی فایل index.js

از طریق یک کلاس جاوااسکریپت کلاس اصلی مولد را گسترش میدهیم:

سپس از طریق فانکشن prompting سوالاتی از کاربر پرسیده شده و پاسخ ها را برای استفاده بعدی در this.props ذخیره میکنیم.

سوالات میتوانند از نوع input, list, confirm , … باشند. یومن برای نمایش این سوالات از کتابخانه Inquirer.js استفاده کرده است. مطالعه بیشتر

در کنار فایل index.js یک فولدر با نام templates وجود دارد که شما میبایست تمام فایل هایی را که میخواهید بعد از اتمام سوالات در پروژه جدید ایجاد کنید درون آن قرار دهید.

فرض کنید میخواهیم بعد از اتمام سوالات یک فایل data.json به شکل زیر ایجاد کنیم.

بدین منظور یک فایل _data.json به شکل زیر ایجاد کنید: توجه کنید فایل های تمپلیت با آندرلاین شروع میشوند.

سپس در فایل index.js در فانکشن writing پاسخ ها را در فایل _data.json جایگذاری میکنیم و فایل جدیدی با نام data.json در مسیر دلخواه ذخیره میکنیم:

همانطور که مشاهده میکنید از طریق فانکشن copyTpl فایل تمپلیت ورودی و فایل و مسیر مقصد را مشخص میکنیم و به عنوان پارامتر سوم دیتای مورد نیاز را پاس میدهیم.

در صورتی که فقط نیاز دارید تا فایلی را بدون جایگذاری متغییر ها کپی کنید به جای دستور copyTpl از copy استفاده کنید و پارامتر سوم را نیز پاس ندهید.

The Run Loop

فانکشن های اصلی ای که شما میتوانید بر اساس مستندات یومن درون کلاس خود استفاده کنید به ترتیب زیر است:

initializing - Your initialization methods (checking current project state, getting configs, etc)

prompting - Where you prompt users for options (where you’d call this.prompt())

configuring - Saving configurations and configure the project (creating .editorconfig files and other metadata files)

default - If the method name doesn’t match a priority, it will be pushed to this group.

writing - Where you write the generator specific files (routes, controllers, etc)

conflicts - Where conflicts are handled (used internally)

install - Where installations are run (npm, bower)

end - Called last, cleanup, say good bye, etc

تعریف argument و option

شما میتوانید برای پروژه خود argument و option تعریف کنید. این مقادیر میبایست در constructor تعریف شوند و در نهایت به شکل زیر در دسترس قرار میگیرند:

yo webapp some-argument --coffee

برای دسترسی به مقدار آنها از this.options استفاده میکنیم.

اجرای مولد

برای دسترسی به مولد خود، نیازی نیست پروژه ای که ایجاد کرده اید را در npm منتشر کنید و سپس از آن استفاده کنید. صرفا کافیست در مسیر روت پروژه دستور زیر را اجرا کنید:

npm link

اجرای پروژه مولد

یک فولدر جدید ایجاد کنید و درون آن دستور yo name را اجرا کنید. به جای name نام پروژه مولد خود را قرار دهید.

نمونه کد کامل از فایل index.js

کلام آخر!

خیلی از ابزارهایی که الان داریم استفاده میکنیم برای اینه که ما پروداکتیو تر باشیم و خودمون رو درگیر زیرساخت یا دوباره کاری های پی در پی نکنیم و تا حد امکان DRY کد بزنیم. شاید در نگاه اول خیلی سخت و نامعقول باشه تایم گذاشتن برای استفاده از یومن، ولی ما الان یک تیم چهار نفره هستیم که هر روز داریم برای ساخت کامپوننت ها، رُوت ها، اکشن ها و غیره از یومن استفاده میکنیم و همگی راضی ان.