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
}