Photo by Hannah Jacobson on Unsplash

Bootstrap

React Projenizi CRA (Create React App)’den Vite.JS Dönüştürme

React’ın yeni versiyonu ile birlikte CRA giderek gözden düştü, Framework’ ler döneminde temel React projesi üretmek için önerilen Vite.js peki CRA projenizi Vite.js dönüştürürken ne gibi sorunlar karşınıza çıkabilir bunları nasıl çözeriz ?

Bundan önceki yazılarımızda React ekibinin react.dev yeni bir React projesi oluştururken frameworklere yönelttiğini ;

https://react.dev/learn/start-a-new-react-project

Can I use React without a framework? durumunda ise Vite.js ve Parcel önerdiğini biliyoruz. Yani CRA (Create React App) ile yeni React projesi üretmeyi olabildiğince desteklemediğini duyurdu.

Hatta bu konu hakkında CRA (Create React App) Neden Sonlandırıldı (Bir Nevi Öldürüldü) ? ismiyle bir blog paylaşmıştım.

Sonuç itibari ile Vite.js indirilme sayısında ciddi bir artış varken 6.2M CRA da 130K inmiş durumda

Mevcut sürümlerde sorun olmasa bile gelecek React projelerinde sorun yaşamamak için projenizi arkaplanda Vite.js geçirebilirsiniz.

Bu geçiş sırasında karşılaştığım bazı deneyimlerden bahsediyor olacağım.

Import Relative Path (Alias)

CRA (Webpack)

Bu işlemi webpack’de yaparken alias tanımlamadan jsconfig.json dosyasında aşağıdaki şekilde tanımlama yaptığınızda

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

src klasörün altındaki diğer klasörlere istediğiniz dizindeki bileşenden örneğin aşağıdaki gibi erişebilirsiniz

import RouteManager from 'routing/RouteManager'
import IconManamger from 'asset/icons/IconManager'

gibi ama bu işlemin Vite.js bildiğim kadarı ile tam karşılığı yok ondan dolayı alias yöntemi ile işimizi çözmeye çalışıyoruz.

Vite.js

Vite.js bunu alias pathler ile tanımlamamız gerekiyor importlarda ufak bir değişiklik yapacağız

import RouteManager from '@routing/RouteManager'
import IconManamger from '@asset/icons/IconManager'

Bunu yapabilmek için jsconfig.json kısmında aşağıdaki gibi path tanımlamanız gerekiyor

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@assets/*": ["src/assets/*"],
      "@routing/*": ["src/routing/*"],
    }
  },
  "include": ["src"]
}

vite.config.js dosyasında da alias tanımları vermeniz gerekiyor.

  resolve: {
    alias: {
      "@assets": `${path.resolve(__dirname, "./src/assets/")}`,
      "@routing": `${path.resolve(__dirname, "./src/routing/")}`,
    },
  },

React.lazy() → Dynamic Variable Load

Bir diğer gördüğüm noktada webpack tarafında React.lazy ile bir bileşen dynamic olarak yüklemeye çalıştığımızda

  const PageComp = React.lazy(() => import(`pages/${el.modulePath}`));

webpack sadece ön kısmında pages/ gibi bir sabitin olmasını diğer kısmın aa/bb/cc olabilmesine imkan tanıyor. Halbuki vite.js

const PageComp = React.lazy(() => import(`pages/${el.modulePath}/index.jsx`));

başında ve sonunda bir sabitin olmasını (pages/…./index.jsx) gibi ve el.modulePath “/” içermemesini variable tanımlamarına bu dinamiklik kısıtlaması oldukça fazla yani

Önemli Not:

Bu kısımda Vite.js getirdiği bir kısıtlamadan bahsetmek istiyorum. Birden fazla folder path desteklemiyor. Webpack n level depth dosyaları import edebilirken Vite için

• ./ ile başlamalı ve
• direk bir seviye değişken variable dosya ismi verilebiliyor)

https://vitejs.dev/guide/features.html#dynamic-import

Default Eslint Rules

CRA ile oluşturduğumuz projelerde PropTypes zorunlu değilken Vite.js eslint ile bu ve bunun gibi başka kurallarda default’da gelir.

/* eslint-disable react/prop-types */
/* eslint-disable no-unused-vars */