이 응용 프로그램에서는 '스타일 구성 요소'의 여러 인스턴스가 초기화되었습니다.

Question

모든 솔루션을 시도했으며 이제 이 질문에 도달하여 UI 구성 요소 라이브러리를 구축하고 있습니다.

라이브러리용 패키지와 데모용 패키지 두 개가 있습니다. 데모에서는 package.json의 ../ui 파일인 심볼릭 링크를 사용하여 라이브러리를 사용합니다. 먼저 라이브러리를 빌드한 다음 데모 패키지에서 사용합니다.

코드는 https://github.com/Qawaz/qal-ui/

에서 확인할 수 있습니다.

사용해 보니 npm dedupe 删除重复依赖项，但没有成功。使用命令 npm ls styled-components얻어

으아악

이전에는 상위 모듈과 작업 공간을 활성화했고 두 패키지 모두 npm을 사용하여 종속성을 공유했지만 이를 제거하고 완전히 별도의 모듈로 옮겼지만 한 모듈은 심볼릭 링크를 사용하여 다른 모듈에 종속성이 있었습니다.

• styled-Components는 직접적인 종속성이 아닌 구성 요소 라이브러리의 피어 종속성입니다
• 두 프로젝트의 스타일 구성 요소 버전은 일관되게 유지됩니다
• gatsby 사용, 스타일이 지정된 구성 요소에는 babel 플러그인 사용, 스타일이 지정된 구성 요소에는 gatsby 플러그인 사용

이 내용을 내 gatsby-node.js 게시물에 추가하세요(일부 답변에서 제안됨)

으아악

콘솔에서 이 오류가 발생합니다. 이 오류는 가양성입니다. gatsby-config에서 무언가를 변경하고 무작위로 사라지면

으아악

일부 답변에서도 이를 나타냈고 이로 인해 빌드가 중단되었습니다

+-- @paljs/ui@1.1.1 -> .\..\ui
| `-- styled-components@6.0.3
+-- babel-plugin-styled-components@2.1.4
| `-- styled-components@6.0.3 deduped
+-- gatsby-plugin-styled-components@6.11.0
| `-- styled-components@6.0.3 deduped
`-- styled-components@6.0.3

Answer 1

여러 인스턴스로 인해 사용되는 라이브러리의 구성 요소를 사용하면 styled-components，那么 styled-components 불평이 시작된다는 사실을 발견했습니다.

그래서 emotion으로 전환했고, 피어 종속성에서 emotion을 유지했으며 emotion에 대부분의 styled 기능이 포함되어 있기 때문에 경험이 훨씬 더 좋았습니다. - 구성요소와 API는 매우 유사합니다. emotion，我将emotion保留在对等依赖关系中，并且体验要好得多，因为emotion包含styled的大部分功能-components 和 API 非常相似。

还有 goober 提供了一个设置方法，可以由库使用者 goober 调用> 是一个很棒的选择，但是当我尝试使用 goober 时，它不包含 useTheme 钩子，而且 goober

또한 goober는 라이브러리 소비자 goober>가 호출할 수 있는 설정 메서드를 제공하는데 이는 훌륭한 옵션이지만 goober를 사용하려고 하면 포함되지 않습니다. useTheme 후크와 goober는 CSS 기능 js를 제공하면서 패키지를 더 작게 유지하는 데 큰 관심을 기울입니다. 🎜