flow-webpack-plugin

A webpack plugin allowing to call Flow type checker during each webpack compilation.

Key features

• It doesn't require flow to be in $PATH.
• No dependencies. Plugin can reuse project's flow-bin installation.
• It can make webpack to exit with non-zero return code, if flow validation fails.
• It works per project, not per file.

Installation

Run in you project directory:

npm install --save-dev flow-webpack-plugin flow-bin

or using yarn:

yarn add flow-webpack-plugin flow-bin --dev

Add to your webpack configuration file webpack.config.js:

const FlowWebpackPlugin = require('flow-webpack-plugin')

module.exports = {
    plugins: [
        new FlowWebpackPlugin(),
        // ...
    ],
    // ...
}

Note: flow-bin package is not a hard dependency. If flow is already installed on your system, it can be reused through flowPath option.

Demo project illustrates integration of Webpack, Flow and Babel using this plugin.

Screenshots

Valid codebase:

Flow validation error:

Configuration

Constructor of FlowWebpackPlugin accepts optional configuration object of following properties:

const FlowWebpackPlugin = require('flow-webpack-plugin')

new FlowWebpackPlugin({
    failOnError: false,
    failOnErrorWatch: false,
    reportingSeverity: 'error',
    printFlowOutput: true,
    flowPath: require.main.require('flow-bin'),
    flowArgs: ['--color=always'],
    verbose: false,
    callback: (result) => {}
})

Type annotations strip

This plugin performs type validation of the code. To remove the Flow type annotations and create pure Javascript code babel-plugin-transform-flow-strip-types can be used.