Parcelで絶対パスを使う場合はbabel-plugin-module-resolverを使う

React JavaScript

問題

  • 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 を参照するようになり、動作しなくなる。