Reactで開発してるときに、require(import)を相対パスで書くのが面倒だから絶対パスで書くには的なお話

Reactを使ってるとrequire(import)を多用するわけで。
ただ面倒なのが相対パスで書くっていう感じのこと。
これをやるとComponentが深いところにあるとかそういうときに、../../../とかかなり書かないといけないっていう。

ということで今日はこの相対パスを絶対パスで書くには的なお話をば。
ちなみに前提としてwebpackを使っていることが条件。

ということでとりあえず早速webpackの設定をば。
フォルダ構成もついでに。

フォルダなど

actions/
components/
containers/
 - foo/
    - bar/
       - index.js
 - hoge/
    - index.js
reducers/
config/
 - webpack.config.js
package.json

config/webpack.config.js

var webpack = require('webpack');
var path = require('path');

module.exports = {
  ...
  resolve:{
    alias:{
      containers:path.resolve("./","containers"),
      components:path.resolve("./","components"),
    }
  }
}

resolve.aliasというのを追加してあげればよい。
ちなみにpath.resolve("./")を使うと、設定にもよるがpackage.jsonのディレクトリをさす。
なのでpackage.jsonと同階層にcontainers/やらcomponents/やらが置いてあればよい。

ということでimportする例としてはこんな感じになる。

containers/foo/bar/index.js

// containers/hoge/index.jsをimportする例

// 絶対パス
import hoge from 'containers/hoge/index.js';

// 相対パス
import hoge from '../../hoge/index.js';

ってな感じでやってあげれば相対パスから絶対パスに書き換えることができる。
ただ/から書くわけじゃないから絶対パスっていうのが感覚的に伝わりにくいかもしれないのが問題ではあったりするが。

大規模な開発になると階層が深くなるわけで。
さらにファイル構成をやっぱ変更しようとかなると相対パスで書いているとかなり面倒なことになってしまうので、
こういう形で書いてあげることで開発もしやすいし見やすくもなるんじゃないか的なみたいな。