본 문서에서는 타입스크립트와 Babel을 사용하여 프로젝트를 구성하는 방법에 대해 설명합니다.

1. 프로젝트 디렉토리 구조

프로젝트를 구성하기 전에 기본적인 디렉토리 구조를 설정해야 합니다. 보통 다음과 같은 구조를 가집니다.

project
├── src
│   └── index.ts
├── dist
├── node_modules
├── package.json
├── tsconfig.json
└── babel.config.json

위와 같이 src 디렉토리는 소스코드를 저장하는 곳이고, dist 디렉토리는 트랜스파일된 파일을 저장하는 곳입니다. 그리고 package.json은 프로젝트 정보와 의존성을 관리하는 파일이며, tsconfig.json은 타입스크립트 설정 파일, babel.config.json은 Babel 설정 파일입니다.

2. 타입스크립트 설정

프로젝트 루트 디렉토리에 tsconfig.json 파일을 생성하고 다음과 같이 설정합니다.

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  }
}

여기서 outDir은 트랜스파일된 파일이 생성될 경로를 지정하는데, 이는 Babel과 연동하기 위함입니다.

3. Babel 설정

이어서 Babel 설정 파일을 생성합니다. 프로젝트 루트 디렉토리에 babel.config.json 파일을 만들고 아래와 같이 설정합니다.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ],
    "@babel/preset-typescript"
  ]
}

4. 필요한 패키지 설치

위 설정을 위해 필요한 패키지들을 설치해야 합니다. 이를 위해 다음 명령어를 실행합니다.

npm install typescript @babel/core @babel/preset-env @babel/preset-typescript --save-dev

5. 스크립트 추가

package.json 파일의 scripts 항목에 다음과 같이 빌드 스크립트를 추가합니다.

{
  "scripts": {
    "build": "tsc && babel src -d dist"
  }
}

이제 npm run build 명령어로 타입스크립트와 Babel을 함께 사용하여 프로젝트를 빌드할 수 있습니다.

이상으로 타입스크립트와 Babel을 사용한 프로젝트 디렉토리 구성 방법에 대해 알아보았습니다.

참고 문헌: 타입스크립트 핸드북, Babel 공식 문서