Ρύθμιση της ροής όταν έχετε ήδη εφαρμόσει το Babel

Ρύθμιση της ροής όταν έχετε ήδη εφαρμόσει το Babel

Το Flow είναι ένας ελεγκτής στατικού τύπου για JavaScript. Σας κάνει πιο παραγωγικούς παρέχοντας σχόλια καθώς γράφετε κώδικα. Η ροή σάς δίνει προειδοποιήσεις σε πραγματικό χρόνο που επισημαίνουν πότε έχετε κάνει λάθος. Αν θέλετε να μάθετε περισσότερα, δείτε το flowtype.org.

Αντί να προσπαθεί να δημιουργήσει το δικό του εντελώς ξεχωριστό οικοσύστημα, η ροή συνδέεται με το υπάρχον οικοσύστημα JavaScript. Η χρήση του Babel για τη μεταγλώττιση του κωδικού σας είναι ένας από τους ευκολότερους τρόπους ενσωμάτωσης του Flow σε ένα έργο.

Μετά από δύο χρόνια σκληρής δουλειάς, η Babel εργάζεται σχεδόν παντού, απλώς ρίξτε μια ματιά στη σελίδα εγκατάστασης με ενσωματώσεις για κάθε εργαλείο κατασκευής που μπορείτε να φανταστείτε.

Εάν δεν έχετε ρυθμίσει ακόμα το Babel, μπορείτε να χρησιμοποιήσετε αυτόν τον οδηγό για να ξεκινήσετε. Ίσως θέλετε επίσης να δείτε το εγχειρίδιο μου στο Babel.

Ρύθμιση της ροής πάνω από το Babel

Μόλις ρυθμίσετε το Babel, είναι εύκολο να ξεκινήσετε με το Flow. Αρχικά ας εγκαταστήσουμε δύο εξαρτήσεις:

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

Το πρόσθετο Babel είναι εκεί για να αφαιρέσετε τους τύπους ροής έτσι ώστε το πρόγραμμά σας να εκτελεστεί. Το flow-bin είναι ο τρόπος με τον οποίο χρησιμοποιείτε το Flow από τη γραμμή εντολών.

Στη συνέχεια, ας προσθέσουμε το πρόσθετο Babel στο .babelrc (ή όπου κι αν ρυθμίζετε το Babel με επιλογές):

{ presets: [...], plugins: [..., "transform-flow-strip-types"]}
Σημείωση: Υποθέτω ότι χρησιμοποιείτε το Babel 6 για αυτό το σεμινάριο. Συνιστάται να κάνετε αναβάθμιση εάν δεν το έχετε κάνει ήδη.

Τέλος, θα τρέξουμε τη ροή init στον κατάλογό μας, ο οποίος θα δημιουργήσει ένα αρχείο .flowconfig που θα μοιάζει με αυτό:

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

Φοβερός! Τώρα έχουμε ρυθμίσει όλες τις ροές στο έργο σας. Τι λες για να αρχίσουμε να το τρέχει σε ορισμένα αρχεία;

Λειτουργία ροής

Το Flow έχει σχεδιαστεί για να εισάγεται σταδιακά στο repo σας. Αυτό σημαίνει ότι δεν χρειάζεται να το προσθέσετε σε ολόκληρη τη βάση κώδικα ταυτόχρονα. Αντ 'αυτού, μπορείτε να το προσθέσετε από αρχείο σε αρχείο καθώς πηγαίνετε. Ας ξεκινήσουμε με κάτι απλό για να ξεκινήσετε.

Αρχικά, προσπαθήστε να βρείτε ένα αρχείο που δεν έχει πολλή πολυπλοκότητα ή εξωτερικές εξαρτήσεις. Κάτι με λίγες απλές λειτουργίες για να ξεκινήσετε.

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

Προκειμένου το Flow να τρέχει σε αυτό το αρχείο, πρέπει να προσθέσουμε ένα σχόλιο "flow pragma" στην κορυφή ως εξής:

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

Αυτό το μικρό σχόλιο στο πάνω μέρος του αρχείου λέει στο Flow "Εντάξει, θέλω να πληκτρολογήσετε αυτό το αρχείο".

Τώρα πρέπει να τρέξουμε το Flow για πρώτη φορά. Για να το κάνετε αυτό, θα πρέπει να επιστρέψετε στο τερματικό σας και να εκτελέσετε την ακόλουθη εντολή:

$ flow
Σημείωση: Αυτή η εντολή είναι ένα ψευδώνυμο κατάστασης ροής .

Αυτό που κάνει αυτή η εντολή είναι να ξεκινήσει ένας διακομιστής Flow και να του ζητήσει την «κατάσταση» του repo σας, ο οποίος πιθανότατα θα επιστρέψει κάποια σφάλματα για να διορθώσετε.

