Reactプロジェクトでどうしても相対パスが長くなってしまう問題をwebpackのaliasで解決する

Reactプロジェクトでどうしても相対パスが長くなってしまう問題をwebpackのaliasで解決する

Reactに限らずですが、importするときに相対パスだとどうしても長くなっていますケースがあります。そんなときにwebpackのaliasを使うといい感じに解決できるのでご紹介します。

Ads

環境

  • macOS Sierra (10.12.4)
  • webpack2.3.3

ディレクトリの構成

下記はReact + Reduxのプロジェクトで、componentsの構成にAtomicデザインを採用したものです。以前の記事のReact + ReduxのプロジェクトにAtomic DesignとImmutable.jsを使ったらいい感じになった話 | ichimaruni-designでその辺は説明していますので、合わせてご覧ください。

adminuserそれぞれ独立したサービスを作るプロジェクトなんですが、共通で使うcomponentsに関してはcommonから使うという感じです。

└── web
    ├── admin
    │   ├── node_modules
    │   └── src
    │       ├── containers
    │       │   ├── organisms
    │       │   └── pages
    │       └── redux
    │       ├── modules
    │       └── records
    ├── common
    │   ├── node_modules
    │   └── src
    │      ├── components
    │      │   ├── atoms
    │      │   └── molecules
    │      ├── constants
    │      ├── redux
    │      ├── styles
    │      │   ├── core
    │      │   ├── foundation
    │      │   └── utility
    │      └── utils
    └── user
        ├── config
        ├── node_modules
        ├── public
        └── src
            ├── containers
            │   ├── organisms
            │   └── pages
            └── redux
                ├── modules
                └── records

階層が深くなりすぎて面倒臭くなる

上記のような場合、adminusercommonのファイルを使いたいことが頻繁におきます。普通に相対パスで書くとなるとめちゃくちゃ長いパスになってしまいますよね。

import Button from '../../../../common/components/atoms/button'

エイリアスの設定

webpackを使っているのならば、aliasの設定でパスの記述を大幅に省略することができます。

var path = require('path');

module.exports = {
  // 省略
  resolve: {
    alias: {
      common: path.join(__dirname, '../common/src'),
      utils: path.join(__dirname, '../common/src/utils'),
      atoms: path.join(__dirname, '../common/src/components/atoms'),
      molecules: path.join(__dirname, '../common/src/components/molecules'),
      organisms: path.join(__dirname, './src/containers/organisms')
    }
  },
  // 省略
}

呼び出し方法

import Button from 'atoms/button'

まとめ

結構簡単にaliasの設定ができますね。これでいちいち相対パスでimportしなくてもすみます。

参考

いいなと思ったらシェアお願いします

Ads
ページの先頭へ