Flow Babel Webpack Plugin

A concise tool that glues together Flow and Webpack, with the help of Babel.

It provides you with flow typecheck status in webpack build reports.

Thanks to author: Shirsh Zibbu ( https://github.com/zhirzh/flow-babel-webpack-plugin )

Updates:

• flow-bin is peerDependency now

Usage

Since JS and Flow syntax vary slightly, you will need to get rid of the type annotations.

This is where transform-flow-comments comes in. It converts flow type annotations into comments that Flow understands.

You need to follow a few simple steps.

1. Install dependencies

# Install Babel and Webpack and save as devDependencies 
npm i -D babel-core babel-loader webpack
 
# Install FBWP 
npm i -D babel-flow-webpack-plugin

2. Setup babel and flow

# setup .flowconfig 
./node_modules/.bin/flow init  or flow init
 
# .babelrc file 
{
  "plugins" : [
    "transform-flow-comments"
  ]
}

3. Setup webpack config

// webpack.config.js file
 
var FlowBabelWebpackPlugin = require('babel-flow-webpack-plugin');
 
module.exports = {
  entry: './index',
 
  output: {
    filename: 'build.js',
  },
 
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
      },
    ],
  },
 
  plugins: [
    new FlowBabelWebpackPlugin(),
  ],
}

And that's it!

From now on, when you run webpack, you will recieve flow status reports alongside your webpack build log.

Something like this.

What's next?

Nothing much, really. All I wanted was to display flow reports alongside webpack's - nothing fance.

I might add something more to it, if I find it really useful. Some options are:

• IO redirection for further logging or processing
• External file checks, i.e., files that lie outside of project's root folder

If you have something in mind, or something you want, feel free to ask.