Absolute Imports: Vite TypeScript 2022

여보세요. 여러분, 저는 Vite와 TypeScript로 절대 가져오기를 구성하려고 했고 구성하느라 하루를 잃었습니다. 나는 모든 Stackoverflow 솔루션을 시도했지만 그 중 아무 것도 작동하지 않았습니다. 그래서 저는 이 간단한 해결책을 모두와 공유하기로 했습니다.

1단계 - vite.config.ts

초대에서 절대 가져오기를 구성하려면 구성 파일을 편집해야 합니다. 다음은 구성 파일입니다.

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

export default defineConfig({
  plugins: [react()],
  build: {
    // Here you define your build directory
    outDir: "./server/dist/",
  },
  // Here is config for absolute imports
  resolve: {
    alias: {
      // You can configure this in any way you like it
      // Below is my example
      "@components": "./src/components/",
      "@hooks": "./src/hooks/",
      "@utils": "./src/utils/",
    },
  },
});

2단계 - tsconfig.json

이것은 까다로운 부분인데, 구성하기 어렵기 때문이 아니라 정의된 경로 뒤에 *(와일드카드)를 갖는 것이 매우 중요하기 때문입니다.

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    // To configure import you need to add paths config
    "paths": {
      // ⭐️ It is very important to put /* in both key and value config
      "@components/*": ["./src/components/*"],
      "@utils/*": ["./src/utils/*"],
      "@hooks/*": ["./src/hooks/*"]
    }
  },
  "include": ["src"],
}

유효한 구성

"paths": {
      "@components/*": ["./src/components/*"],
      "@utils/*": ["./src/utils/*"],
      "@hooks/*": ["./src/hooks/*"]
    }

잘못된 구성

"paths": {
      "@components": ["./src/components"],
      "@utils": ["./src/utils"],
      "@hooks": ["./src/hooks"]
    }

여전히 문제가 있습니까?

VS Code를 사용하는 경우 CMD+SHIFT+P를 누르고 TypeScript Restart TS Server를 입력하여 TS 서버를 다시 시작하십시오.