More than 5 years have passed since last update.

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

Posted at 2017-07-12

`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';

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

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

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

.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が入ってます。