[npm] npm에 배포를 해보자 (TypeScript + React)

Hi 🙋‍♀️

오늘은 npm에 내가 만든 라이브러리를 배포해 보는 시간을 가져보도록 하자.

필자는 npm을 이전 v0.1.0으로 배포를 한 적이 있기에 새 변경사항을 반영하는 v0.2.0으로 배포 작업을 진행했다.

폴더구조

|App
  |public
  | src
      | lib
          |common
          |components
          |dependencies

사전세팅

먼저 TypeScript 환경에서 개발하여 배포하기 때문에 tsconfig.json과 package.json 환경에 사전 세팅을 진행한다.

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false,
    "jsx": "react-jsx",
    "declaration": true,
    "outDir": "./dist"
  },
  "include": ["./src/lib/components/**/*.tsx", "./src/lib/components/**/*.ts", "./src/lib/**/*.ts"]
}

여기서 포인트는

• declaration: .d.ts 파일 생성 여부
• esModuleInterop: 모든 imports에 대한 namespace 생성, commonjs와 상호운용 여부

이다.
TypeScript를 지원하기 위해서는 d.ts 파일을 같이 생성해서 배포해야하기 때문에 declaration 값을 true로 해주자.

package.json

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "prepare": "rm -rf dist && mkdir dist && tsc",
  }

package.json에서 scripts부분을 세팅한다.

• prepare script는 npm publish 명령어시 자동으로 먼저 실행된다.
  scripts를 이렇게 설정해두면 publish시
  • prepare가 build script 실행
  • 기존 dist 폴더 삭제
  • tsc 명령어 (ts -> js 로 변환) 실행
  • tsc가 완료되면 publish

※ dist/는 배포용 디렉터리 이다. Webpack이나 Parcel, Gulp 같은 번들러로 배포용 파일을 생성할 수 있다.

npm 로그인

$ npm login 

해당 명령어를 작성하면 npm id와 password, email을 입력하도록 한다.
npm에 배포했던 라이브러리에 Collaborators로 되어있으면 로그인이 가능하다.

-- password 입력시 자판이 입력되지 않는 것처럼 보인다. 하지만 이건 입력되고 있다는 것이니 안심하고 입력하자.

로그인한 유저 확인

$ npm whoami

로그인 후 해당 명령어로 자신의 계정으로 맞게 로그인이 됐는지 확인한다.

npm 정보 확인

$ npm info 배포할npm명

자신이 배포 할려고 하는 npm이 맞는지 정보를 확인한다.
여기서 주의해야 할 점은 배포된 npm버전보다 자신이 새로 배포해야할 버전이 더 높은지 필히 확인해야 한다.
(만약 버전이 같거나 낮다면 배포가 진행되지 않는다.)

ex)

npm 배포

$ npm publish

현재 배포되어있는 npm의 버전과 현재 자신이 배포할 버전이 다른지 최종 확인 후 배포를 진행한다.

..중략

짠! 배포가 성공적으로 진행되었다 ✨

이제 정말 배포가 잘 되었는지 테스트 폴더에서 npm 모듈 설치 후 실행해보면 된다 ^___^