Postavljanje protoka kad ste već postavili Babel

Programiranje

Postavljanje protoka kad ste već postavili Babel

Tijek je provjera statičkog tipa za JavaScript. Čini vas produktivnijim pružanjem povratnih informacija dok pišete kod. Flow vam u stvarnom vremenu daje upozorenja koja ističu kada ste pogriješili. Ako želite znati više, posjetite flowtype.org.

Umjesto da pokušava izgraditi vlastiti potpuno odvojeni ekosustav, Flow se uključuje u postojeći JavaScript ekosustav. Korištenje Babela za sastavljanje koda jedan je od najjednostavnijih načina integriranja Flowa u projekt.

Nakon dvije godine napornog rada, Babel radi gotovo svugdje, samo pogledajte stranicu za postavljanje s integracijama za svaki alat za izgradnju koji možete zamisliti.

Ako Babel još nije postavljen, pomoću tog vodiča možete se postaviti. Mogli biste pogledati i moj priručnik o Babelu.

Postavljanje protoka na vrhu Babela

Jednom kada postavite Babel, lako je započeti s Flowom. Prvo dopuštamo instaliranje dvije ovisnosti:

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

Tu je dodatak Babel kako bi uklonio vrste protoka kako bi se vaš program pokrenuo. flow-bin je način na koji koristite Flow iz naredbenog retka.

Dalje, dodajmo dodatak Babel na vaš .babelrc (ili gdje god konfigurirate Babel s opcijama):

{ presets: [...], plugins: [..., "transform-flow-strip-types"]}
Napomena: Pretpostavljam da za ovaj vodič koristite Babel 6. Preporučuje se nadogradnja ako to već niste učinili.

Na kraju ćemo pokrenuti flow init u našem direktoriju, koji će stvoriti datoteku .flowconfig koja bi trebala izgledati ovako:

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

Super! Sada smo Flow postavili u vaš projekt. Što kažete na to da počnemo raditi na nekim datotekama?

Pokretanje protoka

Flow je dizajniran za postepeno uvođenje u vaš repo. To znači da ga ne morate dodavati u cijelu bazu kodova odjednom. Umjesto toga, možete ga dodavati datoteku po datoteku. Počnimo s nečim jednostavnim za pokretanje.

Prvo pokušajte pronaći datoteku koja nema puno složenosti ili vanjskih ovisnosti. Nešto sa samo nekoliko jednostavnih funkcija za početak.

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

Da bi se Flow pokrenuo na ovoj datoteci, na vrh moramo dodati komentar "flow pragma" ovako:

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

Ovaj mali komentar na vrhu datoteke kaže Flowu "U redu, želim da ovu datoteku provjerite".

Sada zapravo moramo prvi put pokrenuti Flow. Da biste to učinili, morat ćete se vratiti na svoj terminal i pokrenuti sljedeću naredbu:

$ flow
Napomena: Ova naredba zamjenski je naziv protoka .

Ova naredba pokreće poslužitelj protoka i traži od njega "status" vašeg repo-a, što će najvjerojatnije vratiti neke pogreške koje morate popraviti.

Najčešće pogreške koje ćete vidjeti u novoj datoteci su:

  • "Nedostaje napomena"
  • “Potrebni modul nije pronađen”

Te se pogreške odnose na uvoz i izvoz. Razlog zašto su se pojavili rezultat je kako Flow funkcionira. Kako bi provjerio vrste u datotekama, Flow izravno gleda na uvoz i izvoz svake datoteke.

"Nedostaje napomena"

Ovakva pogreška vidjet ćete u Flowu jer se nekako odnosi na izvoz vaše datoteke. Osim toga, Flow se neće žaliti na napomene koje nedostaju.

Dakle, kako bismo to popravili, možemo početi dodavati neke vrste u vašu datoteku. Za detaljan vodič o tome kako to učiniti pogledajte korisnički vodič. Na kraju biste trebali dobiti neke vrste poput ove:

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

Nastaviti prikazivati tijek kao što dodati svoje vrste kako bi vidjeli efekte što radite. Na kraju biste trebali biti u mogućnosti ukloniti sve pogreške "Nedostaje napomena".

“Potrebni modul nije pronađen”

Te ćete pogreške dobiti kad god uvozite / zahtijevate, a koje se ne mogu riješiti pomoću Node-ovog normalnog algoritma modula ili ako ste ih zanemarili pomoću .flowconfig .

