💠 pnpm

pnpm create vite {프로젝트명}
npm install -g pnpm # pnpm-lock.yaml 파일 생성됨

💠 alias 경로 별칭 설정

alias 경로를 수정하려면 tsconfig.json, vite.config.ts 파일을 모두 고쳐줘야 하지만, 플러그인을 사용하면 tsconfig.json 파일만 수정하고 vite.config.ts 파일에는 플러그인을 사용해주면 된다.

Vite-tsconfig-paths 플러그인 설치

pnpm add -D vite-tsconfig-paths

tsconfig.json

현재 vite의 기본 프로젝트는 tsconfig.json, tsconfig.app.json, tsconfig.node.json으로 나눠서 이루어져 있다.
그래서 나는 tsconfig.app.json 파일에서 path alias 설정을 해주었다.

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,

    /* Path Aliases */
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@app/*": ["src/app/*"],
      "@pages/*": ["src/pages/*"],
      "@widgets/*": ["src/widgets/*"],
      "@features/*": ["src/features/*"],
      "@entities/*": ["src/entities/*"],
      "@shared/*": ["src/shared/*"]
    }
  },
  "include": ["src"]
}

vite.config.ts

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths()],
});