package.json을 현명하게 사용

TLDR

We are going to explain only the following piece of code

  "peerDependencies": {
    "react": ">=16.8"
  },
  "peerDependenciesMeta": {
    "react": {
      "optional": true
    }
  }

peerDependencies 필드란 무엇입니까?

다음은 npm 문서의 정확한 인용문입니다.

In some cases, you want to express the compatibility of your package with a host tool or library, while not necessarily doing a require of this host. This is usually referred to as a plugin. Notably, your module may be exposing a specific interface, expected and specified by the host documentation.

언뜻 보기에는 별 의미가 없으므로 계속해서 예를 들어 보겠습니다.
하나의 반응 후크인 npm 패키지가 있다고 상상해 보십시오. 이것이 어리석다고 생각한다면 이 어리석은 리포지토리( react-hook-form , SWR , zustand )를 살펴봐야 합니다.
패키지에 react가 필요하므로 내장 후크( useState , useContext , ...)를 사용해야 합니다.
그러나 이것은 게시를 약간 가혹하게 만듭니다. 반응을 빌드하고 출력에 묶고 싶지 않기 때문입니다.

간단하게 훅으로 만들어보자, 카운터를 만들어볼 건데 이번에는 리듀서로 해보자 :)

import { useReducer } from 'react'

export const useCounter = (initial) => {
  const [counter, inc] = useReducer(s => s+1, initial)
  return [counter, inc]
}

반응을 내 작은 5줄의 react-hook에 묶는 것이 왜 좋지 않은 생각인지 이해하지 못한다면 채팅을 해야 합니다. 휴가를 보내기에 좋은 시간이 될 수 있습니다.
충분히 농담; 이 작은 코드 섹션의 출력 번들 크기는 홀 반응 패키지 크기의 크기에 가깝습니다.
크기 외에도 하나의 프로젝트 내에서 여러 버전의 반응을 사용할 수 없으므로 모든 개발자가 정확한 반응 버전을 사용하도록 결정적으로 강제하고 있습니다.
peerDependencies는 개발자가 사용자 지정 패키지를 설치하려고 할 때마다 package.json의 peerDependencies 필드에 반응을 전달한 경우 하루를 절약하기 위해 여기에 있습니다.
npm은 먼저 node_modules를 보고 반응 버전이 설치되어 있는지 확인합니다.
그렇지 않은 경우 화면에 'react' 🥹를 설치하라는 큰 경고가 표시됩니다.
그러나 발견되면 react(">=16.8")의 값으로 전달한 버전과 호환되는지 여부를 확인하고, 호환되지 않는 경우 🥹는 알고 있지만 아무 작업도 수행하지 않습니다. 호환 케이스.

Note: when I'm writing this post react 18 has been released and it seems to be compatible with the previous ones, so till then >=16.8 has access to all hooks and can do the job 🚀

나는 당신을 모르지만 설치 프로세스가 깨끗해야합니다. 그리고 여기에 peerDependenciesMeta가 설계되었습니다.

peerDependenciesMeta 필드는 무엇입니까?

다음은 npm 문서의 정확한 인용문입니다.

When a user installs your package, npm will emit warnings if packages specified in peerDependencies are not already installed. The peerDependenciesMeta field serves to provide npm with more information on how your peer dependencies are to be used. Specifically, it allows peer dependencies to be marked as optional.

알다시피, 나는 쓸모없는 경고를 제거하기 위해 이것을 말했습니다.
이 경우 피어 종속성을 선택 사항으로 표시하면 반응 패키지가 호스트에 설치되지 않은 경우 npm이 경고를 표시하지 않습니다.
"이를 통해 다양한 호스트 패키지를 모두 설치하지 않고도 통합하고 상호 작용할 수 있습니다."npm은 기쁨으로 말했습니다.