メインコンテンツにスキップ

インストール

コンパイラのセットアップ​

まず、Flowの型を取り除くためのコンパイラをセットアップする必要があります。Babel と flow-remove-types から選択できます。

Babel は、FlowをサポートするJavaScriptコード用コンパイラです。BabelはFlowコードから型アノテーションを取り除きます。プロジェクトで既にBabelを使用している場合は、Babelの使用を参照してください。（日本語のパスに修正）

まず、Yarn または npm を使用して、@babel/core、@babel/cli、@babel/preset-flow、および babel-plugin-syntax-hermes-parser をインストールします。

npm install --save-dev @babel/core @babel/cli @babel/preset-flow babel-plugin-syntax-hermes-parser

次に、@babel/preset-flow プリセットと babel-plugin-syntax-hermes-parser プラグインを使用して、プロジェクトのルートに .babelrc ファイルを作成する必要があります。

{
  "presets": ["@babel/preset-flow"],
  "plugins": ["babel-plugin-syntax-hermes-parser"],
}

すべてのソースファイルを src ディレクトリに配置した場合、次のコマンドを実行することで、別のディレクトリにコンパイルできます。

./node_modules/.bin/babel src/ -d lib/

Babelの "devDependencies" と共に、package.json スクリプトに簡単に追加できます。

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

注意: npmレジストリにコードを公開する前にこの変換を実行するために、この変換を実行する prepublish スクリプトも追加することをお勧めします。

Flowのセットアップ​

Flowは、グローバルにインストールするのではなく、明示的なバージョン管理を使用してプロジェクトごとにインストールすると、最適に動作します。

幸いなことに、npm または yarn に既に精通していれば、このプロセスは非常に馴染み深いものになるはずです。

flow-bin npmパッケージに devDependency を追加する​

npm install --save-dev flow-bin

package.json に "flow" スクリプトを追加する​

{
  "name": "my-flow-project",
  "version": "1.0.0",
  "devDependencies": {
    "flow-bin": "^0.233.0"
  },
  "scripts": {
    "flow": "flow"
  }
}

Flowを実行する​

初回は、以下を実行します。

npm run flow init
> my-flow-project@1.0.0 flow /Users/Projects/my-flow-project
> flow "init"

init オプション付きで flow を初めて実行した後、以下を実行します。

npm run flow
> my-flow-project@1.0.0 flow /Users/Projects/my-flow-project
> flow

No errors!

ESLintのセットアップ​

ESLintを使用している場合は、ESLintに関するページ（日本語のパスに修正）を読んで、Flowをサポートするように設定してください。