To može biti uzrokovano mnogim stvarima, možda koristite poseban rješivač webpacka, možda ste zaboravili nešto instalirati. Bez obzira na razlog, Flow mora biti u mogućnosti pronaći modul koji uvozite kako bi ispravno obavio svoj posao. Imate nekoliko mogućnosti kako to riješiti:

  1. module.name_mapper - navedite regularni izraz koji se podudara s imenima modula i zamjenski obrazac.
  2. Stvorite definiciju knjižnice za modul koji nedostaje

Usredotočit ćemo se na stvaranje definicije knjižnice za modul, ako trebate koristiti module.name_mapper, više o tome možete vidjeti u dokumentaciji.

Stvaranje definicije knjižnice

Imati definicije knjižnica korisno je za davanje tipova instaliranim paketima koji nemaju tipove. Postavimo jedan za našu knjižnicu string-math-lib iz prethodnog primjera.

Prvo stvorite direktorij s protokom u korijenskom direktoriju (direktorij u koji ste stavili .flowconfig ).

Možete koristiti druga imena direktorija pomoću odjeljka [lib] u vašem .flowconfig . Međutim, upotreba protoka upisat će se izvan okvira.

Sada ćemo stvoriti datoteku type-typed / string-math-lib.js koja će držati naš "libdef" i pokrenuti je ovako:

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

Dalje samo trebamo napisati definicije za izvoz tog modula.

declare module "string-math-lib" { declare function getNumberFromString(str: string): number}
Napomena: Ako trebate dokumentirati "zadani" ili primarni izvoz, to možete učiniti pomoću proglašenja module.exports: ili proglašenja izvoza zadanim

Definicija knjižnica ima puno više, pa biste trebali pročitati dokumentaciju i pročitati ovaj post na blogu o tome kako stvoriti visokokvalitetni libdefs.

Instaliranje libdefa iz protočnog tipa

Budući da libdefs mogu potrošiti puno vremena, održavamo službeno spremište visokokvalitetnih libdefova za sve vrste paketa koji se nazivaju protočni tip.

Da biste započeli s tipkanjem protoka, globalno instalirajte sučelje naredbenog retka (CLI):

$ npm install --global flow-typed

Sada možete pogledati unutar protoka-typed / definitions / npmda biste vidjeli postoji li libdef za paket koji želite koristiti, ako postoji, možete ga instalirati ovako:

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

To govori upisanom u protok da želite instalirati paket krede u verziji 1.0.0 kada izvodite Flow 0.30 .

Protoka upisali CLI je još uvijek u beta fazi i ima puno o planiranim poboljšanjima za njega, tako da će se to poboljšati puno u bliskoj budućnosti.

Svakako se vratite na libdefs otkucane protokom. To je napor zajednice i što više ljudi daje svoj doprinos, to postaje bolje.

Ostale pogreške na koje biste mogli naletjeti:

Nadamo se da smo pokrili gotovo sve na što ćete naletjeti dok započinjete s Flowom. Međutim, mogli biste naići i na neke pogreške poput ove:

  • Paket unutar node_modules prijavljuje pogreške
  • Čitanje node_modula traje zaista dugo
  • Pogrešno oblikovan JSON unutar node_modules uzrokuje pogreške

Postoji pregršt razloga za ove vrste pogrešaka u koje neću ulaziti u ovom postu (radim na detaljnoj dokumentaciji za svaku pojedinu pogrešku). Za sada, kako biste se nastavili kretati, možete jednostavno [zanemariti] datoteke koje uzrokuju ove pogreške.

To znači dodavanje putova datoteka u vaš odjeljak [ignore] u vašem .flowconfig ovako:

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

Općenito postoje bolje mogućnosti od ove, ali ovo bi vam trebalo pružiti dobro mjesto za početak.

Za neke primjere kako bolje obraditi pogreške unutar node_modula pogledajte ovaj odgovor na Stack Overflow o fbjs-u.

Pro savjet: Provjerite jeste li dobro pokriveni

Ako se ikad pitate koliko je datoteka protokom pokrivena, možete upotrijebiti sljedeću naredbu da biste vidjeli izvješće o pokrivenosti:

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

Dodatni resursi i podrška

Mnogo je toga što nije obuhvaćeno ovim člankom. Evo nekoliko veza do resursa koji vam mogu pomoći.

  • Web stranica protoka
  • Isprobajte Flow Online
  • Flow GitHub
  • Preljev stoga #flowtyped

Flow tim predan je osiguravanju da svi imaju izvrsno iskustvo korištenja Flowa. Ako to ikada nije istina, voljeli bismo čuti od vas o tome kako se poboljšati.

Slijedite Jamesa Kylea na twitteru. Slijedite Flow i na twitteru.