FlowType 最小構成のビルド環境 Babel WebPack


はじめに

JavaScript で型チェックできる FlowType (flow) を使ってみています。

React/Reduxなどと同時に使用されることが多いようなので、ビルド構成がReact/Reduxも含んだものになっていることが多いようなのですが、

FlowTypeだけを学ぶために、Flowを導入するためのシンプルな最小構成のビルド環境を整えてみました。

GitHub

FlowType と Babel のコマンドで変換したサンプル
FlowType と Browserify Babelity で変換したサンプル
FlowType と WebPack で変換したサンプル

あわせてGitHubでダウンロードできるようにしておきました。

standard-software/FlowType_Sample
https://github.com/standard-software/FlowType_Sample

インストール

ダウンロードした各フォルダ

01_flow_babel
02_flow_babel_browserify
03_flow_babel_webpack

それぞれをカレントにして次のコマンドを入力すると、Package.json に記載している内容にしたがって、必要なモジュールをダウンロード・インストールしてくれます。

npm install

あとは、それぞれのフォルダの run_flow.batを動かしてみてください。
そうすると型チェックが行われます。

ビルド方法

各フォルダの、run_build_*.bat を動かしてみると、.\build\build.js が作成されて、index.html と build.js とでプログラムが動作します。

これは、WEB用のプログラムですが、console.log に内容を出力しているだけです。

Babel の設定は、.babelrc
FlowType の設定は、.flowconfig にかかれています。
Browserify や WebPack の設定は、GitHubにアップしているサンプルプログラムをそれぞれみてください。