Webpack → Vite: Storybook’un bundler migrasyonu

 (medium.com/@hong009319)
3 puan yazan tk1583 2024-04-07 | 1 yorum | WhatsApp'ta paylaş

Storybook bundler’ını Webpack’ten Vite’a migrate ettik. Bu süreçte art arda çeşitli sorunlar ortaya çıktı ve sonuç olarak mevcut teknoloji stack’ini değiştirmek zorunda kaldık.

Teknoloji stack’inde değişiklik

• [Önceki teknoloji stack’i] Storybook v6.5, builder-webpack5, Node v18, Yarn 1
• [Nihai teknoloji stack’i] Storybook v7, react-vite, Node v18, Pnpm

Migrasyon sırasında ortaya çıkan sorunlar

1. Webpack 4 ile OpenSSL 3 sürümü uyumluluk sorunu

  • Sorunun açıklaması

    • builder-webpack5’ten builder-vite’a migrate etme sürecinde OpenSSL sürüm uyumluluğu sorunu ortaya çıktı
    • Webpack 5.61.0’dan düşük sürümlerde eski OpenSSL kullanılıyor, sonrasında ise OpenSSL 3 kullanılıyor
    • Storybook v6 varsayılan builder olarak Webpack 4 kullanıyor ve Webpack 5’i opsiyonel olarak sunuyor
    • O dönemde Webpack 5 seçilmişti ve Webpack ^5.9.0 kullanan builder-webpack5 sayesinde OpenSSL hatası oluşmamıştı
    • Migrasyon yapılan builder-vite, build için Vite kullansa da Storybook v6 varsayılan builder olarak Webpack 4 kullandığı için OpenSSL sürüm uyumluluğu sorunu ortaya çıktı

  • Çözüm yöntemi: Storybook v7’ye migrate etmek

    • Storybook v7’de Vite kullanıldığında Storybook iç tarafta Webpack 4 kullanmadığı için OpenSSL hatası oluşmuyor

2. Yarn 1 hoisting nedeniyle farklı sürümlerde dependency kullanılması

  • Sorunun açıklaması

    • @isaacs/cliui paketinde ESM formatındaki string-width@5 ile CommonJS(CJS) formatındaki string-width@4, string-width-cjs adlı bir alias olarak kullanılıyor
    • Yarn 1, yinelenen bağımlılık paketlerini root node_modules’a hoist ettiği için paketler, kendilerinde kurulu olmayan dependency’lere erişebiliyor
    • string-width@4 ve @5, birden çok pakette tekrar kullanılan sub-dependency oldukları için root node_modules’a hoist edildi
    • string-width paketleri arasında CJS formatındaki cli-table3, string-width@4’e erişmeye çalıştı; ancak alias nedeniyle aynı sürüm mevcut olmadığından ESM formatındaki string-width@5 resolve edilerek modül uyumluluk sorunu oluştu

  • Çözüm yöntemi: phantom dependency oluşmayan pnpm’e paket yöneticisini değiştirmek

İlgili okumalar

1 yorum

 
tk1583 2024-04-09

Soru. webpack'te neden esbuild-loader kullanılmadı?

Cevap.

Native ESM özelliğinden yararlanmak için Vite kullandık.

esbuild-loader'ın, Webpack içinde esbuild kullanmayı sağlayan bir loader olduğunu biliyorum. esbuild-loader kullanıldığında build hızı çok artıyor, ancak yine de bundling sürecinden geçmek gerekiyor.

Buna karşılık Native ESM kullanıldığında yalnızca kullanılan modüller build edilip tarayıcıya gönderiliyor; modül değiştiğinde de sadece değişen modül build edildiği için daha hızlı oluyor.

Storybook gibi yalnızca belirli bileşenlerin istendiği durumlarda Native ESM kullanmanın daha iyi olduğuna karar verip Vite kullandık.