Github 작업을 사용하여 첫 번째 Typescript npm 패키지 게시

Javascript/Typescript 개발자로서 npm 패키지를 게시하는 것을 꿈꿔 본 적이 있습니까? 그렇다면 첫 번째 npm 패키지를 게시하기 위해 수행한 단계를 안내해 드리겠습니다.

우리가 사용할 것/태클할 것들

Github 작업

엔피엠

당신이 알아야 할 것은

힘내

Git 태그

노드 JS

타자기

Github

Github 비밀

가장 먼저 할 일

github 저장소를 만들어야 합니다. 그런 다음 이를 복제하고 다음을 사용하여 노드 애플리케이션을 초기화합니다.

npm init

프로젝트를 설정한 후 다음package.json 속성을 살펴봐야 합니다.

{
  "name": "<@org_name>/<pkg_name>", // you can simply just add the package name and omit `"<@org_name>/` if you don't want to publish it into a certain organization
  "version": "1.1.2", // update this if you want to release a new version of you package
  "main": "lib/index.js", // entry point of your package
  "repository": {
    "type": "git",
    "url": "git+https://github.com/<username>/<repo_name>.git"
  },
  "keywords": ["node"],
  "author": "<your_name>",
  "bugs": {
    "url": "https://github.com/<username>/<repo_name>/issues"
  },// add these for devs/collaborators to submit an issue on your repository
  "homepage": "https://github.com/<username>/<repo_name>#readme", // add these to show the homepage of your package
  "typings": "./lib/index.d.ts" // add this to have a typescript badge in your package, this shows that your package has built in types
}

Typescript 애플리케이션 구성

다음 개발 종속성을 추가합니다.

# using yarn
yarn add -D typescript @types/node nodemon ts-node

그런 다음 tsconfig.json를 생성해야 합니다.

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "outDir": "lib",
    "moduleResolution": "Node",
    "rootDir": "./src",
    "allowSyntheticDefaultImports": true,
    "declaration": true,
    "types": ["node"],
    "esModuleInterop": true
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules/**/*",
    ".webpack/**/*",
    "_warmup/**/*",
    ".github/**/*",
    ".vscode/**/*"
  ],
  "include": ["src/*.ts"],
  "buildOptions": {
    "assumeChangesOnlyAffectDirectDependencies": false
  }
}

This configuration outputs the transpiled code from src/* folder to lib directory.

자식에서 파일 제외

또한 리포지토리에서 일부 파일/폴더를 제외해야 합니다. 그것들을 제외하려면 .gitignore 를 만들어야 합니다. 제 경우에는 무시해야 하는 다음 파일입니다.

# .gitignore
node_modules # these are the packages installed in our application
lib          # these are the transpiled output files

애플리케이션 만들기

이제 src 디렉토리 안에 파일을 만들어야 합니다.

└── src
    ├── index.ts # entry point of our application
    └── types.ts # optional

src/index.ts 안에는 이 지점을 넘어서는 아무 것도 쓸 수 있습니다. (숫자가 홀수인지 확인하는 패키지를 만들 수 있습니다 😏 이와 같이)

예를 들어, 우리는 할 수 있습니다! 💪🏽

// src/index.ts
const isOdd = (number: number): boolean => number % 2 !== 0;

export { isOdd };

패키지용 스크립트 생성

앱을 게시하기 전에 로컬에서 실행해야 합니다. dev 의 scripts 속성 내에 package.json 스크립트를 생성할 수 있습니다.

코드를 javascript로 트랜스파일할 수 있도록 빌드 스크립트도 추가해야 합니다.

"scripts": {
  "dev": "nodemon --watch \"src/**\" --ext \"ts,json\" --ignore \"src/**/*.spec.ts\" --exec \"ts-node src/index.ts\"", // dev script
  "build": "tsc -p .", // build script
}

패키지 게시

이제 첫 번째 패키지를 게시할 준비가 되었지만 가장 먼저 할 일이 있습니다.

npm profile에서 얻을 수 있는 npm 액세스 토큰을 가져와야 합니다.

다음 범위 중 하나를 선택하여 토큰을 생성할 수 있습니다.

Note: You can use automation if you wanted to bypass 2-factor authentication. It is highly recommended to use in your ci/cd

액세스 토큰을 얻은 후 이제 Github 암호에 넣을 수 있습니다.

Tip: You can find it here. https://github.com/<username>/<repo_name>/settings/secrets/actions

이제 github 작업을 사용하여 npm 패키지를 게시할 수 있습니다. 게시 작업에 이 파일yaml을 사용할 수 있습니다.

Note: In the yml file, we're going to publish a new version once there is a tag pushed into our repository

Additional note: In order to create a tag, you have to commit all the changes first in your repository. Then you have to create a tag using this command:

git tag -a <version> -m '<message>' # the tag version should match the package version which can be seen on `package.json` 

모든 것이 해결되면 다음을 사용하여 태그를 푸시할 수 있습니다.

git push --tags

ci/cd가 성공하는지 확인하기만 하면 됩니다.

Note: If anything breaks in your development, you can reference my project here https://github.com/nljms/ph-mobile-networks

이것이 첫 번째 npm 패키지를 구축하는 여정에 도움이 되기를 바랍니다. 😄