tomisawk's tech blog

技術的なこと(プログラミングメイン)のアウトプット場所

Flow導入手順

TODO 書きかけ

Flowをインストー

公式に従って導入する。 https://flow.org/en/docs/install/

yarn add --dev babel-cli babel-preset-flow
yarn add --dev flow-bin
yarn add --dev flow-typed
yarn run flow init

.flowconfigが生成される。生成されたら[ignore]配下に .*/nodemodules/.* を書き加える

[ignore]
.*/node_modules/.*
[include]

[libs]

[options]

.babelrcのpresetsにflowを追加。例えば以下のようになる

{
  "presets": [
    [ "es2015", {"modules": false} ],
    "react",
    "stage-2",
    "flow"
  ],
  "plugins": ["react-hot-loader/babel"]
}

※ 検索するとでてくる transform-flow-strip-types plugin は babel-preset-flow に含まれる、というか現時点ではこれだけを含んでいるので presetsにflowを追加すればそれだけでよい。

flow-typed を使うためにpackage.jsonのscriptsに

"flow-typed": "flow-typed"

を追加

Atomでの環境

Nuclideをインストールする。 設定画面で、Nuclide-Flowにある Use the Flow binary included in each project’s flow-bin を有効するとプロジェクトのflowを使うようになるので設定。

Nuclide有効にすると色々便利になるが、環境がらりと変わっちゃうっぽいのが 若干気になる。あとWindowsはフルサポートじゃないらしい。

tool-bar, language-babel, sort-lines などの推奨パッケージを入れる。