تو مقاله قبلی کتابخونه قدرتمند فیسبوک به اسم flow رو معرفی کردم و در مورد مزایای استفاده ازش نوشتم. تو این قسمت در مورد نصب و راه اندازی فلو روی پروژه صحبت میکنم و در آخر یک مثال ساده از پیاده سازی فلو رو بررسی میکنیم.
برای خوندن مقاله معرفی فلو:
تو قسمت های بعدی با مثال های پیشرفته تر یک پروژه کامل رو پیاده سازی میکنیم.
در صورتی که از 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]
قسمت های بعدی بعد از انتشار در این قسمت قرار میگرند.
قراره که یک پروژه کامل رو باهاش پیاده سازی کنیم و همه قسمت های فلو رو بررسی کنیم. پس آموزش های بعدی رو از دست ندید.
مقاله های بعد از انتشار در این قسمت قرار میگیرند.
سایر مقاله های من در ویرگول:
Contact With me:
https://t.me/nimamohamadian
https://www.facebook.com/nimamohamadian89
https://twitter.com/Nima_Mohamadian
https://www.linkedin.com/in/nima-mohamadian-57ba63123
