Постављање протока када већ имате Бабел на месту

Постављање протока када већ имате Бабел на месту

Ток је статички проверавач типа за ЈаваСцрипт. То вас чини продуктивнијим пружањем повратних информација док пишете код. Флов вам даје упозорења у реалном времену која истичу када сте погрешили. Ако желите да сазнате више, посетите фловтипе.орг.

Уместо да покушава да изгради свој властити потпуно одвојени екосистем, Флов се укључује у постојећи ЈаваСцрипт екосистем. Коришћење Бабел-а за компајлирање кода један је од најлакших начина за интеграцију Флов-а у пројекат.

Након две године напорног рада, Бабел ради готово свуда, само погледајте страницу за подешавање са интеграцијама за сваки алат за изградњу који можете да замислите.

Ако још увек нисте поставили Бабел, можете да га користите помоћу тог водича. Такође бисте можда желели да погледате мој приручник о Бабелу.

Постављање протока на врху Бабела

Једном када поставите Бабел, лако ћете кренути са Флов-ом. Прво дозволимо да инсталирамо две зависности:

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

Додатак Бабел постоји да би уклонио врсте протока како би ваш програм могао да се покрене. флов-бин је начин на који користите Флов из командне линије.

Даље, додајмо додатак Бабел на ваш .бабелрц (или где год конфигуришете Бабел са опцијама):

{ presets: [...], plugins: [..., "transform-flow-strip-types"]}
Напомена: Претпостављам да за овај водич користите Бабел 6. Препоручује се надоградња ако то већ нисте урадили.

На крају ћемо покренути флов инит у нашем директоријуму, који ће створити .фловцонфиг датотеку која би требало да изгледа овако:

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

Авесоме! Сада смо Флов поставили у ваш пројекат. Како би било да почнемо да га покрећемо на неким датотекама?

Покретање протока

Ток је дизајниран да се постепено уводи у ваш репо. То значи да га не морате додавати у целу базу кодова одједном. Уместо тога, можете га додавати датотеку по датотеку. Почнимо са нечим једноставним за покретање.

Прво покушајте да пронађете датотеку која нема пуно сложености или спољних зависности. Нешто са само неколико једноставних функција за почетак.

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

Да би се Флов покренуо на овој датотеци, на врх морамо додати коментар „флов прагма“ овако:

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

Овај мали коментар на врху датотеке говори Флов-у „У реду, желим да ову датотеку откуцате“.

Сада морамо први пут да покренемо Флов. Да бисте то урадили, мораћете да се вратите на терминал и покренете следећу команду:

$ flow
Напомена: Ова наредба је псеудоним статуса протока .

Ова наредба покреће проток сервера и тражи од њега „статус“ вашег репо-а, што ће највероватније вратити неке грешке које ћете морати да поправите.

Најчешће грешке које ћете видети у новој датотеци су:

  • „Недостаје напомена“
  • „Потребан модул није пронађен“

Ове грешке се односе на увоз и извоз. Разлог зашто су се појавили резултат је како функционише Флов. Да би проверио типове у датотекама, Флов директно гледа на увоз и извоз сваке датотеке.

„Недостаје напомена“

Овакву грешку ћете видети из Флов-а, јер се она некако односи на извоз ваше датотеке. Осим тога, Флов се неће жалити на недостајуће напомене типа.

Дакле, да бисмо то поправили, можемо почети да додајемо неке типове у вашу датотеку. За детаљан водич о томе како то учинити погледајте кориснички водич. На крају би требало да имате неке врсте попут ове:

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

Наставите да радите током додавања типова да бисте видели ефекте онога што радите. На крају бисте могли да уклоните све грешке „Недостаје напомена“.

„Потребан модул није пронађен“

Добићете ове грешке кад год је увоз / захтевају да се не може решити помоћу нормалан алгоритам модула чвор или ако сте га игнорисали са .фловцонфиг .

