babel-plugin-module-resolver を使ってパッケージ名のエイリアスを張る + flowtype/eslint で対応する

やりたいこと

import bbb from 'aaa/bbb' の解決先を、src/aaa/bbb にしたい。

やりたくないこと

Webpackに依存したくない。Babelのレイヤーで解決したい。Babel側に寄せておけば、Webpackが腐ったときも巻き込まれずに済む。

babel-plugin-module-resolver

yarn add babel-plugin-module-resolver -D

.babelrc に追記

.babelrc

  "plugins": [
    ["module-resolver", {
      "root": ["./src"],
      "alias": {
        "aaa": "./aaa"
      }
    }]
  ]

flow

このままだとFlowが参照を解決できないので, module.name_mapper オプションで参照を変更してやる

.flowconfig

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

eslint

eslint-plugin-import の参照解決も壊れるので、次の2つのルールを無効にした。参照名が正しく解決されるかは、一旦Flow側に任せる。

rules:
  # Use flow resolver
  import/no-extraneous-dependencies: 0
  import/no-unresolved: 0

https://www.npmjs.com/package/eslint-import-resolver-babel-module-alias を使えば正しく認識できそうだが、自分の設定が悪いのか、babelと同じ設定を渡しても、うまく動かなかった。あとでちゃんと倒したい…