Webpackでビルドするときにflowtypeで型をチェックする

flowを導入して型のチェックがされるようになっても、開発者がエディタで設定していなかったり、 エディタによっては開いていないソースはチェックの対象になっていなかったりします。

これではせっかく導入したflowが活かせません。

そこでWebpackでビルドと同時にflowの型チェックを走らせてみます。

プラグインの導入

flow-status-webpack-pluginを使用してビルド時にチェックします。

インストールします。

yarn add flow-status-webpack-plugin --dev

あとはwebpack.config.jsに設定を追加すれば完了です。
このファイルは環境によっては異なる場合があるので適宜読み替えてください。

var FlowStatusWebpackPlugin = require('flow-status-webpack-plugin');

module.exports = {
  ...,
  plugins: [
    ...,
    new FlowStatusWebpackPlugin({
      onSuccess: function (stdout) {
        console.log('\u001b[32m' + 'Succeeded in type check by flow' + '\u001b[0m');
      },
      onError: function (stdout) {
        console.log('\u001b[;41m' + ' Failed in type check by flow ' + '\u001b[0m');
        console.error(stdout);
      }
    })
  ]
}

補足

\u001b[32mなどはコンソールの出力に色をつけています。
成功したときは緑、失敗したときは赤になっています。

開発者に認識してもらうことが目的なので、このようなちょっとしたことも大切ですね。