webpack.resolve.aliasを設定しているプロジェクトでの.flowconfig設定

webpack.resolve.aliasとは

こんな内容のファイルがあるとして

import Foo from '../../components/foo';

ここから../../を取る去ることができます。

例えばこんな感じで設定しているとすると、上記はpath.join(__dirname, 'src/js/components/foo')をファイルを読んでくれるようになります。

webpack.config.js

//...
  resolve: {
    alias: {
      components: path.join(__dirname, 'src/js/components')
    }
  },
//...

つまり、このように書き換えることができます。

import Foo from 'components/foo';

.flowconfigでも同じように設定する

ただ、flowも使っているプロジェクトの場合、ただ単にこのようにしてしまうと、「は💢 components/fooなんてね～ぞ」と怒られます。

/* @flow */
import Foo from 'components/foo'

WebpackとFlowは別物なのでしょうがないです。ごめんなさい。

FlowにもAliasなPathを教える

.flowconfigの[options]テーブルの中でmodule.name_mapper
というのを設定してあげます。これは、左側の正規表現でマッチした部分を右で解決するようにお願いしてます。
例えば、上記のWebpackと同じようにするにはこう書けば良いです。

.flowconfig

#...
[options]
module.name_mapper='^components/\(.*\)$' -> '<PROJECT_ROOT>/src/js/components/\1'
#...

こんな感じ.js

'components/foo'.replace(
  /^components\/(.*)$/,
  "<PROJECT_ROOT>/src/js/components/$1"
);

設定後、flowが通ればちゃんとできてますね。\(の辺りとかタイプミスし易いので注意すると良いと思います。
ちなみに、<PROJECT_ROOT>は.flowconfigの置かれてるディレクトリまでのPathが入ってます。