typescript - Masalah menggunakan yarn link untuk menggunakan paket npm lokal yang memiliki peerDependencies

Saya mengalami masalah berikut saat mencoba mengembangkan perpustakaan komponen React menggunakan styled-components.

Untuk tujuan contoh ini, mari kita asumsikan kita memiliki dua repositori, app dan core dan bahwa core akan digunakan oleh app.

Saat ini, core ditulis dalam TypeScript dan dibangun menggunakan tsc.

Untuk iterasi dengan cepat, saya mencoba menggunakan yarn link untuk menautkan core ke app.

Ini bekerja dengan baik untuk membuat app menemukan core... masalah yang saya hadapi adalah ketika kode TypeScript yang telah dikompilasi dari core mencoba untuk memanggil sebuah paket, misalnya styled-components, ia mencoba menemukan paket ini di node_modules dari core (bukan dari app). Karena saya memiliki styled-components sebagai peerDependency dan devDependency, ia bisa menemukannya di node_modules milik core, tetapi ini bukan yang saya inginkan terjadi. Saya ingin ia menggunakan styled-components milik app.

Salah satu alternatif untuk yarn link yang pernah saya coba adalah dengan menambahkan dependensi core ke app melalui file:/path. Ini tampaknya bekerja seperti yang diharapkan, tetapi memperkenalkan masalah baru. Bagaimana saya bisa memiliki path dari mesin pengembangan saya di package.json hanya untuk pengembangan lokal (tanpa harus terus-menerus mengubahnya bolak-balik)? Selain itu, tampaknya setiap pembaruan yang dilakukan di core mengharuskan paket dihapus dari app dan cache yarn dibersihkan sebelum menambahkannya kembali.

Apakah ada cara yang lebih sederhana untuk membuat skenario ini berhasil? Saya baru mulai melihat Rollup atau Webpack sebagai solusi, tapi tidak yakin apakah itu arah yang tepat.

Jawaban #1

ini bukan solusi untuk yarn link.

tetapi solusi untuk siapa saja yang memiliki masalah dengan mengelola repositori lokal dengan yarn dan npm

cukup gunakan yalc untuk mengelola paket lokal Anda daripada yarn link atau yarn add link:...

Jawaban #2

Kita akan membutuhkan pustaka styled-component di devDependencies dari repositori inti, karena pustaka ini diperlukan untuk mengembangkan komponen yang dapat digunakan kembali di repositori inti.

Pada saat yang sama kita perlu memberi tahu repository aplikasi untuk memuat peerDependencies dari repository inti dari node_modules repository aplikasi.

Kita bisa menggunakan webpack untuk itu. Misalnya, jika kita telah menggunakan react-scripts untuk membuat repositori aplikasi, kita bisa menjalankan yarn eject dan menemukan webpack.config.js di folder config dan dapat mengubah bagian resolve.alias.

app/config/webpack.config.js

{
  ...
  resolve: {
    ...
    alias: {
      ...
      core: path.resolve("./node_modules/core") // path must be imported above.
    }  
  }
}

Untuk informasi lebih lanjut: https://blog.maximeheckel.com/posts/duplicate-dependencies-npm-link

Artikel terkait