„Flow“ nustatymas, kai jau turite „Babel“

„Flow“ nustatymas, kai jau turite „Babel“

„Flow“ yra „JavaScript“ statinio tipo tikrintuvas. Tai padaro jus produktyvesnius teikiant atsiliepimus rašant kodą. „Flow“ suteikia jums realiuoju laiku pateiktus įspėjimus, kurie nurodo, kai padarėte klaidą. Jei norite sužinoti daugiau, apsilankykite flowtype.org.

Užuot bandęs sukurti savo atskirą ekosistemą, „Flow“ užsikabina į esamą „JavaScript“ ekosistemą. „Babel“ naudojimas kodui sudaryti yra vienas iš paprasčiausių būdų integruoti „Flow“ į projektą.

Po dvejų metų sunkaus darbo „Babel“ dirba beveik visur, tiesiog pažvelkite į sąrankos puslapį su kiekvieno sukurto įrankio, kurį galite įsivaizduoti, integracijomis.

Jei dar nenustatėte „Babel“ sąrankos, galite pasinaudoti tuo vadovu. Taip pat galbūt norėsite sužinoti mano Babelio vadovą.

„Flow“ nustatymas ant Babelio viršaus

Kai sukursite „Babel“, galėsite lengvai naudotis „Flow“. Pirmiausia leidžia įdiegti dvi priklausomybes:

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

„Babel“ papildinys yra skirtas pašalinti „Flow“ tipus, kad jūsų programa būtų paleista. „flow-bin“ yra tai, kaip naudojate srautą iš komandinės eilutės.

Tada pridėkime „ Babel“ papildinį prie .babelrc (arba bet kada, kai konfigūruojate „Babel“ su parinktimis):

{ presets: [...], plugins: [..., "transform-flow-strip-types"]}
Pastaba: manau, kad šioje pamokoje naudojate „Babel 6“. Rekomenduojama atnaujinti, jei to dar nepadarėte.

Galiausiai vykdysime „ flow init “ savo kataloge, kuris sukurs .flowconfig failą, kuris turėtų atrodyti taip:

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

Nuostabu! Dabar jūsų projekte „Flow all“ yra nustatyta. Kaip apie tai, kad pradėtume jį paleisti kai kuriuose failuose?

Srautas veikia

„Flow“ yra skirtas palaipsniui pristatyti jūsų atpirkimo sandorį. Tai reiškia, kad jūs neturite jo pridėti prie visos savo kodo bazės vienu metu. Vietoj to, galite jį pridėti po failą. Pradėkime nuo kažko paprasto, kad pradėtumėte.

Pirmiausia pabandykite rasti failą, kuriame nebūtų daug sudėtingumo ar išorinių priklausomybių. Kažkas su vos keliomis paprastomis funkcijomis, nuo kurių reikia pradėti.

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

Norėdami, kad „Flow“ veiktų šiame faile, viršuje turime pridėti tokį „flow pragma“ komentarą:

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

Šis nedidelis komentaras failo viršuje nurodo srautui „Gerai, noriu, kad įrašytumėte šį failą“.

Dabar mes turime pirmą kartą paleisti „Flow“. Norėdami tai padaryti, turėsite grįžti į terminalą ir paleisti šią komandą:

$ flow
Pastaba: ši komanda yra srauto būsenos slapyvardis .

Tai, ką daro ši komanda, yra paleisti „Flow“ serverį ir paprašyti jo „atpirkimo“ būsenos, kuri greičiausiai pateiks klaidas, kurias galėsite ištaisyti.

Dažniausios klaidos, kurias pamatysite naujame faile:

  • „Trūksta anotacijos“
  • „Reikalingas modulis nerastas“

Šios klaidos yra susijusios su importu ir eksportu. Priežastis, kodėl jie sugalvojo, yra „Flow“ veikimo rezultatas. Norėdami patikrinti failų tipus, „Flow“ tiesiogiai žiūri į kiekvieno failo importą ir eksportą.

„Trūksta anotacijos“

Iš „Flow“ pamatysite tokią klaidą, nes ji kažkaip susijusi su jūsų failo eksportavimu. Išskyrus tą srautą, nebus skundžiamasi dėl trūkstamų tipo anotacijų.

Taigi, norėdami tai išspręsti, galime pradėti pridėti keletą failų tipų. Išsamų vadovą, kaip tai padaryti, rasite vartotojo vadove. Tai, ką turėtumėte baigti, yra keletas tokių tipų:

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

Tęskite srautą , kai pridedate tipus, kad pamatytumėte, ką darote. Galų gale turėtumėte sugebėti pašalinti visas „Trūkstamos anotacijos“ klaidas.

„Reikalingas modulis nerastas“

Šių klaidų gausite kaskart, kai importuosite / reikalausite ir kurių nebus galima išspręsti naudojant „Node“ įprastą modulio algoritmą, arba jei nepaisysite to naudodami .flowconfig .

