[TS] 모듈 import 경로에 별칭 사용하기(VS Code)

Typescript나 Javascsript를 사용할 때 디렉토리 계층이 깊어질수록, 다음과 같이 지저분한 import 문의 경로를 경험할 수 있다.

모듈의 경로를 표현할 때 사용자의 개발환경에 의존적인 절대경로가 아닌, 현재 스크립트 파일을 기준으로 한 상대 경로가 사용되기 때문에 이와 같은 경로가 된다.

이런식으로 표현된 경로들은 다음과 같은 문제점이 있다.

• 프로젝트의 루트 경로를 기준으로 어느 경로에 있는 모듈인지 파악하기가 힘들다.
• 현재 파일의 경로가 바뀌면 import 문의 모듈의 경로를 바뀐 경로를 기준으로 다시 작성해 주어야 한다.

하지만 타입스크립트의 tsconfig를 조금만 수정하면 프로젝트의 루트 경로를 기준으로 절대경로로 표현할 수 있다.

이때 이 절대경로를 별칭(alias)라고 부른다.

VS Code 설정

VS Code는 import 구문이 정의되지 않은 모듈이나 모듈 변수를 사용할 때 인텔리센스를 통해 import 구문을 자동완성해준다.(IDE에 이 기능 없으면 코딩 못한다)

우선, 다음 두 가지 방법 중 하나로 VS Code가 자동완성 시켜주는 경로를 절대경로로 완성해주게 설정을 바꾼다.

• cmd(ctrl) + shift + p 를 눌러서 VS Code의 설정 파일인 settings.json을 열어 다음 설정 값을 추가한다.

{
    "typescript.preferences.importModuleSpecifier": "non-relative"
}

또는

• cmd(ctrl) + , 키나 (Mac OS 기준)Code > Preferences > Settings 로 설정 탭을 연 다음, Typescript > Preferences: Import Module Specifier 설정을 non-relative로 바꾼다.

tsconfig 설정

이제 타입스크립트 컴파일러가 절대 경로로 작성된 모듈 경로를 이해할 수 있게 tsconfig.json에 다음 두 값을 추가해준다.

tsconfig.json

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

• "baseUrl" - 타입스크립트 컴파일러가 모듈을 찾을 때 기준이 될 경로(paths가 있는 경우 필요)
• "paths" - key로는 별칭으로 정한 경로를, value로는 baseUrl에 정의한 경로 기준 실제 모듈의 위치를 넣어준다.

테스트

VS Code가 import 모듈 경로를 별칭으로 자동완성 시켜주는지 확인해보자.

상대경로로 자동 완성되던 모듈 경로가 tsconfig.json의 baseUrl에 적은 경로를 기준으로 별칭으로 자동 완성되는 것을 확인할 수 있다.

하지만 tsc 명령어로 컴파일된 js파일을 실행할 때 별칭으로 작성된 모듈 경로가 그대로 적용되기 때문에 모듈 경로를 불러올 수 없다는 오류가 난다.

tsc 컴파일 후

Error: Cannot find module 'src/users/domain/user.entity'

babel

수동으로 모듈의 경로를 일일이 바꿔줄 수는 없으니 babel과 module-resolver라는 플러그인의 힘을 빌리도록 하자.

플러그인을 설치해주고, .babelrc 파일에 특정 별칭을 어떤 경로로 트랜스파일 해줄지 정의해주자.

.babelrc

{
  "plugins": [
    [ "module-resolver", {
        "alias": {
          "src": "./dist"
        }
      }
    ]
  ]
}

 

babel로 트랜스파일 된 모듈 경로는 다음과 같고, 문제없이 실행이 되는 것을 확인할 수 있다.

package.json에 tsc 컴파일과 babel 트랜스파일을 한번에 할 수 있는 명령어를 추가해두면 편하다.

package.json

{
  "scripts": {
    "build": "tsc -P ./tsconfig.json && babel dist -d dist"
  }
}

ts-node

ts-node를 통해서 코드를 실행한다면 tsconfig-paths라는 라이브러리가 필요하다.

npm i -D tsconfig-paths

ts-node를 사용할 때 -r tsconfig-paths/register옵션을 주면, 경로에 별칭이 사용된 ts파일을 실행할 수 있다.

ts-node -r tsconfig-paths/register main.ts

jest

테스트 코드에 별칭 통한 모듈 경로가 사용된 경우에는 package.json에 moduleNameMapper 설정을 추가해줘야 모듈을 불러올 수 있다.

package.json

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

References

• https://if1live.github.io/posts/use-absolute-path-in-typescript/
• https://www.daleseo.com/js-babel-resolver
• https://www.typescriptlang.org/tsconfig