[npm] TypeScript 함수 및 타입 배포 준비

[npm] TypeScript 함수 및 타입 배포 준비

이번 게시글에서는 구현한 함수와 타입을 빌드해보도록 하겠습니다.
추가로 배포하기 전 정상 동작하는 지 테스트 하는 방법도 알아보도록 하겠습니다.

tsup 설치 및 설정

빠르고 간단하게 번들링을 해주는 tsup package 를 이용해보도록 하겠습니다.
아래 명령어를 이용하여 설치해주시면 됩니다.

npm install tsup --save-dev

최상단에 tsup.config.ts 파일을 생성 후 아래 코드를 복사 붙여넣기 합니다.
tsup에 관한 설정 값입니다.

속성에 대한 자세한 정보는 하단 참고문헌 링크를 확인해보세요.

// tsup.config.ts

import { defineConfig } from "tsup";

export default defineConfig({
  format: ["cjs", "esm"],
  entry: ["./src/index.ts"],
  dts: true,
  shims: true,
  skipNodeModulesBundle: true,
  clean: true
});

빌드를 위해 package.json을 수정해주겠습니다.
아래 코드를 추가(merge)해줍니다.

기존에 작성된 package.json 코드를 대체하는 것이 아닌 추가를 해주셔야 합니다.
최종 package.json 코드는 하단 github 링크에서 확인하시면 됩니다.

"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"scripts": {
  "build": "tsup"
}

이제 빌드만 하면 됩니다.
아래 명령어를 입력하여 빌드를 합니다.

npm run build

build가 정상적으로 실행이 되었다면 dist 파일이 생성되었을 것입니다.

배포 전 테스트

해당 함수와 타입을 npm 배포 전 정상 동작하는 지 확인하고 싶을 수 있습니다.
이 경우 dist 폴더의 위치를 확인합니다.
pwd 명령어를 사용하면 현재 위치를 확인할 수 있습니다.

pwd 명령어 결과를 /Users/codiving/ts-function 이라고 가정하겠습니다.

테스트를 위한 프로젝트를 생성 후 아래 명령어를 입력해줍니다.

npm install {pwd 결과}
npm install /Users/codiving/ts-function

위처럼 설치 명령어를 입력 후 해당 함수들이 잘 import 되는 지 확인하시면 됩니다.

이번 게시글에서는 tsup package를 이용하여 프로젝트 빌드를 해보았습니다.
추가로 npm 배포 전 빌드된 파일을 테스트 하는 방법도 확인해보았습니다.

혹시 따라오지 못 하신 분은 아래 github 주소를 확인해보세요.
해당 소스코드 : 이동하기

다음 게시글에서는 npm에 배포를 해보겠습니다.

참고문헌

• tsup