とりあえずシンプルな環境でflowtypeを使ってみる - Webpackを使って自動ビルド&型チェック

  • 5
    いいね
  • 0
    コメント

最近Flowを調べているのですが、ひとまずシンプルにFlow自動ビルド環境を作りたいと思ったので、Webpackでのビルド方法を探しました。

WebpackでFlowのプラグインには「flow-status-webpack-plugin」が見つかりました。バージョン的にはまだ出来たてなのかなーと思ったものの、ひとまず触ってみたぶんには動いたようです。

公式のBabelでのインストール手順でインストールしているのを前提にしています。

1. Webpackとプラグインをインストールする

yarn add webpack --dev
yarn add flow-status-webpack-plugin --dev
yarn add babel-loader --dev
  • Webpack JavaScriptのバンドルツールです。

※ Webpackの詳しい使い方に関しては、記事「最新版で学ぶwebpack 3入門 – JavaScript開発で人気のバンドルツール」を参照ください。

  • babel-loader
    babelを実行するローダーです。

  • flow-status-webpack-plugin
    Webpackでのビルド後にFlowのステータスをチェックするものです。エラー時と成功時にそれぞれテキストメッセージを取得できます。

2. webpack.config.jsを用意する。

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

module.exports = {
  entry: './src/main.js',
  module: {
    loaders: [
      {
        // 対象となるファイルの拡張子
        test: /\.js/,
        loader: "babel-loader",
        exclude: /node_modules/
      }
    ]
  },
  output: {
    path: `${__dirname}/`, //  出力ファイルのディレクトリ名
    filename: 'bundle.js'  // 出力ファイル名
  },
  plugins: [
    new FlowStatusWebpackPlugin({
      onSuccess: function (stdout) {
        // 成功したときのログ出力
        console.log(stdout);
      },
      onError: function (stdout) {
        // 失敗したときのログ出力
        console.error(stdout);
      }
    })
  ]
};

3. package.jsonにWebpackの実行コマンドwebpack -wを追加する

{
  "name": "my-project",
  "main": "lib/index.js",
  "scripts": {
    "start" : "webpack -w",
    "build": "babel src/ -d lib/",
    "prepublish": "yarn run build"
  }
}

3. ファイルを監視してWebpackを実行するコマンドを実行する

npm run start

※ コマンドの終了は[Ctrl]+[C]を入力します。