إعداد Flow عندما يكون لديك Babel بالفعل في مكانه

إعداد Flow عندما يكون لديك Babel بالفعل في مكانه

التدفق هو مدقق نوع ثابت لجافا سكريبت. يجعلك أكثر إنتاجية من خلال تقديم الملاحظات أثناء كتابة التعليمات البرمجية. يمنحك Flow تحذيرات في الوقت الفعلي تشير إلى أنك ارتكبت خطأ. إذا كنت ترغب في معرفة المزيد ، تحقق من flowtype.org.

بدلاً من محاولة بناء نظام بيئي منفصل تمامًا ، يتم ربط Flow hooks بنظام JavaScript البيئي الحالي. يعد استخدام Babel لتجميع التعليمات البرمجية أحد أسهل الطرق لدمج Flow في مشروع.

بعد عامين من العمل الشاق ، تعمل Babel إلى حد كبير في كل مكان ، ما عليك سوى إلقاء نظرة على صفحة الإعداد مع عمليات تكامل لكل أداة بناء يمكنك تخيلها.

إذا لم يكن لديك برنامج Babel تم إعداده بعد ، فيمكنك استخدام هذا الدليل للإعداد. قد ترغب أيضًا في مراجعة كتيبي على Babel.

إعداد التدفق فوق بابل

بمجرد إعداد Babel ، يصبح من السهل البدء باستخدام Flow. أولاً ، دعنا نثبت تبعيتين:

$ npm install --save-dev babel-plugin-transform-flow-strip-types$ npm install --global flow-bin

يوجد ملحق Babel من أجل تجريد أنواع Flow بعيدًا حتى يتم تشغيل برنامجك. flow-bin هو كيفية استخدام Flow من سطر الأوامر.

بعد ذلك ، دعنا نضيف المكون الإضافي Babel إلى .babelrc الخاص بك (أو في أي مكان تقوم فيه بتكوين Babel بالخيارات):

{ presets: [...], plugins: [..., "transform-flow-strip-types"]}
ملاحظة: أفترض أنك تستخدم Babel 6 لهذا البرنامج التعليمي. من المستحسن أن تقوم بالترقية إذا لم تكن قد قمت بذلك بالفعل.

أخيرًا سنقوم بتشغيل flow init في الدليل الخاص بنا ، والذي سينشئ ملف flowconfig والذي يجب أن يبدو كالتالي:

[ignore]
[include]
[libs]
[options]

رائع! الآن لدينا Flow تم إعداده بالكامل في مشروعك. ماذا لو بدأنا تشغيله على بعض الملفات؟

تشغيل التدفق

تم تصميم Flow ليتم تقديمه إلى الريبو الخاص بك بشكل تدريجي. هذا يعني أنك لست مضطرًا لإضافته إلى قاعدة التعليمات البرمجية بالكامل مرة واحدة. بدلاً من ذلك ، يمكنك إضافته ملفًا بملف أثناء التنقل. لنبدأ بشيء بسيط لنساعدك على المضي قدمًا.

أولاً ، حاول العثور على ملف ليس به الكثير من التعقيد أو التبعيات الخارجية. شيء يحتوي على عدد قليل من الوظائف البسيطة لتبدأ به.

import {getNumberFromString} from "string-math-lib";
export function multiplyStrings(a, b) { return getNumberFromString(a) * getNumberFromString(b);}

من أجل تشغيل Flow على هذا الملف ، نحتاج إلى إضافة تعليق "flow pragma" في الأعلى مثل هذا:

// @flow
import {getNumberFromString} from "string-math-lib";
export function multiplyStrings(a, b) { return getNumberFromString(a) * getNumberFromString(b);}

هذا التعليق الصغير في أعلى الملف يخبر Flow "حسنًا ، أريدك أن تتحقق من هذا الملف".

الآن نحن بحاجة إلى تشغيل Flow بالفعل لأول مرة. للقيام بذلك ، ستحتاج إلى الرجوع إلى الجهاز الطرفي وتشغيل الأمر التالي:

