TypeScript의 인기가 높아짐에 따라 많은 개발자는 언어가 제공하는 이점을 활용하기 위해 정적으로 유형이 지정된 패키지를 만들고 있습니다. 이번 포스팅에서는 TypeScript를 사용하여 NPM 패키지를 생성하고 게시하는 과정을 다루겠습니다.

1. 환경 구성

Node.js, NPM, TypeScript가 설치되어 있는지 확인하세요. 다음을 사용하여 TypeScript를 전역적으로 설치할 수 있습니다.

npm install -g typescript

모든 것이 올바르게 설치되었는지 확인하세요.

node -v
npm -v
tsc -v

2. 프로젝트 생성

프로젝트용 디렉터리를 만드는 것부터 시작하세요.

mkdir meu-pacote-typescript
cd meu-pacote-typescript

Node.js 프로젝트 초기화:

npm init

기본 패키지 정보를 정의할 수 있는 package.json 파일이 생성됩니다.

3. TypeScript 구성

이제 TypeScript 프로젝트를 초기화합니다.

tsc --init

그러면 tsconfig.json 파일이 생성됩니다. 필요에 따라 편집하되 일반적인 설정은 다음과 같습니다.

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "declaration": true,
    "outDir": "./dist",
    "strict": true
  },
  "include": ["src/**/*"]
}

여기에서는 CommonJS 모듈을 사용하여 ES6 코드를 생성하고 유형 선언(선언: true)을 포함하도록 TypeScript 컴파일러를 구성합니다. 컴파일된 코드는 dist.

4. 코드 작성

src 디렉터리를 만들고 그 안에 index.ts 파일을 만듭니다.

mkdir src
touch src/index.ts

index.ts 파일에 패키지 코드를 작성합니다. 문자열을 대문자로 변환하는 간단한 함수를 만들어 보겠습니다:

export function toUpperCase(str: string): string {
  return str.toUpperCase();
}

5. 코드 컴파일

TypeScript를 JavaScript로 컴파일:

tsc

이렇게 하면 dist 디렉토리에 JavaScript 파일과 유형 선언이 생성됩니다.

6. 로컬에서 패키지 테스트

패키지를 테스트하려면 다른 프로젝트에 로컬로 설치할 수 있습니다.

1. 테스트 프로젝트 디렉터리에서 다음을 실행합니다.

   npm install ../caminho-para-o-diretorio-do-seu-pacote/dist

1. 테스트 프로젝트에서 기능을 사용하십시오.

   import { toUpperCase } from 'nome-do-seu-pacote';

   console.log(toUpperCase('hello world')); // "HELLO WORLD"

이렇게 하면 JavaScript 코드와 유형 선언이 모두 올바르게 작동합니다.

7. NPM에 게시

모든 것이 올바르게 작동하면 패키지를 게시할 준비가 된 것입니다.

1. NPM 로그인

아직 NPM 계정이 없다면 계정을 만들고 로그인하세요:

   npm login

1. 출판

게시하기 전에 package.json에 빌드 스크립트를 추가하세요.

   "scripts": {
     "build": "tsc"
   }

그리고 package.json에 출력 경로를 추가합니다:

   "main": "dist/index.js",
   "types": "dist/index.d.ts"

이제 컴파일하고 게시하세요.

   npm run build
   npm publish

패키지 이름이 이미 존재하는 경우 새 이름을 선택해야 합니다.

8. 패키지 업데이트

새 버전을 게시하려면 package.json에서 버전을 변경하고 npm run build를 다시 실행한 후 게시하세요.

npm publish

9. 모범 사례

• 문서: 패키지 사용 방법을 설명하는 README.md 파일을 포함합니다.
• 테스트: 코드가 예상대로 작동하는지 확인하기 위해 Jest와 같은 프레임워크를 사용하여 테스트를 작성합니다.
• Linting: ESLint 및 Prettier와 같은 도구를 사용하여 코드 품질을 유지하세요.
• 버전 관리: SemVer를 따라 패키지 버전을 관리하세요.

결론

NPM에서 TypeScript 패키지를 생성하고 게시하면 코드 품질이 향상될 뿐만 아니라 패키지를 사용하는 사람들에게 타이핑 이점도 제공됩니다. 이 가이드를 따르면 JavaScript 및 TypeScript 커뮤니티와 솔루션을 공유하여 더욱 강력하고 탄탄한 개발 생태계에 기여할 수 있습니다.

이제 프로세스를 알았으니 다음 TypeScript 패키지 구축을 시작하는 것이 어떨까요?