我已经尝试了所有的解决方案,现在来问这个问题,我正在构建一个 ui 组件库。
我有两个包,一个用于库,一个用于演示,该演示使用符号链接使用库,文件:../ui 在其 package.json 中,我首先构建库,然后在演示中使用它包
代码可在 https://github.com/Qawaz/qal-ui/ 获取
我尝试使用 npm dedupe
删除重复依赖项,但没有成功。使用命令 npm ls styled-components
我得到
+-- @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
以前,我启用了父模块和工作区,并且两个包使用 npm 共享依赖项,但我删除了它,我迁移到完全独立的模块,但一个模块使用符号链接对另一个模块进行依赖。
将其添加到我的 gatsby-node.js
后(某些答案中建议这样做)
const path = require("path") exports.onCreateWebpackConfig = ({stage, actions}) => { actions.setWebpackConfig({ resolve: { alias: { "styled-components": path.resolve("node_modules", "styled-components"), } } }) }
我在控制台中收到此错误,此错误是误报,如果您更改 gatsby-config
中的某些内容并随机出现,它就会消失
export 'createContentDigest' (imported as 'createContentDigest') was not found in 'gatsby-core-utils/create-content-digest' (module has no exports)
一些答案也表明了这一点,它导致我的构建中断
optimization: { runtimeChunk: { name: "vendor" } }
我发现,如果您使用的库中的组件也因为多个实例而使用
styled-components
,那么styled-components
就会开始抱怨。所以我切换到
emotion
,我将emotion
保留在对等依赖关系中,并且体验要好得多,因为emotion
包含styled的大部分功能-components
和 API 非常相似。还有
goober
提供了一个设置方法,可以由库使用者goober
调用> 是一个很棒的选择,但是当我尝试使用 goober 时,它不包含useTheme
钩子,而且goober
非常注重保持包更小,同时提供 css 功能js。