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.