[typescript] 타입스크립트 모듈 번들러를 사용하여 자바스크립트 코드 번들링하기

14 Dec 2023

typescript

타입스크립트는 JavaScript의 상위 집합으로 개발된 프로그래밍 언어입니다. 타입스크립트로 작성된 코드는 일반적으로 JavaScript로 변환되고 번들링됩니다.

모듈 번들러

모듈 번들러는 여러 개의 모듈(또는 파일)을 하나의 파일로 결합해주는 도구입니다. 타입스크립트 모듈 번들러를 사용하여 타입스크립트 코드를 번들링할 수 있습니다.

가장 널리 쓰이는 타입스크립트 모듈 번들러 중 하나는 Webpack입니다. Webpack은 모듈 번들링을 위한 강력한 도구로, 타입스크립트 코드뿐만 아니라 CSS, 이미지 및 기타 자원들도 번들링할 수 있습니다.

타입스크립트 코드 번들링하기

타입스크립트 코드를 Webpack을 사용하여 번들링하는 방법은 다음과 같습니다.

프로젝트 초기화: 먼저, 프로젝트 디렉토리에서 명령줄을 열고 npm init -y 명령어로 package.json 파일을 생성합니다.
타입스크립트 및 Webpack 설치: 다음으로, 타입스크립트와 Webpack을 설치합니다.
```
 npm install typescript webpack webpack-cli --save-dev
```

타입스크립트 및 Webpack 구성: 프로젝트 루트 디렉토리에 tsconfig.json 파일을 만들어 타입스크립트 구성을 추가하고, webpack.config.js 파일을 만들어 Webpack 구성을 추가합니다.

tsconfig.json:

 {
   "compilerOptions": {
     "target": "es5",
     "module": "es6",
     "outDir": "dist"
   }
 }

webpack.config.js:

 const path = require('path');

 module.exports = {
   entry: './src/index.ts',
   module: {
     rules: [
       {
         test: /\.ts$/,
         use: 'ts-loader',
         exclude: /node_modules/
       }
     ]
   },
   resolve: {
     extensions: ['.ts', '.js']
   },
   output: {
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist')
   }
 };

타입스크립트 코드 작성 및 번들링: 이제 src 폴더에 타입스크립트 코드를 작성하고, npm run build 명령어로 Webpack을 실행하여 번들링합니다.
```
 {
   "scripts": {
     "build": "webpack"
   }
 }
```

이제 타입스크립트 코드를 Webpack을 사용하여 번들링할 수 있게 되었습니다.

모듈 번들러

타입스크립트 코드 번들링하기

참고 자료