Flow-laitteen asettaminen, kun olet jo saanut Babelin paikoilleen

Flow-laitteen asettaminen, kun olet jo saanut Babelin paikoilleen

Flow on staattisen tyypin tarkistaja JavaScriptille. Se tekee sinusta tuottavamman antamalla palautetta koodia kirjoittaessasi. Flow antaa sinulle reaaliaikaisia ​​varoituksia, jotka osoittavat, kun olet tehnyt virheen. Jos haluat tietää enemmän, käy osoitteessa flowtype.org.

Sen sijaan, että Flow yrittäisi rakentaa omaa täysin erillistä ekosysteemiä, Flow kiinnittyy olemassa olevaan JavaScript-ekosysteemiin. Babelin käyttäminen koodin kokoamiseen on yksi helpoimmista tavoista integroida Flow projektiin.

Kahden vuoden kovan työn jälkeen Babel toimii melkein kaikkialla, katsokaa vain asetussivua, johon on integroitu jokaisen kuviteltavan rakennustyökalun.

Jos sinulla ei ole vielä Babeliä määritetty, voit käyttää sitä oppaan avulla. Haluat ehkä myös tarkistaa minun käsikirjani Babelista.

Virtauksen asettaminen Babelin päälle

Kun olet asettanut Babelin, Flow on helppo päästä eteenpäin. Asenna ensin kaksi riippuvuutta:

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

Babel-laajennus on olemassa Flow-tyyppien poistamiseksi niin, että ohjelma toimii. flow-bin on tapa, jolla käytät Flowia komentoriviltä.

Seuraavaksi lisätään Babel-laajennus .babelrc-tiedostoon (tai missä tahansa asetat Babelin asetuksilla):

{ presets: [...], plugins: [..., "transform-flow-strip-types"]}
Huomaa: Oletan, että käytät Babel 6: ta tässä opetusohjelmassa. On suositeltavaa päivittää, jos et ole vielä tehnyt sitä.

Viimeinkin suoritamme vuon init hakemistossamme, joka luo .flowconfig- tiedoston, jonka pitäisi näyttää tältä:

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

Mahtava! Nyt Flow kaikki on määritetty projektiisi. Entä jos aloitamme sen suorittamisen joissakin tiedostoissa?

Virtauksen aloittaminen

Flow on suunniteltu tuomaan repoosi asteittain. Tämä tarkoittaa, että sinun ei tarvitse lisätä sitä koko kooditietokantaan kerralla. Sen sijaan voit lisätä sen tiedostokohtaisesti. Aloitetaan jollakin yksinkertaisella, jotta pääset alkuun.

Yritä ensin löytää tiedosto, jolla ei ole paljon monimutkaisuutta tai ulkoisia riippuvuuksia. Jotain vain muutamalla tavallisella toiminnolla.

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

Jotta Flow voidaan käynnistää tällä tiedostolla, meidän on lisättävä "flow pragma" -kommentti yläosaan näin:

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

Tämä pieni kommentti tiedoston yläosassa kertoo Flow'lle "Okei, haluan sinun kirjoittavan tämän tiedoston."

Nyt meidän on todella suoritettava Flow ensimmäistä kertaa. Tätä varten sinun on vaihdettava takaisin päätelaitteeseesi ja suoritettava seuraava komento:

$ flow
Huomaa: Tämä komento on vuon tilan alias .

Tämä komento käynnistää Flow-palvelimen ja pyytää siltä palautuksen "tilan", mikä todennäköisesti palauttaa joitain virheitä korjattavaksi.

Yleisimmät virheet, jotka näet uudessa tiedostossa, ovat:

  • "Puuttuva merkintä"
  • "Vaadittavaa moduulia ei löydy"

Nämä virheet liittyvät tuontiin ja vientiin. Syy siihen, että he keksivät, on seurausta siitä, miten Flow toimii. Flow tarkastelee tiedostotyyppejä suoraan kunkin tiedoston tuonnista ja viennistä.

"Puuttuva merkintä"

Näet tällaisen virheen Flow'sta, koska se liittyy jotenkin tiedostosi vientiin. Muut kuin Flow ei valittaa puuttuvista tyyppihuomautuksista.

Joten sen korjaamiseksi voimme aloittaa tiedostotyyppien lisäämisen. Yksityiskohtainen opas siitä, miten se tehdään, on käyttöoppaassa. Sinun pitäisi päätyä joihinkin tällaisiin tyyppeihin:

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

Jatka virtausta, kun lisäät tyyppejä nähdäksesi tekemäsi vaikutukset. Lopulta sinun pitäisi pystyä poistamaan kaikki puuttuvat merkinnät -virheet.

"Vaadittavaa moduulia ei löydy"

Näet nämä virheet aina, kun tuot / vaadit, jota ei voida ratkaista Solmun normaalilla moduulin algoritmilla, tai jos olet ohittanut sen .flowconfig-tiedostossa .

