Webpack, React, Typescript, Jest 환경에서 Alias 적용하기 (절대 경로 import)

 

프로젝트의 크기가 커지고 복잡해질수록 상대 경로로 module을 import하기 힘들어진다.

여기 저기 왔다 갔다 하면서 나한테 필요한 파일들을 찾아내야하는데 여간 귀찮은 일이 아닐 수 없다.

 

 

import React from 'react';
import Button from '../button';
import { exampleConfig } from '../../interface';
import { utilFunction } from '../../utils/api';
import someImage from '../../assets/img/image.png';

 

게다가 이렇게 상대 경로로 import 하다보면 어디에 있는 어떤 파일을 가져오는건지 명확하게 눈에 안들어온다.

 

그런데 절대 경로로 바꾸면 다음과 같이 바뀐다.

 

import React from 'react';
import Button from '@/components/button';
import { exampleConfig } from '@/interface';
import { utilFunction } from '@/utils/api';
import someImage from '@/assets/img/image.png';

 

이렇게 바꾸고 나면 코드만 봐도 이 어플리케이션의 구조가 다음과 같다는 것을 쉽게 유추할 수 있다.

 

├── src/

├── components/

          └── button/

├── interface/

├── utils/

          └── api/

└── assets/

          └── img/

                   └── image.png

 

 

 

그렇다면 이제 webpack, typescript, jest로 작업하고 있는 환경에서 alias 설정을 통해 

상대 경로 import를 절대 경로 import로 바꾸는 작업을 해보자!

 

 

Webpack

const path = require('path');

module.exports = {
  // ...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
    extensions: ['.ts', '.tsx', '.js', '.json'],
  },
  // ...
};

 

webpack 설정은 매우 간단하다. webpack.config.js에 resolve.alias 속성을 추가해주면 된다.

나는 src/ 경로를 @/로 바꾸도록 설정해주었다.

@ 대신 원하는 문자열 아무거나 넣을 수 있다.

 

 

 

Tsconfig

내가 엄청 삽질(?)을 했던 부분인데, 나는 alias 설정을 webpack 에만 해주면 되는줄 알았다.

그런데 VS Code에서 계속 빨간 밑줄이 안없어지고 컴파일 단계에서 계속 alias 에러가 났다..😭

그러다 결국 tsconfig에도 같은 설정을 해주어야한다는 사실을 알게 되었다...

 

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

 

tsconfig.json에 위와 같이 추가해주면 되는데,

paths property를 사용하려면 반드시 baseUrl property도 같이 써줘야한다.

 

"baseUrl": "." 는 baseUrl을 tsconfig.json이 있는 rootDir로 설정하겠다는 뜻이다.

 

 

 

Jest

tsconfig까지 설정해주면 이제 문제없이 alias 설정이 완료되지만

jest test 때 cannot fine~~ 에러가 미친듯이 뜨기 시작한다.

그래서 마지막으로 Jest 설정까지 해주어야 한다.

 

module.exports = {
  moduleNameMapper: {
    '@/(.*)$': '<rootDir>/src/$1',
  },
};

 

jest.config.js에서 moduleNameMapper 속성을 통해서 설정한다.

여기까지 해주면 이제 완벽하게 alias가 적용되어 절대경로로 Import할 수 있게 된다!

 

 

 

Ref

https://medium.com/@justintulk/solve-module-import-aliasing-for-webpack-jest-and-vscode-74007ce4adc9

Solve Module Import Aliasing for Webpack, Jest, and VSCode