Parcelで絶対パスを使う場合はbabel-plugin-module-resolverを使う
問題
- Parcelのdocsには相対パスによるimportのサンプルしか載っていない
import Box from ‘../../components/box’
とか書きたくない
babel-plugin-module-resolverでrootを解決する
本家のIssueより、
babel-plugin-module-resolver を使う。
Alias definition · Issue #25 · parcel-bundler/parcel
babel-plugin-module-resolver
をインストールして、pluginの設定を追加する。
.babelrc
{ "plugins": [ ["module-resolver", { "root": ["./src"] }] ] }
これでimportをsrc以下の絶対パスで書けるようになる。
例えば、 /src/components/box.jsx
をimportするには、
import Box from ‘components/box’
となる。
注意点
パスに一致する名前を持つnpm package(上の例ではcomponents)がインストールされていると、node_modules/components/box
を参照するようになり、動作しなくなる。