Berbilang contoh 'Komponen Gaya' dimulakan dalam aplikasi ini

Question

Saya telah mencuba semua penyelesaian dan kini datang kepada soalan ini, saya sedang membina perpustakaan komponen ui.

Saya mempunyai dua pakej, satu untuk perpustakaan dan satu untuk demo, demo menggunakan perpustakaan menggunakan symlink, fail: ../ui dalam package.jsonnya, saya mula-mula membina perpustakaan dan kemudian menggunakannya dalam pakej demo

Kod boleh didapati di https://github.com/Qawaz/qal-ui/

Saya cuba guna npm dedupe 删除重复依赖项，但没有成功。使用命令 npm ls styled-components Saya dapat

+-- @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

Sebelum ini, saya mendayakan modul induk dan ruang kerja, dan kedua-dua pakej menggunakan npm untuk berkongsi kebergantungan, tetapi saya mengalih keluarnya dan saya berpindah ke modul berasingan sepenuhnya, tetapi satu modul mempunyai kebergantungan pada yang lain menggunakan symlinks.

• gaya-komponen ialah pergantungan rakan sebaya dalam pustaka komponen, bukan langsung
• Versi komponen gaya kedua-dua projek kekal konsisten
• Menggunakan gatsby, menggunakan pemalam babel untuk komponen yang digayakan dan pemalam gatsby untuk komponen yang digayakan

Tambahkan ini pada siaran gatsby-node.js saya (dicadangkan dalam beberapa jawapan)

const path = require("path")
exports.onCreateWebpackConfig = ({stage, actions}) => {
    actions.setWebpackConfig({
        resolve: {
            alias: {
                "styled-components": path.resolve("node_modules", "styled-components"),
            }
        }
    })
}

Saya mendapat ralat ini dalam konsol, ralat ini adalah positif palsu, jika anda menukar sesuatu dalam gatsby-config dan secara rawak ia hilang

export 'createContentDigest' (imported as 'createContentDigest') was not found in 'gatsby-core-utils/create-content-digest' (module has no exports)

Sesetengah jawapan juga menunjukkan perkara ini dan ia menyebabkan binaan saya rosak

optimization: {
    runtimeChunk: {
        name: "vendor"
    }
}

Answer 1

Saya mendapati bahawa jika anda menggunakan komponen daripada perpustakaan yang juga digunakan disebabkan oleh berbilang kejadian styled-components，那么 styled-components ia akan mula merungut.

Jadi saya beralih kepada emosi, saya menyimpan emosi dalam pergantungan rakan sebaya dan pengalaman itu lebih baik kerana emosi mengandungi Kebanyakan fungsi gaya - komponen dan API adalah sangat serupa. emotion，我将emotion保留在对等依赖关系中，并且体验要好得多，因为emotion包含styled的大部分功能-components 和 API 非常相似。

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

Juga goober menyediakan kaedah persediaan yang boleh dipanggil oleh pengguna perpustakaan goober > yang merupakan pilihan yang bagus, tetapi apabila saya cuba menggunakan goober ia tidak Mengandungi cangkuk useTheme dan goober memberi perhatian yang besar untuk memastikan pakej lebih kecil sambil menyediakan fungsi css js. 🎜