flow-babel-webpack-plugin

    1.1.1 • Public • Published

    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.


    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 flow-babel-webpack-plugin

    2. Setup babel and flow

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

    3. Setup webpack config

    // webpack.config.js file
     
    var FlowBabelWebpackPlugin = require('flow-babel-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.

    Options

    It should work pretty well with the defaults, but there are some options available:

    warn

    If you'd prefer to treat Flow issues as webpack warnings instead of errors, you can enable this option.

    plugins: [
      new FlowBabelWebpackPlugin({
        warn: true,
      }),
    ],
    formatter

    You can provide your own error message formatting function in order to customize the output.

    For example:

    plugins: [
      new FlowBabelWebpackPlugin({
        formatter: function (errorCode, errorDetails) {
          return 'A Flow error was detected: ' + errorCode + '\n\n' + errorDetails;
        },
      }),
    ],

    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.

    Install

    npm i flow-babel-webpack-plugin

    DownloadsWeekly Downloads

    3,471

    Version

    1.1.1

    License

    ISC

    Last publish

    Collaborators

    • zhirzh