A Flow beállítása akkor, amikor már a helyén van Bábel

A Flow beállítása, amikor már a helyén van Bábel

A Flow egy statikus típusú ellenőrző a JavaScript számára. Termelékenyebbé teszi, ha visszajelzést ad a kódírás közben. A Flow valós idejű figyelmeztetéseket ad, amelyek felhívják a figyelmet, amikor hibázott. Ha többet szeretne megtudni, nézze meg a flowtype.org oldalt.

Ahelyett, hogy megpróbálná felépíteni saját, teljesen különálló ökoszisztémáját, a Flow bekapcsolódik a meglévő JavaScript ökoszisztémába. A Babel használata a kód összeállításához az egyik legegyszerűbb módszer a Flow integrálásához egy projektbe.

Két év kemény munka után a Babel nagyjából mindenhol dolgozik, csak nézze meg a beállítási oldalt, ahol minden egyes képalkotó eszköz integrációja megtalálható.

Ha még nincs beállítva a Bábel, használhatja ezt az útmutatót a beállításhoz. Érdemes megnézni a Bábelről szóló kézikönyvemet is.

A Flow beállítása a Bábel tetején

Miután beállította a Bábelt, könnyű elindulnia a Flow-val. Először két függőséget telepíthet:

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

A Babel plugin azért van, hogy eltávolítsa a Flow típusokat, hogy a program futhasson. A flow-bin a Flow parancssorból való használata.

Ezután adjuk hozzá a Babel beépülő modult a .babelrc fájlhoz (vagy bárhol, ahol a Babelt konfiguráljuk opciókkal):

{ presets: [...], plugins: [..., "transform-flow-strip-types"]}
Megjegyzés: Feltételezem, hogy a Bábel 6-ot használja ehhez az oktatóanyaghoz. Javasoljuk, hogy frissítsen, ha még nem tette meg.

Végül lefuttatjuk a flow folyamatot a könyvtárunkban, amely létrehoz egy .flowconfig fájlt , amelynek így kell kinéznie:

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

Fantasztikus! Most a Flow-t állítottuk be a projektjébe. Mit szólnál ahhoz, hogy elkezdjük futtatni néhány fájlt?

A Flow futása

A Flow-t úgy tervezték, hogy fokozatosan mutassa be az Ön repójának. Ez azt jelenti, hogy nem kell egyszerre hozzáadnia a teljes kódbázishoz. Ehelyett felveheti fájlról fájlra menet közben. Kezdjük valami egyszerűvel, hogy elindulhasson.

Először próbáljon meg olyan fájlt találni, amely nem sok összetettséggel vagy külső függőséggel rendelkezik. Valami, aminek csak néhány egyszerű funkciója van.

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

Annak érdekében, hogy a Flow futhasson ezen a fájlon, hozzá kell adnunk egy „flow pragma” megjegyzést a tetejére, így:

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

Ez a kis megjegyzés a fájl tetején azt mondja a Flow-nak: "Rendben, azt akarom, hogy írja be ezt a fájlt".

Most először kell futtatnunk a Flow-t. Ehhez vissza kell kapcsolnia a terminálra, és futtatnia kell a következő parancsot:

$ flow
Megjegyzés: Ez a parancs a folyamat állapotának álneve .

Ez a parancs az, hogy elindít egy Flow-kiszolgálót, és kéri tőle a repójának „állapotát”, amely valószínűleg visszaad néhány hibát.

Az új fájlban a leggyakoribb hibák a következők:

  • „Hiányzó kommentár”
  • „A szükséges modul nem található”

Ezek a hibák az importhoz és az exporthoz kapcsolódnak. A felmerülés oka a Flow működésének eredménye. A fájlok típusainak ellenőrzése érdekében a Flow közvetlenül az egyes fájlok importját és exportját vizsgálja.

„Hiányzó kommentár”

Ilyen hibát fog látni a Flow-tól, mert az valamilyen módon a fájl exportálásához kapcsolódik. Ezen kívül a Flow nem fog panaszkodni a hiányzó típusú kommentárok miatt.

Tehát annak kijavítása érdekében elkezdhetünk hozzáadni néhány fájlt. Ennek részletes leírását a felhasználói kézikönyv tartalmazza. Végül az ilyen típusú típusok:

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

Folyamatosan folyjon, miközben hozzáadja a típusokat, hogy lássa, mit csinál. Végül képesnek kell lennie az összes „Hiányzó kommentár” hiba törlésére.

„A szükséges modul nem található”

Ezeket a hibákat akkor kapja meg, amikor olyan importálást / követelést igényel, amelyet nem lehet a Node normál modulalgoritmusával megoldani, vagy ha figyelmen kívül hagyta a .flowconfig fájlban .

