Help us understand the problem. What is going on with this article?

絶対パスでモジュールを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/*"]
    }
  }
}

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away