[typescript] 웹팩으로 타입스크립트 라이브러리 번들링하기

11 Dec 2023

typescript

웹팩(Webpack)은 모듈 번들러로, 프론트엔드 개발에서 자바스크립트나 타입스크립트 등 여러 모듈을 번들링하여 하나의 파일로 만들어줍니다. 여기서는 웹팩을 사용하여 타입스크립트 라이브러리를 번들링하는 방법에 대해 알아보겠습니다.

1. 프로젝트 초기화

먼저 새로운 디렉토리를 만들고 package.json 파일을 생성합니다.

mkdir my-library 
cd my-library
npm init -y

그리고 필요한 패키지를 설치합니다.

npm install webpack typescript ts-loader --save-dev

2. 타입스크립트 설정

타입스크립트 설정 파일(tsconfig.json)을 생성하고 필요한 설정을 추가합니다.

{
  "compilerOptions": {
    "outDir": "./dist/",
    "declaration": true,
    "declarationMap": true
  }
}

3. 웹팩 설정

프로젝트 루트에 webpack.config.js 파일을 생성하고 다음과 같이 설정합니다.

const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-library.js',
    library: 'myLibrary',
    libraryTarget: 'umd',
    globalObject: 'this'
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  }
};

4. 라이브러리 작성

src/index.ts 파일에 라이브러리 코드를 작성하고 모듈을 내보냅니다.

export function greet(name: string): string {
  return `Hello, ${name}!`;
}

5. 번들링

이제 웹팩 명령어를 사용하여 타입스크립트 라이브러리를 번들링할 수 있습니다.

npx webpack

6. 결론

이제 dist/my-library.js 파일에 번들링된 타입스크립트 라이브러리가 생성됩니다. 이 파일을 웹 애플리케이션에서 사용할 수 있고, 타입 정보도 함께 제공됩니다.

위와 같이 웹팩을 이용하여 타입스크립트 라이브러리를 번들링할 수 있습니다. 이를 통해 라이브러리를 쉽게 공유하고 타입 안정성을 유지할 수 있습니다.