Reactで絶対パスによるimportを使いたい

コンポーネントが深くなるとパスが読みづらい

ecmascriptでは外部ファイルを取り込む際に相対パスを指定します。

ただ、コンポーネントの階層が深くなるに連れて相対パスがわかりづらくなるので、絶対パスが使えればと思うケースも出てきます。

 -import Error from './../containers/ErrorContainer';
 -import Loader from './../containers/LoaderContainer';
 -import locale from './../libs/Locale';
 -import DevTools from './../DevTools';

　　↓　↓　↓

 +import Error from 'jsx/containers/ErrorContainer';
 +import Loader from 'jsx/containers/LoaderContainer';
 +import locale from 'jsx/libs/Locale';
 +import DevTools from 'jsx/DevTools';

babel-plugin-module-resolverを使う

Babelifyの際にパスを解決できれば絶対パスも利用可能です。 それを実現するライブラリがこちら。

www.npmjs.com

利用方法

npmでインストール

npm install -S babel-plugin-module-resolver

/.babelrcファイルに設定

{
  "plugins": [
    "transform-inline-environment-variables",
    ["module-resolver", {
      "alias": {
        "jsx": "./jsx", // componentを置くディレクトリを絶対パス化
      }
    }]
  ]
}

aliasとしてディレクトリ名を登録できるので、相対パスもそのまま利用できます。 npmパッケージと被らない名称であれば複数aliasを増やせます。

eslintも通したい

Babelで解決させた後はeslintでもパスを許容するよう修正します。 eslint-import-resolver-babel-moduleを利用するのが便利です。

www.npmjs.com

利用方法

npmでインストール

npm install -S eslint-import-resolver-babel-module

/. eslintrcファイルに設定

{
    "settings": {
        "import/resolver": {
            "babel-module": {}
        }
    }
}

これで絶対パスもlintが通るようになります。

ただ、VSCodeなどでタグジャンプなどを利用している場合、うまく動かなくなる可能性があります。こちらについては別途プラグインなどを調査中です。（見つかったら加筆します）