Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@standard-software

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What are the problem?