То може бити узроковано многим стварима, можда користите посебну резолуцију вебпацка, можда сте заборавили да нешто инсталирате. Без обзира на разлог, Флов мора бити у могућности да пронађе модул који увозите да би свој посао исправно радио. Имате неколико могућности како то решити:

  1. модуле.наме_маппер - наведите регуларни израз који се подудара са именима модула и образац замене.
  2. Направите дефиницију библиотеке за модул који недостаје

Усредсредићемо се на стварање дефиниције библиотеке за модул, ако требате да користите модуле.наме_маппер, више о томе можете видети у документацији.

Креирање дефиниције библиотеке

Имати дефиниције библиотека корисно је за давање типова пакетима које сте инсталирали, а који немају типове. Поставимо један за нашу библиотеку стринг-матх-либ из претходног примера.

Прво креирајте директоријум откуцан у протоку у вашем основном директоријуму (директоријум у који сте ставили .фловцонфиг ).

Можете користити друга имена директоријума помоћу одељка [либ] у вашем .фловцонфиг . Међутим, употреба проточног типа ће успети ван оквира.

Сада ћемо створити датотеку типе-типед / стринг-матх-либ.јс која ће држати наш „либдеф“ и покренути је овако:

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

Даље само треба да напишемо дефиниције за извоз тог модула.

declare module "string-math-lib" { declare function getNumberFromString(str: string): number}
Напомена: Ако требате документовати „подразумевани“ или примарни извоз, то можете учинити помоћу проглашења модуле.екпортс: или проглашења извоза заданим

Дефиниција библиотека има много више, па бисте требали прочитати документацију и прочитати овај пост на блогу о томе како створити висококвалитетне либдефс.

Инсталирање либдеф-а из проточног типа

Будући да либдефс могу да одузимају пуно времена, одржавамо службено спремиште висококвалитетних либдефова за све врсте пакета који се називају флов-типед.

Да бисте започели са прототипом, глобално инсталирајте интерфејс командне линије (ЦЛИ):

$ npm install --global flow-typed

Сада можете погледати унутар протока-типед / дефинитионс / нпмда бисте видели да ли постоји постојећи либдеф за пакет који желите да користите, ако постоји, можете га инсталирати овако:

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

Ово говори откуцаном протоку да желите да инсталирате пакет креда у верзији 1.0.0 када покрећете Флов 0.30 .

Протока откуцана ЦЛ је још увек у бета фази и има много побољшања планираних за то, тако да очекујем да ће побољшати много у блиској будућности.

Обавезно се вратите на либдефс откуцане протоком. То је напор заједнице и што више људи доприноси, то постаје боље.

Остале грешке на које бисте могли наићи:

Надамо се да смо покрили готово све на шта ћете наићи док започињете са Флов-ом. Међутим, такође можете наићи на неке грешке попут ове:

  • Пакет унутар ноде_модулес пријављује грешке
  • Читање ноде_модулес траје заиста дуго
  • Неисправни ЈСОН унутар ноде_модулес изазива грешке

Постоји прегршт разлога за ове врсте грешака у које нећу улазити у овом посту (радим на детаљној документацији за сваку појединачну грешку). За сада, да бисте се наставили кретати, можете само [занемарити] датотеке које узрокују ове грешке.

То значи додавање путања датотека у ваш [игноре] одељак у .фловцонфиг овако:

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

Генерално постоје боље опције од ове, али ово би вам требало да буде добро место за почетак.

За неке примере како се боље рукује грешкама у оквиру ноде_модулес, погледајте овај одговор на Стацк Оверфлов о фбјс-у.

Професионални савет: Проверите да ли сте добро покривени

Ако се икад питате колико је датотека покривена протоком Флов, можете користити следећу команду да бисте видели извештај о покривености:

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

Додатни ресурси и подршка

Много тога није обухваћено овим чланком. Дакле, ево неколико веза до ресурса који вам могу помоћи.

  • Флов Вебсите
  • Испробајте Флов Онлине
  • Флов ГитХуб
  • Преливање стека #фловтипед

Флов тим се залаже за то да сви имају изврсно искуство користећи Флов. Ако то икада није тачно, волели бисмо да чујемо како да се побољшамо.

Пратите Јамеса Килеа на твиттеру. Пратите Флов и на твиттеру.