$ flow
ملاحظة: هذا الأمر هو اسم مستعار لحالة التدفق .

ما يفعله هذا الأمر هو بدء تشغيل خادم Flow ويطلب منه "حالة" الريبو الخاص بك ، والذي سيعيد على الأرجح بعض الأخطاء لإصلاحها.

الأخطاء الأكثر شيوعًا التي ستراها في ملف جديد هي:

  • "التعليق التوضيحي مفقود"
  • "الوحدة المطلوبة غير موجودة"

ترتبط هذه الأخطاء بالواردات والصادرات. سبب ظهورهم هو نتيجة لكيفية عمل Flow. للتحقق من الأنواع عبر الملفات ، يبحث Flow مباشرة في عمليات الاستيراد والتصدير لكل ملف.

"التعليق التوضيحي مفقود"

سترى خطأ مثل هذا من Flow لأنه يتعلق بطريقة ما بتصدير ملفك. بخلاف ذلك ، لن يشتكي Flow من فقدان التعليقات التوضيحية من النوع.

لإصلاح ذلك ، يمكننا البدء في إضافة بعض الأنواع إلى ملفك. للحصول على دليل مفصل حول كيفية القيام بذلك ، راجع دليل المستخدم. ما يجب أن ينتهي بك الأمر هو بعض الأنواع مثل هذا:

import {getNumberFromString} from "string-math-lib";
export function multiplyStrings(a: string, b: string): number { return getNumberFromString(a) * getNumberFromString(b);}

استمر في التدفق أثناء إضافة الأنواع الخاصة بك لمعرفة تأثيرات ما تفعله. في النهاية يجب أن تكون قادرًا على مسح جميع أخطاء "التعليقات التوضيحية المفقودة".

"الوحدة المطلوبة غير موجودة"

ستحصل على هذه الأخطاء كلما طلبت استيرادًا / طلبًا لا يمكن حله باستخدام خوارزمية الوحدة النمطية العادية لـ Node أو إذا تجاهلت ذلك باستخدام flowconfig .

يمكن أن يحدث هذا بسبب الكثير من الأشياء ، ربما كنت تستخدم محلل حزمة ويب خاصًا ، وربما نسيت تثبيت شيء ما. مهما كان السبب ، يجب أن يكون Flow قادرًا على العثور على الوحدة التي تقوم باستيرادها للقيام بعملها بشكل صحيح. لديك خياران حول كيفية حل هذا:

  1. module.name_mapper - حدد تعبيرًا عاديًا لمطابقته مع أسماء الوحدات النمطية ونمط الاستبدال.
  2. قم بإنشاء تعريف مكتبة للوحدة المفقودة

سنركز على إنشاء تعريف مكتبة للوحدة ، إذا كنت بحاجة إلى استخدام module.name_mapper ، يمكنك رؤية المزيد حول هذا الموضوع في الوثائق.

إنشاء تعريف مكتبة

يعد وجود تعريفات مكتبة مفيدًا لإعطاء أنواع للحزم التي قمت بتثبيتها والتي لا تحتوي على أنواع. لنقم بإعداد واحدة لمكتبة string-math-lib من المثال السابق.

قم أولاً بإنشاء دليل مكتوب بالتدفق في الدليل الجذر الخاص بك (الدليل الذي وضعت فيه .flowconfig الخاص بك ).

يمكنك استخدام أسماء دليل أخرى باستخدام قسم [lib] من flowconfig . ومع ذلك ، فإن استخدام الكتابة الانسيابية سيعمل خارج الصندوق.

سنقوم الآن بإنشاء ملف flow-typed / string-math-lib.js للاحتفاظ بـ "libdef" وبدء تشغيله على النحو التالي:

