エイリアスを設定して楽にimportできるようにする

Reactを書いていると、コンポーネントやReduxのstoreなど様々な単位でディレクトリを分けることになる。
分けることで、ファイル自体のコード量が少なくなったり、責務が明確になってメリットが多い。

しかし、ディレクトリをバンバン切っていくと、import時に'../../../../../Header'のような「.」地獄が発生する。
正直、相対パスでたどるのが難易度が高い。
エディタのパス補完があっても、ときどき..が多くなったり、少なくなったりして「見つからないよ」とエラーが出る。

もうたくさんなので、エイリアスを設定して楽にimportできるようにした。

Webpack

まずは、Webpackに設定する。
このように記述することで、import Something from "@/hoge/fuga/Piyo"でインポートできるようになる。
@はsrcディレクトリの同義なので、上記のimportはsrc/hoge/fugaディレクトリにあるPiyoというファイル内でexport defaultされたものをインポートしていることになる。

webpack.config.js

  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src")
    }
  },

Jest

次にテストでおなじみのJestに対する設定を行う。
テストファイルで、先程のようにimport Something from "@/hoge/fuga/Piyo"と書いても該当のファイルが見つからないとなる。
Jestがテストを実行しているときに、webpackを介していないのでエイリアスを認識できていないからだと思われる。

そこで、設定ファイルにエイリアス@が何を示しているのかを記述する。

jest.config.js

  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1"
  },

TypeScript

これがないと、VS Codeで警告が出てしまった。

tsconfig.json

{
  "compilerOptions": {
    "paths": { "@/*": ["src/*"] },
  }
}