Vite Absolute Path

Son zamanlarda CRA yerine Vite ile React projelerimi geliştiriyorum. Hem daha hızlı hem de build sürecinde staging olayını ek bir ayar yapmadan kullanabiliyoruz bu da avantaj sağlıyor. CRA'da absolute path ile Vite'de kurulumlar biraz farklı.

Absolute Path ile kesin bir yol tanımı yapıp nerede olursak olalım bu kesin yol tanımını kullanarak dosyalarımızı çağırabiliyoruz. Yani şöyle import işlemlerini:

import Header from '../../components/Header'
import HeroSection from '../../components/HeroSection';
import { numberFormat } from '../../../helpers/Mixins';

Nihayetinde şöyle kullanmak için:

import Header from '~/components/Header'
import HeroSection from '~/components/HeroSection';
import { numberFormat } from '~/helpers/Mixins';

Şu adımları takip edin:

Eğer typescript kullanıyorsan tsconfig.json javascript kullanıyorsanız jsconfig.json dosyasını ana dizinde oluşturun ve içine şunları yazın:

{
	"compilerOptions": {
	    "baseUrl": "./src",
	    "paths": {
	      "~/*": ["./*"]
	    }
	}
}

ve vite.config.(ts|js) dosyanızı açıp şunu ekleyin:

resolve: {
    alias: {
      '~': path.resolve(__dirname, 'src'),
    },
  },

Eğer path bulamazsa en üstte şöyle import edin:

import * as path from "path"

Vite'i yeniden başlatın, hazırsınız :)