declare module "string-math-lib" { // ...}

بعد ذلك ، نحتاج فقط إلى كتابة تعريفات لتصدير تلك الوحدة.

declare module "string-math-lib" { declare function getNumberFromString(str: string): number}
ملاحظة: إذا كنت بحاجة إلى توثيق التصدير "الافتراضي" أو الأساسي ، يمكنك القيام بذلك من خلال التصريح عن module.exports: أو إعلان التصدير الافتراضي

هناك الكثير من تعريفات المكتبة ، لذا يجب عليك قراءة الوثائق وقراءة منشور المدونة هذا حول كيفية إنشاء ملفات تعريفية عالية الجودة.

تثبيت libdef من التدفق المكتوب

نظرًا لأن libdefs يمكن أن تستهلك الكثير من الوقت ، فإننا نحتفظ بمستودع رسمي من libdefs عالية الجودة لجميع أنواع الحزم التي تسمى بالتدفق.

لبدء الكتابة الانسيابية ، ثبّت واجهة سطر الأوامر (CLI) بشكل عام:

$ npm install --global flow-typed

الآن يمكنك البحث داخل / تعريفات / npm المكتوبة بالتدفقلمعرفة ما إذا كان هناك libdef موجود لحزمة تريد استخدامها ، إذا كان هناك يمكنك تثبيته مثل هذا:

$ flow-typed install [email protected] --flowVersion 0.30

يخبر هذا بكتابة التدفق أنك تريد تثبيت حزمة الطباشير في الإصدار 1.0.0 عند تشغيل Flow 0.30 .

و كتبته تدفق CLI لا يزال في مرحلة تجريبية، وهناك الكثير من التحسينات المخطط لها، لذلك نتوقع هذا لتحسين الكثير في المستقبل القريب.

تأكد من المساهمة مرة أخرى في libdefs المكتوبة بالتدفق. إنه جهد مجتمعي ، وكلما زاد عدد الأشخاص الذين يساهمون ، كان ذلك أفضل.

أخطاء أخرى قد تواجهها:

نأمل أن نكون قد غطينا كل شيء تقريبًا ستواجهه أثناء بدء استخدام Flow. ومع ذلك ، قد تواجه أيضًا بعض الأخطاء مثل هذا:

  • الحزمة الموجودة داخل node_modules تقوم بالإبلاغ عن الأخطاء
  • تستغرق قراءة node_modules وقتًا طويلاً حقًا
  • يتسبب JSON المشوه داخل node_modules في حدوث أخطاء

هناك عدد قليل من الأسباب لهذه الأنواع من الأخطاء التي لن أتعرض لها في هذا المنشور (أنا أعمل على وثائق مفصلة لكل خطأ فردي). في الوقت الحالي ، من أجل الاستمرار في التحرك ، يمكنك فقط [تجاهل] الملفات التي تسبب هذه الأخطاء.

هذا يعني إضافة مسارات الملفات إلى قسم [ignore] في flowconfig الخاص بك مثل هذا:

[ignore]./node_modules/package-name/*./node_modules/other-package/tests/*.json
[include]
[libs]
[options]

هناك خيارات أفضل بشكل عام من هذا ، ولكن هذا من شأنه أن يمنحك مكانًا جيدًا للبدء.

للحصول على بعض الأمثلة حول كيفية التعامل مع الأخطاء بشكل أفضل داخل node_modules ، راجع إجابة Stack Overflow حول fbjs.

نصيحة للمحترفين: تحقق لمعرفة مدى تغطيتك جيدًا

إذا كنت تتساءل يومًا عن مدى جودة تغطية ملف بواسطة Flow ، فيمكنك استخدام الأمر التالي لمشاهدة تقرير التغطية:

$ flow coverage path/to/file.js --color

موارد إضافية ودعم

هناك الكثير لم يتم تغطيته بواسطة هذا المقال. لذا إليك بعض الروابط إلى الموارد التي يمكن أن تساعدك.

  • موقع التدفق
  • جرب Flow Online
  • تدفق جيثب
  • Stack Overflow #flowtyped

يلتزم فريق Flow بالتأكد من تمتع كل شخص بتجربة ممتازة في استخدام Flow. إذا كان هذا غير صحيح على الإطلاق ، فنحن نحب أن نسمع منك عن كيفية التحسين.

تابع جيمس كايل على تويتر. تابع Flow على تويتر أيضًا.