10분만에 npm cli 명령어로 자기소개하기

프론트업계에서 유명하신분인 jbee님의 깃헙을 들어가보면 아래의 명령어만 적혀있다. 

이 명령어를 터미널에 쳐보니 깃헙링크, 블로그링크가 나왔다.

 

넘 신기...!

 

그래서 나도 나를 소개할수있는 cli 명령어를 만들어보려고한다! 

npx dohye1

 

 

요즘 넘 바빠서 개인공부를 거의 못했는데, 이번주는 여유가 생겨서 후딱 만들어볼거임!!

 

방법을 정리하면서 만들어보겠다

1. 참고자료를 찾아보기

사실 나는 리액트 프로젝트 보일러 플레이트를 설치할때도 npx create-react-app ~ 이런식으로 명령어를 입력했었는데, 

그냥 별생각없이 터미널에 따라쳤었을뿐 막상 만들려고하니 어떤 키워드로 구글링해야할지 감이 잘 안잡혔다..ㅠㅜ

그래도 npx 명령어만들기, how to make npx command 뭐 이런식으로 검색해보니 참고할만한 자료들이 몇개 나왓다.!!!!

https://dkrnfls.tistory.com/183

npm 만드는 법 && 출시

https://deepgram.com/learn/npx-script

Creating an npx Command - Deepgram Blog ⚡️ | Deepgram

위 글을 읽어보니, npm에 출시를 해야한다는것을 알게됨!

 

그리고 이 글을 보면서 또 하나 배움.

 

npx명령어 자체가 npm package에 선언한 binary를 실행하는 러너라고 한다!

그래서 npm 사이트에서  jbee라고 검색해보니 아래처럼 bin이라는 폴더가있고 package.json에 "bin" 필드에 명령어가 정의되어있었음!!

package.json bin에 정의된 키워드가 npx에서 명령어로 사용되는것같다!!

 

신기하고만,,, 

저 필드를 한번도 고려해본적이없는데, 이럴때 쓰인다는걸 배움

 

2. npm 계정 생성

npm 사이트에서 계정을 만든다!
그리고 내가 만들 패키지가 이미 존재하는것인지 한번 검색해봐야한다.

 

내가 원하는 이름으로 한번 검색해보시길

사실(@{org}/{원하는이름})으로 만들수도있긴함!!

 

무튼 npm에 올릴 이름은 package.json에서 name 영역에 적어주면된다.

 

3. 터미널에 보여질 코드를 작성

사실 어떻게 시작해야할지 감이 잘 오지않았다.

그래서 여러 문서를 찾아보면서 bin 명령어를 쓰는 패키지를 보고, 그 패키지에서 bin 명령어를 실행시킬때 gluegun이라는 라이브러리를 쓴다는걸 발견!

https://www.npmjs.com/package/gluegun

gluegun

이 문서에 들어가보면 quick-start라는 부분의 명령어를 따라 해보면된다!

 

quick-start를 모두 따라하면 폴더가 하나 만들어질거임!!

(나는 dohye1이라는 이름으로 만들었는데, 이걸 따라하시는분들은 dohye1이 들어갈자리에 본인이 정한 단어를 대입하시면됨)

npx gluegun new dohye1

 

거기서 package.json을 먼저 뜯어보면된다.

{
  "name": "dohye1",
  "version": "0.0.9",
  "description": "dohye1 CLI",
  "private": false,
  "types": "build/types/types.d.ts",
  "bin": {
    "dohye1": "bin/dohye1"
  },
  ....

 

name, version, private, bin을 살펴볼건데,

name : 출시할 패키지 이름

version : 출시할 패키지 버전. 만약 내가 코드를 수정한다면 npm에 올릴때마다 version을 변경해줘야한다. 그렇지않으면 아래처럼 에러가뜬다.!

private 은 false로 설정되어있어야함.

bin이 제일 중요한데 내가 cli로 실행시키고싶은 명령어를 키로 설정해준다. 그래서 저 키로 설정되어있는 파일 경로로 찾아 들어가서 그 파일을 수정하면됨!!

 

bin/dohye1 경로의 파일로 들어가보면 가장 아래에

require(`${__dirname}/../src/cli`).run(process.argv)

이 명령이 있음!

 

그래서 src/cli경로로 들어가서 코드를 읽어보니 dohye1으로 시작하는 파일의 결과물을 사용하는것같음!!

const cli = build()
    .brand('dohye1')
    .src(__dirname)
    .plugins('./node_modules', { matching: 'dohye1-*', hidden: true })

그래서 dohye1이라는 이름을 가진 파일을 찾아보니 src/commands 아래에 해당 파일이 있다

그래서 여기를 수정하면 터미널에 찍히는 ui가 결정되는구나라고 생각함!!

import { GluegunCommand } from 'gluegun'

const command: GluegunCommand = {
  name: 'dohye1',
  run: async (toolbox) => {
    const { print } = toolbox
    print.newline()
    print.newline()
    print.newline()

    print.info('안녕하세요 저는 도혜원입니당!')

    print.newline()
    print.newline()

    print.muted(`${print.checkmark} github : https://github.com/dohye1`)
    print.success(`${print.checkmark} blog : https://dohye1.tistory.com/`)
    print.highlight(
      `${print.checkmark} linked in : https://www.linkedin.com/in/hyewon-do-56b2881b9/`
    )
    print.newline()
    print.newline()
    print.newline()
  },
}

module.exports = command

일단 print라는 객체에서 로그를 꾸밀수있는것 방식을 제공하는듯

이건 공식문서 한번 찾아보고 하면됨!

 

 

그럼 이제 npm에 올려보자!

4. npm에 올리기

npm login

을 실행해서 npm 계정을 연결한다음

npm publish --access=public

을 실행하면 배포성공!

근데 주의할점은 맨 첨에 올릴땐, version을 설정해줄필요없는데, 이미 배포된것을 업데이트할땐 version을 변경하고 올려야한다!!

 

배포가 완료되면 터미널에서 npx dohye을 쳐보면 나의 정보가 보임!!!

 

그리고 npm에도 올라가있음!!