یومَن (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از طریق یک کلاس جاوااسکریپت کلاس اصلی مولد را گسترش میدهیم: https://gist.github.com/alieslamifard/7adf57e49097ab08ba1caca90982f5fa سپس از طریق فانکشن prompting سوالاتی از کاربر پرسیده شده و پاسخ ها را برای استفاده بعدی در this.props ذخیره میکنیم. https://gist.github.com/alieslamifard/fa62769518b251a7ce3ead670a6a4ccc سوالات میتوانند از نوع input, list, confirm , … باشند. یومن برای نمایش این سوالات از کتابخانه Inquirer.js استفاده کرده است. مطالعه بیشتردر کنار فایل index.js یک فولدر با نام templates وجود دارد که شما میبایست تمام فایل هایی را که میخواهید بعد از اتمام سوالات در پروژه جدید ایجاد کنید درون آن قرار دهید.فرض کنید میخواهیم بعد از اتمام سوالات یک فایل data.json به شکل زیر ایجاد کنیم. https://gist.github.com/alieslamifard/08ce918db81d6fbd44a57e43b69c42be بدین منظور یک فایل _data.json به شکل زیر ایجاد کنید: توجه کنید فایل های تمپلیت با آندرلاین شروع میشوند. https://gist.github.com/alieslamifard/a33dbae4291835e2d231fe4b9e8eceae سپس در فایل index.js در فانکشن writing پاسخ ها را در فایل _data.json جایگذاری میکنیم و فایل جدیدی با نام data.json در مسیر دلخواه ذخیره میکنیم: https://gist.github.com/alieslamifard/77b9986ebc86edabc10aca56c847ffaf همانطور که مشاهده میکنید از طریق فانکشن 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 https://gist.github.com/alieslamifard/13239c046e799eeff510ab096b8ef046 برای دسترسی به مقدار آنها از this.options استفاده میکنیم.اجرای مولدبرای دسترسی به مولد خود، نیازی نیست پروژه ای که ایجاد کرده اید را در npm منتشر کنید و سپس از آن استفاده کنید. صرفا کافیست در مسیر روت پروژه دستور زیر را اجرا کنید:npm linkاجرای پروژه مولدیک فولدر جدید ایجاد کنید و درون آن دستور yo name را اجرا کنید. به جای name نام پروژه مولد خود را قرار دهید.نمونه کد کامل از فایل index.js https://gist.github.com/alieslamifard/603cb5258e6a3c40b70f69dba07246a4 کلام آخر!خیلی از ابزارهایی که الان داریم استفاده میکنیم برای اینه که ما پروداکتیو تر باشیم و خودمون رو درگیر زیرساخت یا دوباره کاری های پی در پی نکنیم و تا حد امکان DRY کد بزنیم. شاید در نگاه اول خیلی سخت و نامعقول باشه تایم گذاشتن برای استفاده از یومن، ولی ما الان یک تیم چهار نفره هستیم که هر روز داریم برای ساخت کامپوننت ها، رُوت ها، اکشن ها و غیره از یومن استفاده میکنیم و همگی راضی ان.