2021/11/12 : npx로 실행되는 npm 패키지

오랜만에 코드를 만졌다. 면접준비와 이력서, 포트폴리오를 손보고 지식들을 정리하느라 요새 코드를 많이 보지 못했다.

면접까지 남은 시간동안, 그동안 기술부채에 쌓여져있던 부분들을 어느정도 해결하면서 코드를 좀 만지기로 했다.

유지보수도 개발자의 업무이기 때문이닿

 

첫번째로 https://github.com/zereight/woowacourse-tiny-cra

아주 예전에 만든 custom cra로 javascript와 typescript를 선택하여 create-react-app처럼 동작하는 라이브러리를 만들었었다.

 

하지만, 이전에는 npx가 지원되지 않았다.

그래서

yarn add woowacourse-tiny-cra

를 한다음에,

node ./node-module/woowacourse-tiny-cra/src/index.js

 로 수동으로 입력하여 패키지를 실행해야했다.

 

npx를 적용할줄 몰랐기 때문이다.

그 상태로 어느정도 잘쓰기도했고 다른 과제와 공부를 하느라 바빠서 미뤄두었는데,

 

다른 크루가 custom cra를 만들어본다는 소식에 이것저것 자료를 찾아주다가. npx 적용하는 방법이 적힌 블로그를 다시 보게되었고,

이참에 빠르게 개선해야겠다는 마음을 먹게되었다.

 

내가 참고한 글은 우아한테크캠프에서 우형에 들어가신 DD님 블로그를 보았다.

https://velog.io/@jjunyjjuny/React-TS-boilerplate-%EC%A0%9C%EC%9E%91%EA%B8%B0-%EB%B0%B0%ED%8F%AC-%EB%B0%8F-npx

React + TS boilerplate 제작기 2 - 설치 패키지 & npx

 

예전에 typescript component를 npm으로 배포하면서 DD님 블로그를 봤는데, 이번에도 도움을 받게되었다 ㅎ

 

 

코드의 핵심은 다음과 같다.

npx를 동작시키려면 package.json에 "bin" 속성을 정의해야한다.

 

// package.json

"bin": {
    "woowacourse-tiny-cra": "./bin/index.js"
  },

아무 node_module 폴더를 까보면 bin폴더가 있는데, 그것이 바로 스크립트로 실행할 수 있는 패키지들이 모인곳이다.

yarn webpack 같은것도 webpack이 bin폴더를 만들어놨기 떄문인것이다.

 

그래서 나도 src폴더를 bin으로 바꾸고, package.json에 "bin" 속성을 정의했다.

npx woowacourse-tiny-cra를 하면 "./bin/index.js" 를 실행해줘 라는 뜻이다.

 

그렇게 오랜시간동안 기술부채로 남았던, npx 적용을 해낼 수 있었다.

추가로, CleanWebpackPlugin을 제거하고 output에 "clean:true" 속성으로 대체했다.