Τα πιο συνηθισμένα σφάλματα που θα δείτε σε ένα νέο αρχείο είναι:

  • "Λείπει σχολιασμός"
  • "Η απαιτούμενη ενότητα δεν βρέθηκε"

Αυτά τα σφάλματα σχετίζονται με εισαγωγές και εξαγωγές. Ο λόγος που προκύπτουν είναι αποτέλεσμα του τρόπου λειτουργίας του Flow. Για να ελέγξετε τους τύπους σε όλα τα αρχεία, το Flow εξετάζει άμεσα τις εισαγωγές και τις εξαγωγές κάθε αρχείου.

"Λείπει σχολιασμός"

Θα δείτε ένα τέτοιο σφάλμα από το Flow επειδή σχετίζεται κάπως με μια εξαγωγή του αρχείου σας. Εκτός από αυτό το Flow δεν θα παραπονιέται για σχολιασμούς που λείπουν.

Έτσι, για να το διορθώσουμε, μπορούμε να αρχίσουμε να προσθέτουμε ορισμένους τύπους στο αρχείο σας. Για έναν αναλυτικό οδηγό για το πώς να το κάνετε αυτό, ανατρέξτε στον οδηγό χρήσης. Αυτό που πρέπει να καταλήξετε είναι με ορισμένους τύπους όπως:

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

Συνεχίστε τη ροή καθώς προσθέτετε τους τύπους σας για να δείτε τα αποτελέσματα αυτού που κάνετε. Τελικά θα πρέπει να μπορείτε να διαγράψετε όλα τα σφάλματα "Λείπει ο σχολιασμός".

"Η απαιτούμενη ενότητα δεν βρέθηκε"

Θα λάβετε αυτά τα σφάλματα όποτε κάνετε εισαγωγή / απαίτηση που δεν μπορεί να επιλυθεί χρησιμοποιώντας τον κανονικό αλγόριθμο λειτουργικής μονάδας του Node ή εάν το έχετε αγνοήσει με το .flowconfig .

Αυτό μπορεί να οφείλεται σε πολλά πράγματα, ίσως χρησιμοποιείτε ένα ειδικό πρόγραμμα ανάλυσης πακέτων ιστοσελίδων, ίσως ξεχάσατε να εγκαταστήσετε κάτι. Όποιος και αν είναι ο λόγος, το Flow πρέπει να είναι σε θέση να βρει τη μονάδα που εισάγετε για να κάνει τη δουλειά της σωστά. Έχετε μερικές επιλογές για το πώς να το λύσετε:

  1. module.name_mapper - καθορίστε μια κανονική έκφραση που θα ταιριάζει με τα ονόματα των μονάδων και ένα μοτίβο αντικατάστασης.
  2. Δημιουργήστε έναν ορισμό βιβλιοθήκης για την ενότητα που λείπει

Θα επικεντρωθούμε στη δημιουργία ορισμού βιβλιοθήκης για τη λειτουργική μονάδα, εάν πρέπει να χρησιμοποιήσετε το module.name_mapper μπορείτε να δείτε περισσότερα σχετικά με αυτό στην τεκμηρίωση.

Δημιουργία ορισμού βιβλιοθήκης

Η ύπαρξη ορισμών βιβλιοθήκης είναι χρήσιμη για την παροχή τύπων στα πακέτα που έχετε εγκαταστήσει και δεν έχουν τύπους. Ας δημιουργήσουμε ένα για τη βιβλιοθήκη string-math-lib από το προηγούμενο παράδειγμα.

Πρώτα δημιουργήστε ένα ροή-δακτυλογραφημένο κατάλογο στον κατάλογο ρίζας σας (τον κατάλογο όπου μπορείτε να βάλετε σας .flowconfig ).

Μπορείτε να χρησιμοποιήσετε άλλα ονόματα καταλόγων χρησιμοποιώντας την ενότητα [lib] του .flowconfig . Ωστόσο, η χρήση ροής-πληκτρολογίου θα λειτουργήσει έξω από το κουτί.

Τώρα θα δημιουργήσουμε ένα αρχείο flow-typed / string-math-lib.js για να κρατήσουμε το "libdef" και να το ξεκινήσουμε έτσι:

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

Στη συνέχεια πρέπει απλώς να γράψουμε ορισμούς για τις εξαγωγές αυτής της ενότητας.

declare module "string-math-lib" { declare function getNumberFromString(str: string): number}
Σημείωση: Εάν πρέπει να τεκμηριώσετε την "προεπιλογή" ή την κύρια εξαγωγή, μπορείτε να το κάνετε αυτό με τη δήλωση module.exports: ή να δηλώσετε την προεπιλεγμένη εξαγωγή

