⚙️Absolute imports Js for vite

สำหรับ Javascript และ Typescript

#Javascript

ปกติการ import โดยทั่วไปจะใช้ลักษณะ path อย่างนี้

import Cards from "components/cards";

แต่เมื่อใช้ Vite จะต้องทำในลักษณะนี้

import Cards from “/src/components/cards.jsx”

เพราะว่าตัว Vite ไม่มี inbuilt src path ในตัว

วิธีแก้ไข

ให้ไปที่ไฟล์ vite.config.js และแก้ไขดังนี้

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

export default defineConfig({
  resolve: {
    alias: [
      {
        find: "common",
        replacement: resolve(__dirname, "src/common"),
      },
    ],
  },

  plugins: [react()],
});

#TypeScript

ส่วนสำหรับ Typescrit ให้ตั้งค่าตามนี้ ไปที่ไฟล์ vite.config.js และแก้ไขดังนี้

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

export default defineConfig({
  resolve: {
   alias : [{ find: "@", replacement: "/src" }]    
  },
  plugins: [react()],
});

และในไฟล์ tsconfig.json ให้ใส่ค่าดังนี้

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

Ref

1.https://blog.logrocket.com/vite-3-vs-create-react-app-comparison-migration-guide/

2.https://www.telerik.com/blogs/whats-vite-guide-modern-super-fast-project-tooling