Tämä voi johtua monista asioista, ehkä käytät erityistä webpack-ratkaisua, ehkä unohdit asentaa jotain. Mistä syystä tahansa, Flow: n on löydettävä tuotava moduuli tekemään työnsä oikein. Sinulla on muutama vaihtoehto tämän ratkaisemiseksi:

  1. module.name_mapper - määritä säännöllinen lauseke vastaamaan moduulien nimiä ja korvaava malli.
  2. Luo kirjastomääritys puuttuvalle moduulille

Keskitymme moduulin kirjastomääritelmän luomiseen, jos sinun on käytettävä module.name_mapper -ohjelmaa, näet siitä lisätietoja dokumentaatiosta.

Kirjastomäärityksen luominen

Kirjastomääritelmien käyttäminen on hyödyllistä antamalla asennetuille paketeille tyyppejä, joilla ei ole tyyppejä. Määritetään yksi edellisen esimerkin merkkijono-math-lib- kirjastollemme.

Ensimmäinen luoda virtauksen kirjoitettu hakemistoon juurihakemistosta (hakemisto, johon laitat .flowconfig ).

Voit käyttää muita hakemistojen nimiä .flowconfig- osion [lib] -osiossa . Kuitenkin käyttämällä virtauksen vahvuudella toimii kättelyssä.

Nyt luomme flow-typed / string-math-lib.js- tiedoston pitämään libdef- tiedostoa ja käynnistämään sen näin:

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

Seuraavaksi meidän on vain kirjoitettava määritelmät kyseisen moduulin vientiä varten.

declare module "string-math-lib" { declare function getNumberFromString(str: string): number}
Huomaa: Jos sinun on dokumentoitava "oletus" tai ensisijainen vienti, voit tehdä sen deklaraa module.exports: tai julista vienti oletuksena

Kirjastomääritelmissä on paljon enemmän, joten sinun tulee lukea dokumentaatio läpi ja lukea tämä blogiviesti siitä, miten laadukkaita libdef-tiedostoja luodaan.

Libdefin asentaminen virtaustyypistä

Koska libdefs voi kuluttaa paljon aikaa, ylläpidämme virallista korkealaatuisten libdefien arkistoa kaikenlaisille flow-type-nimisille paketeille.

Voit aloittaa vuotyyppisen asennuksen asentamalla komentoriviliittymän (CLI) maailmanlaajuisesti:

$ npm install --global flow-typed

Nyt voit etsiä flow-typed / definitions / npm -kohdastaJos haluat nähdä, onko paketille, jota haluat käyttää, on olemassa libdef, voit asentaa sen näin:

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

Tämä kertoo virtaus-kirjoittanut, että haluat asentaa liitu paketti on 1.0.0 -versio, kun käytössä Flow 0,30 .

Virtauksen kirjoittanut CLI on vielä beta, ja siellä on paljon parannuksia suunnitteilla sitä, joten odottaa tämä parantaa paljon lähitulevaisuudessa.

Muista osallistua takaisin virtaustyyppisiin libdefeihin. Se on yhteisön ponnistelu, ja mitä enemmän ihmisiä osallistuu, sitä paremmin se tulee.

Muut virheet, joihin saatat törmätä:

Toivottavasti olemme käsitelleet melkein kaiken, mitä kohtaat Flow-aloituksen kanssa. Saatat kuitenkin myös törmätä seuraaviin virheisiin:

  • Solmu_moduulien sisällä oleva paketti raportoi virheistä
  • Solmun_moduulien lukeminen vie todella kauan
  • Epämuodostunut JSON solmun_moduulien sisällä aiheuttaa virheitä

Tämän tyyppisille virheille on kourallinen syitä, joihin en pääse tässä viestissä (työskentelen yksityiskohtaisten ohjeiden laatimiseksi jokaiselle yksittäiselle virheelle). Toistaiseksi voit pitää itsesi liikkeessä vain [ohittaa] tiedostot, jotka aiheuttavat nämä virheet.

Tämä tarkoittaa tiedostopolkujen lisäämistä [ignore] -osioon .flowconfig-tiedostossasi seuraavasti:

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

On yleensä parempia vaihtoehtoja kuin tämä, mutta tämän pitäisi antaa sinulle hyvä paikka aloittaa.

Joitakin esimerkkejä siitä, miten virheitä voidaan käsitellä paremmin solmu_moduuleissa, katso tämä pinon ylivuoto -vastaus fbjs: stä.

Pro-vinkki: Tarkista, kuinka hyvin olet suojattu

Jos mietit koskaan, kuinka hyvin Flow peittää tiedoston, voit käyttää seuraavaa komentoa nähdäksesi kattavuusraportin:

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

Lisäresurssit ja tuki

Tässä artikkelissa ei käsitelty paljon. Joten tässä on joitain linkkejä resursseihin, jotka voivat auttaa sinua.

  • Flow-verkkosivusto
  • Kokeile Flow Onlinea
  • Flow GitHub
  • Pino ylivuoto #flowtyped

Flow-tiimi on sitoutunut varmistamaan, että kaikilla on erinomainen kokemus Flow'n käytöstä. Jos se ei koskaan pidä paikkaansa, haluaisimme kuulla sinusta kuinka parantaa.

Seuraa James Kyleä Twitterissä. Seuraa Flowia myös Twitterissä.