Einrichten von Flow, wenn Sie Babel bereits installiert haben

Einrichten von Flow, wenn Sie Babel bereits installiert haben

Flow ist eine statische Typprüfung für JavaScript. Sie werden produktiver, indem Sie beim Schreiben von Code Feedback geben. Flow gibt Ihnen in Echtzeit Warnungen, die darauf hinweisen, wenn Sie einen Fehler gemacht haben. Wenn Sie mehr wissen möchten, besuchen Sie flowtype.org.

Anstatt zu versuchen, ein eigenes, völlig separates Ökosystem aufzubauen, fügt sich Flow in das vorhandene JavaScript-Ökosystem ein. Die Verwendung von Babel zum Kompilieren Ihres Codes ist eine der einfachsten Möglichkeiten, Flow in ein Projekt zu integrieren.

Nach zwei Jahren harter Arbeit arbeitet Babel so ziemlich überall. Schauen Sie sich einfach die Setup-Seite mit Integrationen für jedes erdenkliche Build-Tool an.

Wenn Sie Babel noch nicht eingerichtet haben, können Sie diese Anleitung verwenden, um sich einzurichten. Vielleicht möchten Sie auch mein Handbuch über Babel lesen.

Flow auf Babel einrichten

Sobald Sie Babel eingerichtet haben, ist es einfach, mit Flow loszulegen. Lassen Sie uns zunächst zwei Abhängigkeiten installieren:

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

Das Babel-Plugin dient dazu, Flow-Typen zu entfernen, damit Ihr Programm ausgeführt wird. Mit flow-bin verwenden Sie Flow über die Befehlszeile.

Als nächstes fügen wir das Babel-Plugin zu Ihrer .babelrc hinzu (oder wo immer Sie Babel mit Optionen konfigurieren):

{ presets: [...], plugins: [..., "transform-flow-strip-types"]}
Hinweis: Ich gehe davon aus, dass Sie Babel 6 für dieses Tutorial verwenden. Es wird empfohlen, ein Upgrade durchzuführen, falls Sie dies noch nicht getan haben.

Schließlich führen wir flow init in unserem Verzeichnis aus, wodurch eine .flowconfig- Datei erstellt wird, die folgendermaßen aussehen sollte:

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

Genial! Jetzt haben wir Flow in Ihrem Projekt eingerichtet. Wie wäre es, wenn wir anfangen, es auf einigen Dateien laufen zu lassen?

Flow zum Laufen bringen

Flow wurde entwickelt, um schrittweise in Ihr Repo eingeführt zu werden. Das bedeutet, dass Sie es nicht auf einmal zu Ihrer gesamten Codebasis hinzufügen müssen. Stattdessen können Sie es Datei für Datei hinzufügen, während Sie fortfahren. Beginnen wir mit etwas Einfachem, um Sie zum Laufen zu bringen.

Versuchen Sie zunächst, eine Datei zu finden, die nicht sehr komplex ist oder externe Abhängigkeiten aufweist. Etwas mit nur einer Handvoll einfacher Funktionen, mit denen Sie beginnen können.

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

Um Flow für diese Datei zum Laufen zu bringen, müssen wir oben einen Kommentar zum „Flow Pragma“ hinzufügen:

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

Dieser kleine Kommentar oben in der Datei sagt Flow: "Okay, ich möchte, dass Sie diese Datei typüberprüfen."

Jetzt müssen wir Flow zum ersten Mal ausführen. Dazu müssen Sie zu Ihrem Terminal zurückkehren und den folgenden Befehl ausführen:

$ flow
Hinweis: Dieser Befehl ist ein Alias ​​für den Flussstatus .

Mit diesem Befehl wird ein Flow-Server gestartet und nach dem „Status“ Ihres Repos gefragt, der höchstwahrscheinlich einige Fehler zurückgibt, die Sie beheben müssen.

Die häufigsten Fehler, die in einer neuen Datei angezeigt werden, sind:

  • "Fehlende Anmerkung"
  • "Erforderliches Modul nicht gefunden"

Diese Fehler beziehen sich auf Importe und Exporte. Der Grund, warum sie auftauchen, ist ein Ergebnis der Funktionsweise von Flow. Um die Dateitypen zu überprüfen, überprüft Flow direkt die Importe und Exporte jeder Datei.

"Fehlende Anmerkung"

In Flow wird ein solcher Fehler angezeigt, da er sich irgendwie auf einen Export Ihrer Datei bezieht. Ansonsten beschwert sich Flow nicht über fehlende Typanmerkungen.

Um dies zu beheben, können wir Ihrer Datei einige Typen hinzufügen. Eine ausführliche Anleitung dazu finden Sie in der Bedienungsanleitung. Was Sie am Ende haben sollten, ist mit einigen Typen wie diesen:

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

Führen Sie den Flow weiter aus, während Sie Ihre Typen hinzufügen, um die Auswirkungen Ihrer Aktivitäten zu sehen. Schließlich sollten Sie in der Lage sein, alle Fehler "Fehlende Anmerkungen" zu beseitigen.

"Erforderliches Modul nicht gefunden"

Sie erhalten diese Fehler immer dann, wenn Sie einen Import / Bedarf haben, der mit dem normalen Modulalgorithmus von Node nicht behoben werden kann, oder wenn Sie ihn mit Ihrer .flowconfig ignoriert haben .