Tai gali sukelti daugybė dalykų, galbūt naudojate specialų internetinių paketų sprendiklį, galbūt pamiršote ką nors įdiegti. Nepriklausomai nuo priežasties, „Flow“ turi sugebėti rasti importuojamą modulį, kad jis galėtų tinkamai atlikti savo darbą. Turite keletą būdų, kaip tai išspręsti:

  1. module.name_mapper - nurodykite reguliarią išraišką, kuri atitiktų modulių pavadinimus, ir pakaitinį šabloną.
  2. Sukurkite trūkstamo modulio bibliotekos apibrėžimą

Mes sutelksime dėmesį į modulio bibliotekos apibrėžimo sukūrimą, jei jums reikia naudoti module.name_mapper , daugiau apie tai galite pamatyti dokumentacijoje.

Bibliotekos apibrėžimo kūrimas

Turėti bibliotekos apibrėžimus yra naudinga suteikiant tipus jūsų įdiegtiems paketams, kuriuose nėra tipų. Pagal ankstesnį pavyzdį nustatykime savo eilutę „math-lib- library“.

Pirmiausia sukurkite srauto tipo katalogą šakniniame kataloge (kataloge, kuriame įdėjote .flowconfig ).

Galite naudoti kitus katalogų pavadinimus naudodami .flowconfig skyrių [lib] . Tačiau naudojant srauto tipą bus naudinga iš dėžutės.

Dabar sukursime „ flow- typed“ / string-math-lib.js failą, kuriame laikysime „libdef“ ir paleisime jį taip:

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

Toliau mums tereikia parašyti šio modulio eksporto apibrėžimus.

declare module "string-math-lib" { declare function getNumberFromString(str: string): number}
Pastaba: Jei reikia dokumentuoti „numatytąjį“ arba pirminį eksportą, tai galite padaryti naudodami deklaruoti module.exports: arba deklaruoti eksportą kaip numatytąjį

Yra daug daugiau bibliotekos apibrėžimų, todėl turėtumėte perskaityti dokumentus ir perskaityti šį tinklaraščio įrašą, kaip sukurti aukštos kokybės libdef.

„Libdef“ diegimas iš tipinio srauto

Kadangi libdefs gali sugaišti daug laiko, mes palaikome oficialią aukštos kokybės libdefs saugyklą, skirtą visų rūšių paketams, vadinamiems „flow-typed“.

Norėdami pradėti naudoti srauto tipą, įdiekite komandinės eilutės sąsają (CLI) visame pasaulyje:

$ npm install --global flow-typed

Dabar galite ieškoti srauto tipo / apibrėžimai / npmnorėdami sužinoti, ar paketui, kurį norite naudoti, yra libdef, jei yra, galite jį įdiegti taip:

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

Tai nurodo srauto tipą, kad norite įdiegti kreidos paketą 1.0.0 versijoje, kai naudojate 0.30 srautą .

Srautas įvedėte CLI vis dar beta ir yra planuojamos už jį daug patobulinimų, todėl tikėtis, kad tai, siekiant pagerinti daug, kad artimiausioje ateityje.

Nepamirškite prisidėti prie srauto tipo libdefų. Tai bendruomenės pastangos, ir kuo daugiau žmonių prisideda, tuo geriau.

Kitos klaidos, su kuriomis galite susidurti:

Tikimės, kad apėmėme beveik viską, į ką susidursite pradėdami naudoti „Flow“. Tačiau taip pat galite susidurti su šiomis klaidomis:

  • Node_modules“ viduje esantis paketas praneša apie klaidas
  • Node_modules skaitymas užtrunka tikrai ilgai
  • Netinkamai suformuotas JSON node_modules viduje sukelia klaidų

Yra keletas tokio tipo klaidų priežasčių, į kurias šiame pranešime nepateksiu (dirbu prie išsamios kiekvienos klaidos dokumentacijos). Kol kas, norėdami toliau judėti, galite tiesiog [ignoruoti] failus, kurie sukelia šias klaidas.

Tai reiškia, kad failo kelius pridedate prie savo .flowconfig skilties [ignoruoti] taip:

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

Paprastai yra geresnių variantų nei šis, tačiau tai turėtų suteikti jums gerą vietą pradėti.

Keletas pavyzdžių, kaip geriau tvarkyti „node_modules“ klaidas, rasite šiame „Stack Overflow“ atsakyme apie „fbjs“.

Profesionalų patarimas: patikrinkite, ar gerai esate apdraustas

Jei kada susimąstote, kaip gerai failas yra „Flow“ padengtas, galite naudoti šią komandą, kad pamatytumėte aprėpties ataskaitą:

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

Papildomi ištekliai ir palaikymas

Yra daugybė dalykų, kurių šis straipsnis neaprašė. Taigi čia yra keletas nuorodų į išteklius, kurie gali jums padėti.

  • „Flow“ svetainė
  • Išbandykite „Flow Online“
  • „Flow GitHub“
  • „Stack Overflow“ #flowtyped

„Flow“ komanda yra pasiryžusi įsitikinti, kad visi turi puikią „Flow“ naudojimo patirtį. Jei tai niekada netiesa, norėtume iš jūsų išgirsti, kaip tobulėti.

Sekite Jamesą Kyle'ą twitteryje. Sekite „Flow“ ir „Twitter“.