絶対パスでモジュールをimportする

jsを書いているとき、importで相対パスを利用していると階層が深くなるにつれて汚くなってしまいます。

import Header from '../../../../components/Header'

すごい気になるので、絶対パスで書きたいが、npmモジュールにするのはめんどくさいよとなったので、
その時のTIPSです。

package.jsonを利用する方法

プロジェクトルートからの絶対パスとしたいときは単純に
package.jsonのnameを指定すれば、そこから絶対パスで利用できます。

// package.json
{
  "name": "utoniq",
  //...
}

// index.js
import Header from 'utoniq/app/components/Header'

babel-module-resolverを利用する方法

私のプロジェクトでは、git submoduleでルートフォルダ直下に
共通コンポーネントの置き場所を作っています。

今後npmモジュールとしてまとめて管理したいので、lernaでinitしてmonorepo構成にしています。

# ex)
- utoniq-base
    - packages
        - components
        - models

この構成の場合、プロジェクトルートの絶対パスを利用しても、あまりきれいにならないので、
babel-module-resolverを利用します。

//.babelrc

{
  "presets": ["react-native"],
  "plugins": [
    ["module-resolver", {
      "alias": {
        "@utoniq": "./utoniq-base/packages"
      }
    }]
  ]
}

このようにすると、きれいにimportすることができます。

import { Header } from '@utoniq/components'

相対パス嫌だなあと思ったらぜひ利用してみてください！

PS. パスが上手く解決できない

react-native run-iosで実行してもパスが上手く解決できないとき、
react-native start --reset-cacheなどを実行すると参照をうまく解決できます。

PS.2 コードの補完を有効にする

webstormなど、intelliJでは上記の方法での補完は現在サポートされていないようです。
Visual Studio Codeではjsconfigを利用すれば解決できます。

//jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@utoniq/*": ["./utoniq-base/packages/*"]
    }
  }
}