نصب و راه اندازی flow

تو مقاله قبلی کتابخونه قدرتمند فیسبوک به اسم flow رو معرفی کردم و در مورد مزایای استفاده ازش نوشتم. تو این قسمت در مورد نصب و راه اندازی فلو روی پروژه صحبت میکنم و در آخر یک مثال ساده از پیاده سازی فلو رو بررسی میکنیم.برای خوندن مقاله معرفی فلو: https://virgool.io/@novonimo/معرفی-flow-برای-جاواسکرپیت-ogssae9iaif4 تو قسمت های بعدی با مثال های پیشرفته تر یک پروژه کامل رو پیاده سازی میکنیم.فلونصب فلو در صورتی که از npm استفاده میکنید: npm install flow-bin --save--devو در صورتی که از yarn استفاده میکنید:yarn add flow-bin --devدقت کنید که ابزار فلو مربوط به حالت توسعه است پس در قسمت dev نصب میشه. اسکریپت اجرا فلوبعد از اینکه پکیج های لازم رو نصب کردیم نوبت به اضافه کردن دستور اجرای فلو به پروژه است. برای اینکار کافیه که توی فایل package.json و در قسمت script ، عبارت زیر رو اضافه کنیم:{ "scripts": { "flow": "flow", // بقیه دستور های } } حالا همه چی آماده است.نکته مهم:‌ اگر برای ساختن اپلیکیشن خودتون از دستور create-react-app استفاده کنید نیازی به ادامه این مراحل نیست و در غیر این صورت باید تغییر کوچیکی به فایل babalerc بدید:{ "presets": ["flow"] }درصورتی که در قسمت preset مقادیر دیگه ای مثل next و react و ... وجود داره کافیه که عبارت flow رو هم به این لیست اضافه کنید .اجرای فلوخوب کار نصب فلو تموم شد و نوبت به اجرای دستورات فلو است. قبل از اجرای فلو باید فایل کانفیگ اونو بسازیم، برای این کار هم از دستور زیر استفاده میکنیم:yarn flow init بعد از اجرای این دستور یک فایل flowconfig در روت پروژه ساخته میشه.همه چیز آماده است که فلو رو اجرا کنیم:yarn flowو چون هیچ کدوم از کدهای برنامه ما فلو ندارن قاعدتا مشکلی پیش نمیاد:yarn run v0.15.1 $ flow No errors! ✨ Done in 0.17s.فلو مثل یک واچر عمل میکنه و وقتی که اجراش میکنید به صورت یک پروسس روی سیستم شما فعال میشه تا بتونه موقع کد زدن همه موارد رو چک کنه. برای اینکه جلو پروسس فلو رو بگیرید از دستور زیر استفاده کنید:yarn flow stopاولین پیاده سازی فلو در پروژهخوب بعد از نصب و راه اندازی فلو ، نوبت به استفاده فلو در کدهامون هست. زمانی که دستور اجرای فلو رو میزنید، همه فایل های js پروژه خونده میشن. اگر اولین خط کدی فایلی شامل:// @flowو یا /* @flow */برای اینکه خیلی ساده بتونیم عملکرد فلو رو ببینیم یک فایل جاواسکریپتی میسازیم و با یک مثال ساده فلو رو پیاده سازی میکنیم. اسم این فایل رو من foo.js گذاشتم و توش یک تابع foo رو تعریف میکنم:تابع ساده فواین تابع ساده ای که نوشتم یک آرگومان در ورودی داره و مقدار x رو به عنوان پارامتر ورودی میگیره و در صورتی که این مقدار وجود داشته باشه اون رو برمیگردونه و درصورتی که مقدار x به عنوان پارامتر به تابع foo داده نشه ، یک رشته رو برمیگردونه. پس میشه نتیجه گرفت که مقدار ورودی x دلخواه هست.خوب اگه قرار باشه برای همچین تابعی یک استاتیک تایپ چکر فلو بنویسیم باید چه کارهایی رو انجام بدیم؟ خوب اولین قدم اضافه کردن فلو به بالاترین خط کد تابع هست و بعد از اون اضافه کردن تایپ به ورودی و خروجی تابع . پس بریم همین هارو به کدمون اضافه کنیم:تابع ساده فو + فلوخوب ما برای پارامتر x یک تایپ number قرار دادیم و علامت سوالی که پشتش قرار دادیم نشون از اختیاری بودنش داره. بعد از اون string که استفاده کردیم به معنی خروجی تابع فو هست.حالا توی ترمینال دستور زیر رو اجرا کنید:yarn flowو یا اگر با npm کار میکنید:npm run flowبعله درسته باید فلو یه خطایی رو برگردونه !foo.js 5: return x; ^ number. This type is incompatible with the expected return type of 3: function foo(x: ?number): string { ^^^^^^ stringولی چرا این خطا رو از فلو گرفتیم ؟‌چون این کدی که نوشتیم به همراه تایپ هایی که دادیم به مشکل میخوره .ما به فلو گفتیم که مقدار x دلخواه هست و میتونه نباشه ( این رو با گذاشتن علامت سوال قبل از تعریف نوع تایپش گفتیم )‌ پس اگر مقدار x رو به تابع foo ندیم در خروجی یک رشته داریم و به فلو هم گفته بودیم تایپ تابع foo ما برابر با string است . پس تا اینجا مشکلی نیست ! اما در ادامه اگه از پارامتر x استفاده شه ( و همونطور که براش مشخص کردیم این مقدار یک عدد است) پس در خروجی تابع ما هم یک عدد برمیگرده و این جاست که فلو واکنش نشون میده و به ما اعلام میکنه که این فایل مشکل داره و تابعی که تعریف کردیم در نهایت string برنمیگردونه و در شرایطی که x تعریف شده باشه مقدار number برمیگردونه.خوب این قسمت رو با معرفی مختصر فایل flowconfig تموم میکنم.این فایل شامل بخش های مختلفی است که با اسم های معینی از سایر قسمت ها جدا شدند. همه تنظیمات فلو پروژه تو این فایل قرار میگیره. فایل flowconfig به شکل زیر است:[ignore][include][libs][lints][options][strict]این فایل شامل قسمت ignore برای قرار دادن پوشه ها و فایل هایی که نمیخواهیم فلو اونهارو برای پیدا کردن فایل های پیاده سازی شده با فلو چک کنه استفاده میشه.قسمت include هم برعکس ignore عمل میکنه و هر چی اینجا قرار بدیم رو چک میکنه!سایر قسمت ها هم به همراه تنظیماتش زمانی که لازم شد توضیح میدم ( تو آموزش های بعدی ).برای اینکه سرعت اجرای دستور flow بیشتر باشه بهتره که دایرکتوری های زیر رو به قسمت ایگنور اضافه کنیم:[ignore] .*/build/.* .*/node_modules/.* [include] [libs] [lints] [options] [strict] قسمت های بعدی بعد از انتشار در این قسمت قرار میگرند. قراره که یک پروژه کامل رو باهاش پیاده سازی کنیم و همه قسمت های فلو رو بررسی کنیم. پس آموزش های بعدی رو از دست ندید. مقاله های بعد از انتشار در این قسمت قرار میگیرند.سایر مقاله های من در ویرگول: https://virgool.io/@novonimo/مکمل-قردتمند-گیت-git-flow-ufhgxx6j6ah3 https://virgool.io/@novonimo/نظرسنجی-stackoverflow-2019-قسمت-۱-lxaujty1ftol https://virgool.io/iran-react-community/پیش-نیازهای-آموزش-ری-اکت-yxmprt2im5ek https://virgool.io/iran-react-community/آموزش-مبتدی-react-native-همراه-با-مثال-از-صفر-تا-۱%DB%B0%DB%B0-قسمت-اول-cyqz5skqhuxv Contact With me:https://t.me/nimamohamadianhttps://www.facebook.com/nimamohamadian89https://twitter.com/Nima_Mohamadianhttps://www.linkedin.com/in/nima-mohamadian-57ba63123