Dies kann durch viele Dinge verursacht werden. Vielleicht verwenden Sie einen speziellen Webpack-Resolver, vielleicht haben Sie vergessen, etwas zu installieren. Unabhängig vom Grund muss Flow in der Lage sein, das zu importierende Modul zu finden, damit es seine Aufgabe korrekt ausführen kann. Sie haben einige Möglichkeiten, wie Sie dies lösen können:

  1. module.name_mapper - Geben Sie einen regulären Ausdruck an, der mit den Modulnamen übereinstimmt, und ein Ersatzmuster.
  2. Erstellen Sie eine Bibliotheksdefinition für das fehlende Modul

Wir konzentrieren uns auf die Erstellung einer Bibliotheksdefinition für das Modul. Wenn Sie module.name_mapper verwenden müssen , finden Sie weitere Informationen in der Dokumentation.

Erstellen einer Bibliotheksdefinition

Bibliotheksdefinitionen sind nützlich, um den von Ihnen installierten Paketen Typen zuzuweisen, die keine Typen haben. Lassen Sie uns eine für unsere String-Math-Lib- Bibliothek aus dem vorherigen Beispiel einrichten .

Erstellen Sie zunächst ein Flow-typisiertes Verzeichnis in Ihrem Stammverzeichnis (dem Verzeichnis, in dem Sie Ihre .flowconfig ablegen ).

Sie können andere Verzeichnisnamen im Abschnitt [lib] Ihrer .flowconfig verwenden . Die Verwendung von Flow-Typing funktioniert jedoch sofort.

Jetzt erstellen wir eine Flow-typisierte / string-math-lib.js- Datei, die unsere "libdef" enthält, und starten sie wie folgt:

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

Als nächstes müssen wir nur Definitionen für den Export dieses Moduls schreiben.

declare module "string-math-lib" { declare function getNumberFromString(str: string): number}
Hinweis: Wenn Sie den Standard- oder Primärexport dokumentieren müssen, können Sie dies mit dem Deklarieren von module.exports: oder dem Deklarieren des Exportstandards tun

Bibliotheksdefinitionen enthalten noch viel mehr. Lesen Sie daher die Dokumentation durch und lesen Sie diesen Blog-Beitrag zum Erstellen hochwertiger libdefs.

Installieren eines libdef von flow-typed

Da libdefs viel Zeit in Anspruch nehmen können, unterhalten wir ein offizielles Repository mit hochwertigen libdefs für alle Arten von Paketen, die als Flow-Typ bezeichnet werden.

Installieren Sie die Befehlszeilenschnittstelle (CLI) global, um mit Flow-Typing zu beginnen:

$ npm install --global flow-typed

Jetzt können Sie in flow-typed / definition / npm nachsehenUm zu sehen, ob für ein Paket, das Sie verwenden möchten, ein libdef vorhanden ist, können Sie es wie folgt installieren:

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

Dies teilt flow-typed mit, dass Sie das Kreidepaket in der Version 1.0.0 installieren möchten, wenn Sie Flow 0.30 ausführen .

Die Flow-typisierte CLI befindet sich noch in der Beta-Phase und es sind viele Verbesserungen geplant. Erwarten Sie daher, dass sich diese in naher Zukunft erheblich verbessern wird.

Stellen Sie sicher, dass Sie einen Beitrag zu den Flow-typisierten libdefs leisten. Es ist eine Gemeinschaftsanstrengung, und je mehr Menschen dazu beitragen, desto besser wird es.

Andere Fehler, auf die Sie möglicherweise stoßen:

Hoffentlich haben wir fast alles behandelt, auf das Sie stoßen werden, wenn Sie mit Flow beginnen. Es können jedoch auch folgende Fehler auftreten:

  • Das Paket in node_modules meldet Fehler
  • Das Lesen von node_modules dauert sehr lange
  • Fehlerhafter JSON in node_modules verursacht Fehler

Es gibt eine Handvoll Gründe für diese Art von Fehlern, auf die ich in diesem Beitrag nicht eingehen werde (ich arbeite an einer detaillierten Dokumentation für jeden einzelnen Fehler). Um sich in Bewegung zu halten, können Sie vorerst nur die Dateien [ignorieren] , die diese Fehler verursachen.

Dies bedeutet, dass Sie Ihrem Abschnitt [Ignorieren] in Ihrer .flowconfig Dateipfade wie folgt hinzufügen :

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

Es gibt im Allgemeinen bessere Optionen als diese, aber dies sollte Ihnen einen guten Ausgangspunkt bieten.

In dieser Antwort zum Stapelüberlauf zu fbjs finden Sie einige Beispiele für einen besseren Umgang mit Fehlern in node_modules.

Profi-Tipp: Überprüfen Sie, wie gut Sie abgesichert sind

Wenn Sie sich jemals fragen, wie gut eine Datei von Flow abgedeckt wird, können Sie den folgenden Befehl verwenden, um einen Abdeckungsbericht anzuzeigen:

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

Zusätzliche Ressourcen und Unterstützung

Es gibt viele, die in diesem Artikel nicht behandelt wurden. Hier sind einige Links zu Ressourcen, die Ihnen helfen können.

  • Flow Website
  • Versuchen Sie Flow Online
  • Flow GitHub
  • Stapelüberlauf #flowtyped

Das Flow-Team setzt sich dafür ein, dass jeder eine hervorragende Erfahrung mit Flow hat. Sollte dies jemals nicht der Fall sein, würden wir gerne von Ihnen hören, wie Sie sich verbessern können.

Folgen Sie James Kyle auf Twitter. Folgen Sie Flow auch auf Twitter.