Sekiranya saya memasukkan modul nod dalam pakej perpustakaan saya?
P粉716228245
P粉716228245 2023-09-12 19:36:43
0
1
587

Saya sedang membangunkan perpustakaan komponen React. Pustaka ini digunakan oleh beberapa projek NextJs dalaman.

Atas sebab keserasian dengan NextJs, perpustakaan ini perlu ditukar kepada CommonJs pada satu ketika.

Masalahnya ialah beberapa kebergantungan npm perpustakaan saya tidak mengendalikan CommonJS. Ini adalah kes, sebagai contoh, dengan swiper.

Jadi saya ada dua pilihan:

  • Saya sama ada akan mengisytiharkan dependensi npm sebagai peerDependency dan kemudian meminta setiap pengguna perpustakaan saya mentranspilenya dengan betul. Ini menjadikan pakej perpustakaan saya lebih ringan, tetapi ia mewujudkan banyak kekangan konfigurasi dalam setiap projek (cth. untuk NextJs serta Jest).
  • Atau saya memasukkan kebergantungan npm dalam pakej saya, yang merupakan anti-corak pada pendapat saya, tetapi ia membolehkan saya mendedahkan CJS dan MJS: pengguna perpustakaan saya hampir tiada apa-apa untuk dilakukan.

Saya juga boleh membayangkan gabungan kedua-duanya: Saya mengabaikan mengurus semua kebergantungan untuk modul CommonJs dan ES, dan menukar hanya yang perlu.

Apa pendapat anda?

P粉716228245
P粉716228245

membalas semua(1)
P粉647504283

Kami mempunyai situasi yang sama - kami mempunyai aplikasi Next.js yang bergantung pada perpustakaan teras dengan modul ESM asas. Walau bagaimanapun, saya cadangkan tidak menggabungkan kebergantungan anda. Aplikasi hiliran anda mungkin mempunyai kebergantungan yang sama dan kini anda akhirnya memuatkannya dua kali. Dan anda mungkin menghadapi masalah ini dengan tanggungan pihak ketiga yang lain (dengan tanggungan ESM). Hanya tambahkannya ke next.config.js 中的 transpilePackages 列表中即可:https://nextjs.org/docs/app/api-reference/next-config-js/transpilePackages。我们还使用 next/jest ,它似乎也可以获取配置并且似乎可以工作。唯一需要注意的是,我发现我们必须转译 @babel/runtime tetapi hanya apabila jest sedang berjalan, jika tidak ia akan memecahkan aplikasi utama.

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@acme/ui', 'lodash-es'],
}
 
module.exports = nextConfig
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan