Edited at

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

More than 1 year has passed since last update.


やりたいこと

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と同じ設定を渡しても、うまく動かなかった。あとでちゃんと倒したい…