TypeScript、Jest、Webpackでimportの際、aliasを使えるようにする

モジュールをimportする際にパスが長くなる場合、aliasを使うことがあります。Node.jsの開発でTypeScriptでソースコードを書いて、Jestでテストして、Webpackでバンドルしてデプロイしている人も多いと思います。aliasの設定は各々の設定ファイルでする必要があります。また書き方がそれぞれ違います。

仮にプロジェクトのルートディレクトリを<rootDir>とします。<rootDir>/dir1/dir2/dir3以下のhoge.tsをimportする時、以下のようにディレクトリを~/dir3で省略したいとします。

import {hoge} from "~/dir3/hoge"

TypeScriptのtsconfig.jsonの場合

pathsに書きます。これは直感的でわかりやすいです。

{
   "compilerOptions": {
     "paths": {
       "~/dir3/*": [
         "./dir1/dir2/dir3/*"
       ]  
     }

Jestのjest.config.jsの場合

こちらは正規表現になります。また<rootDir>を明示的に書きます。

module.exports = {
  moduleNameMapper: {
    '^~/dir3/(.*)$': '<rootDir>/dir1/dir2/dir3/$1'
  }

WebPackのwebpack.config.jsの場合

path.resolveを使います。

const path = require('path');

module.exports = {
   resolve: {
       alias: {
           "~/dir3": path.resolve(__dirname, "./dir1/dir2/dir3")
       }

ちなみに<rootDir>を~で指定できるようにしたいだけの場合は以下の通り。

const path = require('path');

module.exports = {
   resolve: {
       alias: {
           "~": __dirname
       }