在此应用程序中初始化了多个'样式组件”实例
P粉590929392
P粉590929392 2024-03-31 12:17:14
0
1
392

我已经尝试了所有的解决方案,现在来问这个问题,我正在构建一个 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 共享依赖项,但我删除了它,我迁移到完全独立的模块,但一个模块使用符号链接对另一个模块进行依赖。

  • styled-components 是组件库中的对等依赖项,不是直接的
  • 两个项目的样式组件版本保持一致
  • 正在使用 gatsby,正在使用用于样式组件的 babel 插件和用于样式组件的 gatsby 插件

将其添加到我的 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"
    }
}

P粉590929392
P粉590929392

全部回复(1)
P粉549986089

我发现,如果您使用的库中的组件也因为多个实例而使用 styled-components,那么 styled-components 就会开始抱怨。

所以我切换到emotion,我将emotion保留在对等依赖关系中,并且体验要好得多,因为emotion包含styled的大部分功能-components 和 API 非常相似。

还有 goober 提供了一个设置方法,可以由库使用者 goober 调用> 是一个很棒的选择,但是当我尝试使用 goober 时,它不包含 useTheme 钩子,而且 goober 非常注重保持包更小,同时提供 css 功能js。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板