Ezt sok minden okozhatja, lehet, hogy speciális webpack megoldót használ, esetleg elfelejtett valamit telepíteni. Bármi legyen is az oka, a Flow-nak képesnek kell lennie arra, hogy megtalálja az importált modult, hogy megfelelően végezhesse a munkáját. Van pár lehetősége ennek megoldására:

  1. module.name_mapper - adjon meg egy szabályos kifejezést, amely illeszkedik a modulok nevéhez, és egy helyettesítő mintát.
  2. Hozzon létre egy könyvtár definíciót a hiányzó modulhoz

Arra fogunk összpontosítani, hogy létrehozzunk egy könyvtár definíciót a modulhoz, ha a module.name_mapper fájlt kell használni , akkor erről többet is megtudhat a dokumentációban.

Könyvtárdefiníció létrehozása

A könyvtárdefiníciók használata hasznos, ha típusokat ad a telepített csomagoknak, amelyeknek nincsenek típusai. Állítsunk egyet az előző példában szereplő string-math-lib könyvtárunkhoz.

Először hozzon létre egy folyamat jellegű könyvtárat a gyökérkönyvtárban (abba a könyvtárba, ahová a .flowconfig fájlt tette ).

Más könyvtárneveket is használhat a .flowconfig [lib] szakaszában . A flow-typed használata azonban már a dobozból kifolyólag működik.

Most létrehozunk egy flow-type / string-math-lib.js fájlt a „libdef” megtartására, és így kezdhetjük:

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

Ezután csak meg kell írnunk definíciókat az adott modul exportjára.

declare module "string-math-lib" { declare function getNumberFromString(str: string): number}
Megjegyzés: Ha dokumentálnia kell az „alapértelmezett” vagy az elsődleges exportálást, akkor ezt a deklarálhatja a module.exports: vagy az export alapértelmezettként deklarálhatja.

Sokkal több a könyvtár definíciója, ezért olvassa el a dokumentációt, és olvassa el ezt a blogbejegyzést arról, hogyan lehet magas színvonalú libdefeket létrehozni.

A libdef telepítése a flow-type-ból

Mivel a libdefs sok időt igénybe vehet, fenntartjuk a kiváló minőségű libdef-ek hivatalos tárházát mindenféle, flow-típusúnak nevezett csomaghoz.

A folyamat-tipizálás megkezdéséhez telepítse a parancssori felületet (CLI) globálisan:

$ npm install --global flow-typed

Most a flow-type / definitions / npm fájlban kereshethogy lássa, van-e már létező libdef egy csomaghoz, amelyet használni szeretne, ha van, akkor így telepítheti:

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

Ez azt írja a flow tipusnak, hogy a chalk csomagot az 1.0.0 verzióra kívánja telepíteni, amikor a 0.30 folyamatot futtatja .

A folyamat-típusú CLI még mindig béta állapotú, és rengeteg fejlesztést terveznek rá, ezért számítson rá, hogy ez a közeljövőben sokat javul.

Feltétlenül járuljon hozzá a flow típusú libdefekhez. Közösségi erőfeszítés, és minél több ember járul hozzá, annál jobb lesz.

Egyéb hibák, amelyekbe belefuthat:

Remélhetőleg szinte mindenről beszámoltunk, amibe belefuthat, miközben belekezd a Flow-ba. Előfordulhat azonban néhány ilyen hiba is:

  • A csomópont_modulok csomagja hibákat jelent
  • A node_modules olvasása nagyon sok időt vesz igénybe
  • A node_modules belül hibásan formált JSON hibákat okoz

Az ilyen típusú hibáknak nagyon sok oka van, amelyekre nem térek ki ebben a bejegyzésben (az egyes hibák részletes dokumentációján dolgozom). Egyelőre annak érdekében, hogy mozogjon, egyszerűen [figyelmen kívül hagyhatja] azokat a fájlokat, amelyek ezeket a hibákat okozzák.

Ez azt jelenti, hogy a fájlok elérési útjait hozzáadja az .flowconfig [ignore] szakaszához, így:

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

Általában vannak ennél jobb lehetőségek, de ez jó helyet biztosít a kezdéshez.

Néhány példa a node_modules hibák jobb kezelésére: lásd ezt a Stack Overflow választ az fbjs-ről.

Pro tipp: Ellenőrizze, hogy mennyire van fedve

Ha valaha is kíváncsi arra, hogy a Flow mennyire képes lefedni egy fájlt, a következő paranccsal megtekintheti a lefedettségi jelentést:

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

További források és támogatás

Sok olyan cikk van, amelyről ez a cikk nem foglalkozott. Tehát itt talál néhány linket az erőforrásokhoz, amelyek segíthetnek.

  • Flow weboldal
  • Próbálja ki a Flow Online szolgáltatást
  • Flow GitHub
  • Verem túlcsordulás #flowtyped

A Flow csapata elkötelezett amellett, hogy mindenki kiváló tapasztalattal rendelkezzen a Flow használatával. Ha ez valaha sem igaz, szívesen hallanánk tőled, hogyan lehetne javítani.

Kövesse James Kyle-t a twitteren. Kövesse Flow-t a twitteren is.