TypeScript tsconfig-paths 톺아보기

반응형

tsconfig-paths는 TypeScript 프로젝트에서 모듈 해석과 경로 매핑을 간소화하는 라이브러리입니다. 아래는 tsconfig-paths의 설치, 설정 및 사용법, 코드로 구현하는 방법에 대한 설명입니다.

설치방법

tsconfig-paths를 설치할 때는 dev 모드로 설치합니다.

npm install tsconfig-paths --save-dev

tsconfig-paths 설정하기

• tsconfig.json에서 설정하기

아래와 같이 tsconfig.json 파일에서 paths에 alias를 설정합니다.

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

}

• tsconfig.paths.json 별도 파일로 분리하여 설정하기

별로 파일로 관리하기 위해서는 먼저 tsconfig.json 파일에서 extends를 합니다.

• tsconfig.json 파일에 설정 추가

{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    // 기타 컴파일러 옵션들...
  },
  // include, exclude, files 등 필요한 설정 추가
}

• tsconfig.paths.json 내용 추가

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"],
      "@utils/*": ["utils/*"],
      "@config": ["config/index"]
    }
  }
}

tsconfig-paths/register 옵션으로 실행하기

다음 명령에 tsconfig-paths/register를 추가하면 alias를 정상적으로 읽는 것을 확인 할 수있습니다

# ts-node 사용 시
ts-node -r tsconfig-paths/register src/index.ts

tsconfig-paths Bootstrapping하기

tsconfig-paths-bootstrap.js 생성

const tsConfigPathFile = require("./tsconfig.paths.json")
const tsConfig = require("./tsconfig.json")
const tsConfigPaths = require("tsconfig-paths")

tsConfigPaths.register({
  baseUrl: tsConfig.compilerOptions.outDir,
  paths: tsConfigPathFile.compilerOptions.paths
})

tsconfig-paths package.json 스크립트 추가

"start": "node -r ./tsconfig-paths-bootstrap.js dist/src/index.js"

• 다음에 알아볼 내용은
  • typesRoot가 적용이 안될 때 어떻게 처리하면 되는지?
  • index.d.ts 파일을 만드는 방법
  • fastify에서 플러그인 생성하는 방법

을 알아 보겠습니다.