การตั้งค่า Flow เมื่อคุณมี Babel อยู่แล้ว

การตั้งค่า Flow เมื่อคุณมี Babel อยู่แล้ว

Flow เป็นตัวตรวจสอบประเภทคงที่สำหรับ JavaScript ทำให้คุณมีประสิทธิผลมากขึ้นโดยการให้ข้อเสนอแนะในขณะที่คุณเขียนโค้ด Flow ให้คำเตือนแบบเรียลไทม์ซึ่งชี้ให้เห็นเมื่อคุณทำผิดพลาด หากคุณต้องการทราบข้อมูลเพิ่มเติมโปรดดูที่ flowtype.org

แทนที่จะพยายามสร้างระบบนิเวศที่แยกจากกันโดยสิ้นเชิง Flow จะเชื่อมโยงเข้ากับระบบนิเวศ JavaScript ที่มีอยู่ การใช้ Babel เพื่อรวบรวมโค้ดของคุณเป็นวิธีที่ง่ายที่สุดวิธีหนึ่งในการรวม Flow เข้ากับโปรเจ็กต์

หลังจากทำงานหนักมาสองปี Babel ก็ทำงานได้ทุกที่เพียงแค่ดูที่หน้าการตั้งค่าที่มีการผสานรวมสำหรับเครื่องมือสร้างทุกอย่างที่คุณจินตนาการได้

หากคุณยังไม่ได้ตั้งค่า Babel คุณสามารถใช้คำแนะนำนั้นเพื่อตั้งค่าได้ คุณอาจต้องการชำระเงินในหนังสือคู่มือ Babel

การตั้งค่า Flow ที่ด้านบนของ 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

Flow ออกแบบมาเพื่อแนะนำให้รู้จักกับ repo ของคุณทีละน้อย นั่นหมายความว่าคุณไม่จำเป็นต้องเพิ่มลงในโค้ดเบสทั้งหมดพร้อมกัน แต่คุณสามารถเพิ่มทีละไฟล์ได้ทันที เริ่มจากสิ่งง่ายๆเพื่อให้คุณก้าวต่อไป

ขั้นแรกพยายามค้นหาไฟล์ที่ไม่มีความซับซ้อนหรือการอ้างอิงภายนอกมากนัก มีบางอย่างที่มีฟังก์ชันธรรมดาเพียงไม่กี่อย่างในการเริ่มต้นใช้งาน

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 และถามถึง“ สถานะ” ของ repo ของคุณซึ่งมักจะส่งคืนข้อผิดพลาดบางอย่างเพื่อให้คุณแก้ไข

ข้อผิดพลาดที่พบบ่อยที่สุดที่คุณจะพบในไฟล์ใหม่ ได้แก่ :

  • “ ไม่มีคำอธิบายประกอบ”
  • “ ไม่พบโมดูลที่จำเป็น”

ข้อผิดพลาดเหล่านี้เกี่ยวข้องกับการนำเข้าและการส่งออก สาเหตุที่เกิดขึ้นเป็นผลมาจากวิธีการทำงานของ 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ของคุณ

อาจเกิดจากหลายสิ่งหลายอย่างบางทีคุณอาจใช้ตัวแก้ไข webpack แบบพิเศษบางทีคุณอาจลืมติดตั้งบางอย่าง ไม่ว่าจะด้วยเหตุผลใด 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 คุณภาพสูง

การติดตั้ง libdef จาก flow-typed

เนื่องจาก libdefs อาจใช้เวลามากเราจึงมีที่เก็บอย่างเป็นทางการของ libdef คุณภาพสูงสำหรับแพ็คเกจทุกประเภทที่เรียกว่า flow-typed

ในการเริ่มต้นด้วยการพิมพ์โฟลว์ให้ติดตั้งอินเตอร์เฟสบรรทัดคำสั่ง (CLI) ทั่วโลก:

$ npm install --global flow-typed

ตอนนี้คุณสามารถดูภายในflow-typed / definitions / npmเพื่อดูว่ามี libdef สำหรับแพ็คเกจที่คุณต้องการใช้หรือไม่หากมีคุณสามารถติดตั้งได้ดังนี้:

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

นี้จะบอกไหลพิมพ์ที่คุณต้องการติดตั้งชอล์กแพคเกจที่1.0.0รุ่นเมื่อคุณกำลังทำงานไหล0.30

ไหลพิมพ์ CLI ยังอยู่ในเบต้าและมีเป็นจำนวนมากของการปรับปรุงการวางแผนสำหรับมันดังนั้นคาดว่านี้ในการปรับปรุงมากในอนาคตอันใกล้

อย่าลืมมีส่วนร่วมใน libdefs ประเภทโฟลว์ เป็นความพยายามของชุมชนและยิ่งผู้คนมีส่วนร่วมมากเท่าไหร่ก็ยิ่งดี

ข้อผิดพลาดอื่น ๆ ที่คุณอาจพบ:

หวังว่าเราจะครอบคลุมทุกอย่างที่คุณจะพบในขณะเริ่มต้นใช้งาน Flow อย่างไรก็ตามคุณอาจพบข้อผิดพลาดบางอย่างเช่นนี้:

  • แพ็กเกจภายในnode_modulesกำลังรายงานข้อผิดพลาด
  • การอ่านnode_modulesใช้เวลานานมาก
  • JSON ที่ผิดรูปแบบภายในnode_modulesทำให้เกิดข้อผิดพลาด

มีสาเหตุหลายประการสำหรับข้อผิดพลาดประเภทนี้ที่ฉันจะไม่ได้รับในโพสต์นี้ (ฉันกำลังดำเนินการเกี่ยวกับเอกสารโดยละเอียดสำหรับข้อผิดพลาดแต่ละข้อ) ในตอนนี้คุณสามารถ[ละเว้น]ไฟล์ที่ทำให้เกิดข้อผิดพลาดเหล่านี้ได้

ซึ่งหมายถึงการเพิ่มเส้นทางไฟล์ไปยังส่วน[ละเว้น]ใน . 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
  • ลองใช้ Flow Online
  • Flow GitHub
  • Stack Overflow #flowtyped

ทีม Flow มุ่งมั่นที่จะตรวจสอบให้แน่ใจว่าทุกคนมีประสบการณ์ที่ยอดเยี่ยมในการใช้ Flow หากสิ่งนั้นไม่เป็นความจริงเรายินดีที่จะรับฟังความคิดเห็นจากคุณเกี่ยวกับวิธีการปรับปรุง

ติดตาม James Kyle บนทวิตเตอร์ ติดตามกระแสบนทวิตเตอร์ด้วย