npm 라이브러리를 만들고 publish 하기

라이브러리 만들어서 배포하면 편하지않을까요?

그래서 한번 만들어봅니다.

 

https://junghyeonsu.com/posts/deploy-simple-util-npm-library/

간단한 유틸 함수 NPM 라이브러리 배포해보기 (feat. TypeScript 지원, ESM 지원) - 정현수 기술 블로그

이 분 블로그 참고하면서 작성했는데

너무 잘 작성해주셔서 뭐 더 추가할 게 없을 것 같고요

다만 저는 yarn 대신 npm을 사용해서 라이브러리를 만들었기 때문에

이부분에 약간의 차이가 존재합니다.

 

https://github.com/XionWCFM/xion-calculate

GitHub - XionWCFM/xion-calculate

결과 레포지토리는 여기에서 확인할 수 있습니다.

---

🧐 만들어놓고보니 필요한 점

글을 잘 따라가보면 cjs, esm을 지원하면서 ts도 지원하는 라이브러리를 쉽게 만들 수 있습니다.

그런데 저는 저기서 그치는게 아니라 react 위에서 동작할 수 있는 커스텀훅들을 담은

라이브러리를 만들고 싶고 또 내가 필요한것들만 설치하기 위해 라이브러리를 쪼개고 싶습니다.

 

라이브러리를 쪼개기 위해선 빌드를 따로해줘야하고 package.json도 새로 만들어줘야할 것 같네요

그리고 react 에서 동작하게하려고했더니 훅들이 null인 에러가 발생합니다.

아무래도 훅의 구현체들은 react 라이브러리에 존재하는게 아니라 런타임에 주입받는 형태이기 때문에

이런 에러가 발생하는게 아닌가.. 싶은데 어떻게 설정해야하는건지 찾아봐야 할 것 같습니다.

 

남이 쓴 코드를 보면서 해석해보려고 하는데

그것을 위해 당근에서 만든 stackflow라는 라이브러리를 참고해봤습니다.

https://github.com/daangn/stackflow/blob/main/package.json

{
  "name": "@stackflow/monorepo",
  "private": true,
  "license": "MIT",
  "workspaces": [
    "docs",
    "core",
    "demo",
    "integrations/*",
    "packages/*",
    "extensions/*"
  ],
  "scripts": {
    "build": "ultra -r build",
    "build:dts": "ultra -r --build build:dts",
    "clean": "ultra -r clean",
    "dev": "ultra -r --concurrency 100 dev",
    "format": "eslint . --fix --ext .ts,.tsx --ignore-path .gitignore && prettier -w .",
    "release": "yarn clean && yarn build && changeset && changeset version && changeset publish",
    "release:canary": "yarn clean && yarn build && changeset pre enter canary && changeset && changeset version && changeset publish && changeset pre exit",
    "test": "yarn build && ultra -r test",
    "typecheck": "ultra -r typecheck",
    "version": "yarn install && git stage yarn.lock"
  },
  "resolutions": {
    "@mdx-js/react": "2.1.1",
    "esbuild": "^0.16"
  },
  "devDependencies": {
    "@changesets/cli": "^2.26.2",
    "@types/jest": "^28.1.6",
    "@types/node": "^18.6.3",
    "@types/react": "^18.0.15",
    "eslint": "^8.13.0",
    "prettier": "^2.6.2",
    "typescript": "^4.7.4",
    "ultra-runner": "^3.10.5"
  },
  "packageManager": "yarn@3.2.4"
}

힌트를 얻을 수 있었던게 ultra-runner라는 것과 

모노레포로 관리하고 있다는 것 그리고 workspaces를 지정해주고있다는 것이었습니다.

마침 빌드도 esbuild를 이용하고있는것으로 보여

 

여기서 힌트를 얻어 모노레포로 관리하는 것을 통해

필요한 라이브러리만 제한적으로 install 할 수 있는 커스텀 라이브러리를 만들어보겠읍니다..

언젠간..............................