> 웹 프론트엔드 > JS 튜토리얼 > NPM에서 TypeScript 패키지를 생성하고 게시하는 방법

NPM에서 TypeScript 패키지를 생성하고 게시하는 방법

WBOY
풀어 주다: 2024-08-18 07:08:07
원래의
1163명이 탐색했습니다.

Como Criar e Publicar Pacotes TypeScript no NPM
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 패키지 구축을 시작하는 것이 어떨까요?

위 내용은 NPM에서 TypeScript 패키지를 생성하고 게시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