Use Facebook Flow with Ionic 3?

Question

I am looking to use the Facebook Static Analyzer Flow with my Ionic project. I am new to the different package managers as Ionic uses Webpack. Every tutorial I see for Flow indicates to configure Babel to use it, but it does not appear that Ionic uses Babel. Is there an issue configuring Flow with Ionic 3 with Babel?

All the references I have found for Typescript use either Babel or Webpack, which is why I am not sure that the two can work together.

Answer 1

There are two parts to Flow, the flow binary, and the flow preset for Babel.

You write JS with added flow type annotations, but the flow type annotations would not be acceptable to your JS interpretter (node, browser etc) - so the source files have to be transpiled to remove the Flow type information.

Babel is your transpiler, with the appropriate presets and plugins.

Webpack is used ahead of that chain to marshall other resources to get from source to build/distribution code.

Webpack can be configured with the babel-loader plugin so that Babel is run as the packing proceeds.

The babel-preset-flow is used to transpile the type-annotated code to plain JS.

So, Webpack uses Babel, Babel uses Flow preset.

There is also a comment mode for Flow which allows you to use Flow without having to do any transpiling which might also be a solution to your problem if you can't configure the tool stack to your liking.