Photo by Thomas Jensen on Unsplash

NPM Paketlerini React Projesine Nasıl Dinamik Eklersiniz ?

NPM Paketlerini build bundle içerisinde yer almadan dışarıdan yükleyerek nasıl kullanabiliriz.

Bildiğiniz gibi React projeniz Webpack, Rollup veya Vite benzeri araçlar ile bundle edildikten sonra chunklar halinde client(tarayıcıya) sunulurki network üzerinde giden veriyi tek seferde optimize aktarmayı hedefler.

Peki bu istediğimiz kütüphaneyi uygulama çalıştıktan sonra dışarıdan runtime eklemek istiyorsak nasıl bu kütüphaneleri kullanacağız.

Öncelikle bu kütüphanelerin URI/URL üzerinden web üzerinden erişilebilir olması gerekiyor. NPM gibi pakatleri CDN üzerinden https ile sunan web sayfaları bulunuyor. Bunlardan 2 tanesini aşağıya ekledim.

• https://www.jsdelivr.com/
• https://www.skypack.dev/

Peki biz yukarıdaki linklerden kütüphaneleri https üzerinden eriştik ama bunları dinamik nasıl yükleyeceğiz ?

Aşağıdaki örnekte 2 farklı yapıyı denedim.

• Uzaktaki bir kütüphaneden dinamik fonksiyon çağrımı (https://www.npmjs.com/package/canvas-confetti)
• Uzaktaki bir kütüphaneden bileşen olarak hesap makinesini react bileşeni olarak kullanma (https://www.npmjs.com/package/awesome-react-calculator)

Ornek Dynamic Import…

Burada 2 tür import işlemi yapılıyor.

A. Kütüphanedeki Fonksiyon Çağrımı

(async () => {
  const { default: confetti } = await import('https://cdn.skypack.dev/canvas-confetti');
  confetti();
})();

B. Kütüphanedeki React Bileşenin Render Edilmesi

const Calculator = React.lazy(() => import('https://cdn.skypack.dev/awesome-react-calculator'));
return (
  <>
      <React.Suspense fallback={<div>Loading...</div>}>
        <Calculator />
      </React.Suspense>
  </>
);

import EcmaScript 6 ile gelen bir özellik tarayıcıların yeni olması önemli.

import is a native browser feature that’s just now gaining adoption. It only works in the newest versions of Chrome, Safari, Firefox, and Edge. It also requires modules to be published in the ES6 module specification, which is still gaining adoption.

Eski versiyonlarda da fonksiyon https://github.com/amdjs/amdjs-api/blob/master/AMD.md kullanılabilir. Örneğin ObservableHQ bu yapının üzerine standart kütüpnanesinde require metoduyla size asenkron kütüphanelerin yükletimine olanak sağlıyor.

Referanslar

• React Code Splitting
• MDN import
• Modules (ExploringJS)

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.