Vite'de Gelişmiş Yol Takma Adları

Gelişmiş yol takma adları, Vite projelerinizde daha temiz ve öngörülebilir bir kod yapısı oluşturmanıza yardımcı olur. Bu makalede, Vite'de gelişmiş yol takma adlarını nasıl kullanabileceğinizi öğreneceksiniz.

Gelişmiş Yol Takma Adlarının Faydaları

Gelişmiş yol takma adları, uzun ve karmaşık yol ifadelerini kısaltmanızı sağlar. Bu, kodunuzun daha okunabilir ve bakımının daha kolay olmasını sağlar.

Vite Proje Yapısı

Bu makalede, aşağıdaki Vite proje yapısını kullanacağız: my-vite-app/ ├── public/ ├── src/ │ ├── assets/ │ │ └── logo.svg │ ├── components/ │ │ ├── ui/ │ │ │ └── Button.tsx │ │ └── layout/ │ │ └── Navbar.tsx │ ├── hooks/ │ │ ├── useAuth.ts │ │ └── useFetch.ts │ ├── pages/ │ │ ├── Home.tsx │ │ └── Dashboard.tsx │ ├── utils/ │ │ ├── formatDate.ts │ │ └── apiHelper.ts │ ├── services/ │ │ └── authService.ts │ ├── store/ │ │ └── useStore.ts │ ├── types/ │ │ └── index.d.ts │ ├── App.tsx │ └── main.tsx ├── index.html ├── vite.config.ts └── tsconfig.json

Vite Konfigürasyonu

Vite konfigürasyonunu yapmak için, vite.config.ts dosyasını açın ve aşağıdaki kodu ekleyin:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@components': path.resolve(__dirname, 'src/components'),
      '@hooks': path.resolve(__dirname, 'src/hooks'),
      '@utils': path.resolve(__dirname, 'src/utils'),
      '@pages': path.resolve(__dirname, 'src/pages'),
      '@assets': path.resolve(__dirname, 'src/assets'),
      '@services': path.resolve(__dirname, 'src/services'),
      '@store': path.resolve(__dirname, 'src/store'),
      '@types': path.resolve(__dirname, 'src/types'),
    },
  },
});

TypeScript Konfigürasyonu

TypeScript konfigürasyonunu yapmak için, tsconfig.json dosyasını açın ve aşağıdaki kodu ekleyin:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@hooks/*": ["src/hooks/*"],
      "@utils/*": ["src/utils/*"],
      "@pages/*": ["src/pages/*"],
      "@assets/*": ["src/assets/*"],
      "@services/*": ["src/services/*"],
      "@store/*": ["src/store/*"],
      "@types/*": ["src/types/*"]
    }
  },
  "include": ["src"]
}

Yol Takma Adlarını Kullanma

Artık yol takma adlarını kullanmaya başlayabilirsiniz. Örneğin, bir bileşen dosyasında aşağıdaki kodu kullanabilirsiniz:

import Button from '@components/ui/Button';
import Navbar from '@components/layout/Navbar';

Gelişmiş yol takma adları, Vite projelerinizde daha temiz ve öngörülebilir bir kod yapısı oluşturmanıza yardımcı olur. Bu makalede, Vite'de gelişmiş yol takma adlarını nasıl kullanabileceğinizi öğrendiniz.