5분 TypeScript NPM 패키지

소개

개발자로서 우리는 새로운 프레임워크를 만들거나 재사용 가능한 구성 요소, 기능 등을 패키징하고 싶을 수 있습니다.
JavaScript 개발자로서 NPM이 있기를 바랍니다!

또한 TypeScript을 사용하여 Javascript 위에 보안 계층을 추가하고 고급 OOP 디자인을 추가할 수 있습니다.

그렇다면 다음에서 사용할 수 있는 NPM 패키지를 만드는 것은 어떻습니까?
JavaScript 프로젝트이지만 가장 중요한 것은 Typescript 프로젝트입니까?

Monisnap에서 어떻게 하는지 봅시다!

시작하기

(NodeJS와 Typescript가 설치되어 있다고 가정합니다.)

먼저 새 폴더를 만들고 터미널 탭을 열고 다음을 입력합니다.

npm init -y

이것은 기본적으로 몇 가지 기본 옵션으로 package.json을 생성하여 npm 패키지를 초기화합니다(나중에 다시 설명하겠습니다).

그리고

tsc --init

또한 TypeScript 코드를 처리하는 방법을 정의하는 중요한 옵션을 포함하는 tsconfig.json을 생성하여 TypeScript를 사용하도록 프로젝트를 초기화합니다.

이제 다음이 있어야 합니다.



좋은 ? 다음 !

이제 우리는 몇 가지 코드를 작성할 수 있습니다 :)

"src"폴더와 그 안에 "index.ts"및 "unicorn.ts"두 개의 파일을 만듭니다(네, 저는 유니콘을 좋아합니다)

unicorn.ts

export class Unicorn {
  public sayHelloTo(name: string): string {
    return `🦄 Hello ${name} !`;
  }
}

index.ts

export * from "./unicorn";

이제 tsconfig.json을 편집해야 합니다(다음을 복사/붙여넣기).

{
  "compilerOptions": {
    "declaration": true,
    "strictNullChecks": true,
    "target": "es5", 
    "outDir": "dist",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "lib": ["es2015", "dom"],
    "rootDir": "src"
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

중요한 옵션을 다루겠습니다.

선언: 타이핑을 생성하도록 TypeScript에 지시합니다(코드에 대한 "자동"문서를 원하는 경우 중요합니다

.

대상: ES 대상 버전 지정(여기서는 nodeJS를 대상으로 하기 때문에 ES5를 선택했습니다)

outDir: 컴파일된 파일 대상

모듈/모듈 해상도: NodeJS의 모듈 시스템으로 commonJS/nodeJS를 사용합니다

.

sourceMap: 소스 맵이 Typescript 코드를 직접 디버그할 수 있도록 하려면 중요합니다

.

rootDir: 코드가 있는 루트 폴더입니다.

이제 package.json을 편집할 수 있습니다.

{
  "name": "unicorn-says-hello-world",
  "version": "1.0.0",
  "description": "A unicorn that says hello world",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "tsc",
    "prepare": "npm run build"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/monisnap-jason/unicorn-says-hello-world.git"
  },
  "keywords": [],
  "author": "monisnap-jason",
  "license": "ISC"
}

다시 중요한 옵션:

이름: NPM의 패키지 이름

main: 진입점( 코드가 dist 폴더에서 컴파일됨 )

유형: 코드 입력 경로

파일: 패키지에 포함하려는 파일

스크립트:

빌드: 코드를 컴파일하는 tsc

준비: 게시하기 전에 명령을 실행하는 NPM 후크입니다.
npm(위의 빌드 명령을 실행하라고 지시함)

저장소: 패키지 코드를 보유하는 저장소에 대한 옵션

또한 .gitignore 파일이 필요합니다(리포지토리에 일부 폴더를 포함하지 않으려는 경우).

\dist
\node_modules

마지막으로 README.md을 만들어 패키지 사용 방법을 전 세계에 알릴 수 있습니다.

거의 끝났습니다!

이제 마지막 손질:

npm publish

터미널 출력에서 ​​다음을 볼 수 있습니다.
"+ [email protected] "

패키지가 켜져 있습니다NPM.
여기 참조 용 내 것이 있습니다 unicorn-says-hello-world

이제 새 패키지를 사용하려면 새 프로젝트나 기존 프로젝트에 npm install unicorn-says-hello-world가 필요하며 다음과 같이 사용할 수 있습니다.

질문이 있으시면 아래에 댓글을 달아주세요!

좋은 하루 되세요 :)