Posted at

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

More than 1 year has passed since last update.


はじめに

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にアップしているサンプルプログラムをそれぞれみてください。