React의 구성 요소 라이브러리 개발에서 라이브러리의 의존 관계를 지정해야 합니다

개시하다
나는 처음으로 React의 구성 요소 라이브러리를 개발했다.
이번에는 도서관 의존 관계로 조금 막혔을 때 조사한 내용을 주로 다룬다.
구성 요소 라이브러리 개발에 참고할 글
나는 아래의 문장을 참고했다.매우 알기 쉽다.

공개방법의 참고문

3분이면 완성되는 npm 모듈

구성 요소 라이브러리 개발에 대한 참고 문서

React Component 제작 npm 패키지, Type Script 프로젝트에서 사용

구성 요소 라이브러리 개발 프로젝트의 구성

뒤의 설명이 순조롭게 진행되도록 프로젝트의 구성을 미리 기재한다.

root
├ sample-app (動作確認用プロジェクト)
│   ├ src
│   │ └ index.js
│   └ package.json
└ palette-component (コンポーネントライブラリプロジェクト)
    ├ src
    │ ├ canvas.tsx (ライブラリに含めるコンポーネント）
    │ ├ palette.tsx (ライブラリに含めるコンポーネント）
    │ └ index.tsx (コンポーネント参照用ファイル）
    └ package.json

구성 요소 라이브러리 개발 중 막힌 점
동작을 확인할 때, React가 오류로 화를 낸다

다음 순서대로 돌아가다가 갑자기 리액트가 실수를 해서 욕을 먹었어요.

palette-component 프로젝트 구축 편집

sample-app 프로젝트가palette-component의 구축을 참고하도록 구성 요소 라이브러리 호출

sample-app 프로젝트 시작

다음과 같은 오류가 발생하여 욕을 먹었다.

 Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

오류가 발생한 시간은palette-component 프로젝트 측면에서 사용하기 시작한 시간useState입니다.

오류 발생 원인

palette-component 프로젝트와sample-app 프로젝트 각각의 node-modules 내의 React를 참조했습니다.

root
├ sample-app (動作確認用プロジェクト)
│   ├ src
│   │ └ index.js ((1)のreactを参照しながら、(2)のreactを参照しているCanvasコンポーネントとPaletteコンポーネントを呼び出す）
│   ├ node_modules
│   │ └ react (1)
│   └ package.json
└ palette-component (コンポーネントライブラリプロジェクト)
    ├ src
    │ ├ canvas.tsx ((2)のreactを参照しながら、Canvasコンポーネントを提供する）
    │ ├ palette.tsx ((2)のreactを参照しながら、Paletteコンポーネントを提供する）
    │ └ index.tsx 
    ├ node_modules
    │ └ react (2)
    └ package.json

sample-app에는 자신이 가진 React와palette-component가 가진 React 두 개가 포함되어 있어'연결 규칙 위반: 반복 React 복제가 되었다.

sample-app를 호출할 때 Canvas부품이든 Palette부품이든 (1)의react를 참조하지 않으면 오류가 발생하여 정상적으로 작동할 수 없습니다.

해결책

다음 기사를 참고하여 해결했습니다.

React 라이브러리 개발 환경에서 "Invalid Hook Call Warning"

sample-app 프로젝트 인용 nodemodulesreact와react-dom하npm link에서 두드리기 명령,palette-component 프로젝트npm link react에서 두드리기npm link react-dom 명령을 통해sample-app 프로젝트와palette-component 프로젝트가 참조하는React를 통일할 수 있다.

나는 yarn을 사용하기 때문에 "yarn link"명령을 사용하여 해결했다.

라이브러리의 의존 관계에 주의하세요!
구성 요소 라이브러리를 개발할 때 소프트웨어 패키지의 의존 관계에 대해 큰 의식이 없어 개발을 진행하고 있다.그래서 다음과 같은 상태다.
palette-component 프로젝트의 패키지입니다.json의dependencies에react와react-dom 함유
package.json

"dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
  }

이런 상태에서 프로그램 라이브러리를 호출하는 항목은 다음과 같이 구성되어 있으며 프로그램 라이브러리를 사용하는 사람은 나와 같은 고통을 겪게 된다.

some-app (ライブラリを呼び出すアプリ)
  ├ src
  │ └ index.js ((1)のreactを参照しながら、(2)のreactを参照しているCanvasコンポーネントと、Paletteコンポーネントを呼び出す）
  ├ node_modules
  │ ├ react(1)
  │ └ simple-palette-component ((2)のreactを参照しながらCanvasコンポーネントとPaletteコンポーネントを提供するライブラリ）
  │   └ node_modules
  │     └ react(2)
  └ package.json

이번 개발에서 오류가 발생했기 때문에 라이브러리처럼 다른 프로젝트 참조를 전제로 하는 상황에서 특히 의존 관계에 주의해야 한다는 것을 간혹 알아차릴 수 있다.
이번 일은 많이 반성했어, 패키지.json이 정의할 수 있는 의존 관계의 정의에 대해 우리는 npm가 정식으로 정리한 내용을 다시 보기로 결정했다.
　
dependencies
의존관계가 있는 포장의 버전을 지정할 수 있을 것 같아요.
굵은 글씨로'개발에만 쓰이는 것은 여기에 두지 마세요'라고 적혀 있다.미안합니다.
devDependencies
개발에서만 사용하며 자신이 만든 모듈을 누가 사용했을 때 필요하지 않은 의존관계가 있는 프로그램 라이브러리 등을 기록하는 곳(테스트 도구 등)이다.
대상이 된 포장된 루트 폴더npm link나 npm install를 두드리면 대체할 수 있다고 적혀 있다.그렇구나.
peerDependencies
"이 모듈을 사용할 때, 전제는 이perDependencies의 프로그램 라이브러리 도구를 사용해야 한다."이런 뜻을 표시하기 위해서인 것 같습니다(어렵습니다··).
npm의 버전 행동도 달라진다. npm의 버전 3~6에서perDependencies는 자동으로 설치되지 않는 규격이지만 npm의 버전 7부터 자동으로 설치되는 규격으로 바뀐 것 같다.
perDependencies에서 지정한 프로그램 라이브러리와 도구의 버전에 대한 추천은 일정한 폭이 있습니다.
포장을 공개하지 않으면 인상에 잘 쓰이지 않는다.
(기타는 peerDependenciesMeta, optionalDependencies 등등...이번엔 얘기 안 할게...)
React의 구성 요소 라이브러리 의존 관계는 어떻게 정의해야 합니까

이번 경우엔 의존 관계를 어떻게 풀어야 좋을까? 조금 고민해 보기로 했다.

react 또는 react-dom는 설치 대상의 주 항목이 참조하는 node입니다.modules 안에 있는 걸 참조하고 싶어요.

useState를 사용하기 때문에 React의ver를 사용합니다.16.80 이후

그러나 구성 요소 라이브러리 개발에서도 테스트를 진행하고 싶어서 개발 환경에서도 사용하지 않거나reactreact-dom

음, 왠지 그런 것 같은데...

package.json

"devDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
  }
"peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0",
  }

네, 다른 유명한 구성 요소 라이브러리가 왜 존재하는지 참고해 봅시다

react-loader의 V4.0.0 패키지json

React 주변은 대체로 같다.
(사실 유명한 구성 요소 라이브러리가 왜 존재하는지 참고하고 자체 제작한 구성 요소 라이브러리의 패키지.json이 어떻게 존재해야 하는지를 생각했을 뿐이다.)
총결산

구성 요소 라이브러리를 자주 이용하여 웹 응용 프로그램을 개발하기 때문에 라이브러리에 대한 의존 관계는 별로 고려하지 않았다.앞으로는 이전보다 라이브러리의 의존 관계에 더욱 주의하여 개발할 수 있습니다!

덤

어렵기 때문에 이번에 제작한 조립품 라이브러리를 소개해 드릴게요.

npm의 공개 목적지:https://www.npmjs.com/package/simple-palette-component

GitHub: https://github.com/daichihasegawa0923/simple-palette

컬러 등산차의 구성 부분과 그림을 그릴 수 있는 부품.

컬러 등산차의 부품과 그릴 수 있는 부품은 이미 단독으로 사용되었다.