webpack, typescript, jest, storybook의 path alias 적용하기

 

 

 

프로젝트가 복잡해질수록, import 경로가 복잡해지는 경우가 있다.

import "../../../../../../component/App";

이렇게 되면, 제 3자가 봤을때 폴더의 구조를 파악하기도 힘들 뿐더러, ../ 문에 오타가 있을시에 수동으로 찾아나가는 수 밖에 없다.

 

그래서 필요한 것이 path aliasing이다.

 

path aliasing은 특정 경로에 이름을 부여하여 그것을 path로 사용할 수 있다.

예를들어서, "@"를 "/src" 으로 지정해줄 수 있고, 갯수나 유형은 마음대로 가능하다.

 

그럼 이렇게 만들 수 있을 것이다.

import "@/component/App";

 

이제한번 "@"를 "/src"로 path alias 해보는 실습을 해보자.

 

1. webpack 설정

webpack.config.js에 다음과 같은 코드를 추가한다.

 

// webpack.config.js

const path = require("path");

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

 

resolve에 alias를 추가하면된다.

 

 

2. tsconfig 설정 (typescript 사용하지 않으면 할필요없다.)

1번까지 완료했다면, webpack 빌드나 실행은 잘될것이지만, ide에서 엄청난 빨간줄을 뱉어낼 것이다.

이를 위해서 typescript도 설정해주자.

 

// tsconfig.json

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

 

3. jest 설정 (jest 사용안하면 불필요)

이제는 테스트 프레임워크에도 적용을 해주어야 한다.

여기서는 jest를 예제로 들지만, cypress 같은 것을 사용할때에도 비슷한 설정이 필요하다.

 

// jest.config.json

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

 

4. storybook 설정 (storybook 사용안한다면 불필요)

 

// .storybook/main.js

const path = require("path");

module.exports = {
...
  webpackFinal: async config => {
    config.resolve.alias["@"] = path.resolve(__dirname, "../src/");
    return config;
  }
};

 

https://im-developer.tistory.com/186