Υπάρχουν πολλά περισσότερα για τους ορισμούς της βιβλιοθήκης, οπότε θα πρέπει να διαβάσετε την τεκμηρίωση και να διαβάσετε αυτήν την ανάρτηση ιστολογίου σχετικά με τον τρόπο δημιουργίας libdefs υψηλής ποιότητας.

Εγκατάσταση libdef από ροή-δακτυλογραφημένη

Επειδή το libdefs μπορεί να καταναλώνει πολύ χρόνο, διατηρούμε ένα επίσημο αποθετήριο libdefs υψηλής ποιότητας για όλα τα είδη πακέτων που ονομάζονται flow-typed.

Για να ξεκινήσετε με τη ροή τύπου, εγκαταστήστε τη διεπαφή γραμμής εντολών (CLI) παγκοσμίως:

$ npm install --global flow-typed

Τώρα μπορείτε να κοιτάξετε μέσα σε ροή δακτυλογραφημένους / ορισμούς / npmγια να δείτε αν υπάρχει ένα υπάρχον libdef για ένα πακέτο που θέλετε να χρησιμοποιήσετε, εάν υπάρχει, μπορείτε να το εγκαταστήσετε ως εξής:

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

Αυτό λέει ότι η ροή είναι ότι θέλετε να εγκαταστήσετε το πακέτο κιμωλίας στην έκδοση 1.0.0 όταν εκτελείτε το Flow 0.30 .

Το CLI τύπου ροής εξακολουθεί να είναι σε beta και έχει προγραμματιστεί πολλές βελτιώσεις, οπότε περιμένετε να βελτιωθεί πολύ στο εγγύς μέλλον.

Φροντίστε να συνεισφέρετε πίσω στα libdefs τύπου ροής. Είναι μια κοινοτική προσπάθεια, και όσο περισσότεροι άνθρωποι συνεισφέρουν, τόσο καλύτερα γίνεται.

Άλλα σφάλματα που ενδέχεται να αντιμετωπίσετε:

Ας ελπίσουμε ότι έχουμε καλύψει σχεδόν όλα όσα θα αντιμετωπίσετε ενώ ξεκινάτε με το Flow. Ωστόσο, ενδέχεται επίσης να αντιμετωπίσετε ορισμένα σφάλματα όπως αυτό:

  • Το πακέτο στο εσωτερικό του node_modules αναφέρει σφάλματα
  • Η ανάγνωση του node_modules απαιτεί πολύ χρόνο
  • Το JSON με λανθασμένη μορφή στο node_modules προκαλεί σφάλματα

Υπάρχουν διάφοροι λόγοι για αυτούς τους τύπους σφαλμάτων που δεν θα λάβω σε αυτήν την ανάρτηση (εργάζομαι για λεπτομερή τεκμηρίωση για κάθε μεμονωμένο σφάλμα). Προς το παρόν, προκειμένου να κρατήσετε τον εαυτό σας σε κίνηση, μπορείτε απλώς να [αγνοήσετε] τα αρχεία που προκαλούν αυτά τα σφάλματα.

Αυτό σημαίνει την προσθήκη διαδρομών αρχείων στην ενότητα [παράβλεψη] στο .flowconfig ως εξής:

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

Υπάρχουν γενικά καλύτερες επιλογές από αυτό, αλλά αυτό θα σας δώσει ένα καλό μέρος για να ξεκινήσετε.

Για μερικά παραδείγματα για τον καλύτερο χειρισμό σφαλμάτων στα node_modules, δείτε αυτήν την απάντηση Stack Overflow σχετικά με τα fbjs.

Επαγγελματική συμβουλή: Έλεγχος για να δείτε πόσο καλά είστε καλυμμένοι

Εάν αναρωτιέστε ποτέ πόσο καλά καλύπτεται ένα αρχείο από το Flow, μπορείτε να χρησιμοποιήσετε την ακόλουθη εντολή για να δείτε μια αναφορά κάλυψης:

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

Πρόσθετοι πόροι και υποστήριξη

Υπάρχουν πολλά που δεν καλύπτονται από αυτό το άρθρο. Ακολουθούν ορισμένοι σύνδεσμοι προς πόρους που μπορούν να σας βοηθήσουν.

  • Ιστοσελίδα ροής
  • Δοκιμάστε το Flow Online
  • Ροή GitHub
  • Υπερχείλιση στοίβας #flowtyped

Η ομάδα Flow έχει δεσμευτεί να διασφαλίσει ότι ο καθένας έχει μια εξαιρετική εμπειρία χρησιμοποιώντας το Flow. Εάν αυτό δεν ισχύει ποτέ, θα θέλαμε να σας ενημερώσουμε για το πώς να βελτιώσετε.

Ακολουθήστε τον James Kyle στο twitter. Ακολουθήστε επίσης το Flow στο twitter.