경로 별칭 Vite + React를 설정하는 방법

경로 별칭이 필요한 이유는 무엇입니까?

Vite의 경로 별칭을 사용하면 모듈을 가져올 때 프로젝트 디렉토리에 대한 사용자 정의 경로를 사용할 수 있습니다.
⁠React 프로젝트를 진행 중이라고 가정해 보겠습니다. 카드 구성 요소에서 카드를 만들기 위해 세 가지 다른 구성 요소를 가져오고 싶습니다. 버튼, 헤더, 이미지를 가정해 보겠습니다.

우리는 이렇게 쓸 수 있습니다

import Button from '../../components/Button'
import Header from '../../components/ui/Header'
import Image from '../../components/Image'

⁠
지금은 좋아 보이지만 구성 요소를 리팩터링하거나 개선하고 약 5~6개의 구성 요소를 더 가져와야 하는 경우를 생각해 보세요. 그러면 지저분해지기 시작합니다.

import Button from '../../components/Button'
import Header from '../../components/ui/Header'
import Image from '../../components/Image'
import Panel from "../../components/Dashboard/Panel";
import Input from "../../components/Forms/Input";
import Submit from "../../components/Forms/Submit"

경로 가져오기가 유용해지는 곳은 가져오기 문을 더 깔끔하고 관리하기 쉽게 만드는 것입니다. Path Alias를 사용하면 위에 있는 내용이

import Button from '@/src/components/Button'
import Header from '@/src/components/ui/Header'
import Image from '@/src/components/Image'

자동 가져오기를 사용하지 않는 경우 작업 중인 구성 요소에서 디렉터리가 얼마나 떨어져 있는지 기억할 필요가 없습니다. 파일을 이동하거나 프로젝트 구조를 리팩터링해야 할 때 코드 구성을 단순화할 뿐이며, 코드베이스 전체에서 수많은 상대 가져오기 경로를 업데이트할 필요가 없습니다

프로젝트에 경로 별칭 추가

먼저 React + Vite를 설치해야 합니다
⁠pnpm vite setup-path-alias 생성 --template 반응
다음으로 방금 생성한 프로젝트 디렉터리로 이동하여 실행합니다

cd setup-path-alias                                                                                                                                         pnpm install 
pnpm run dev    

참고: 저는 바로가기를 사용하여 템플릿으로 Vite 앱을 만들었습니다. 원하는 다른 방법을 사용할 수 있습니다. 따라서 앱을 만드는 한. 저도 pnpm을 사용했는데 선호하는 패키지 관리자(npm, Yarn, Bun....)를 사용해도 됩니다.

이 작업이 완료되면 Vite 프로젝트 디렉토리는 다음과 같습니다
⁠├── 공개
├── src/
│ └── 구성요소/
│ └── HelloWorld.jsx
├── .gitignore
├── index.html
├── package.json
├── README.md
└── vite.config.js

⁠이제 vite.config.js 파일로 이동하세요. 기본적으로 파일은 다음과 같이 표시됩니다.

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

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

다음으로 Path 모듈을 설치하고 이를 사용하여 절대 경로를 생성하는 데 도움이 되는 path.resolve() 메서드를 사용합니다.

pnpm i 경로

그런 다음 vite.config.js 파일에서 경로 별칭을 확인하고 결과는 다음과 같습니다

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    }
  },
});

VS Code IntelliSense 구성

VS Code가 별칭을 인식하도록 하려면 프로젝트 루트에서 jsconfig.json을 생성하거나 업데이트하세요.

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

그런 다음
에서 가져오기를 업데이트할 수 있습니다.

import Button from '../../components/Button'
//to this
⁠import Button from '@/src/components/Button'

이와 같이 경로 별칭을 만들고 원하는 만큼 많은 경로를 확인한 다음 Intellisense를 업데이트할 수 있습니다. 내 프로젝트는 작고 기본적으로 src 폴더에는 모든 프로젝트 파일이 포함되어 있기 때문에 더 간단하게 만들었습니다. 그런 다음 src를 가리킬 수 있지만 코드에서 구성 요소 폴더를 여러 번 사용할 때는 그냥 추가하면 됩니다. 가져오기를 깨끗하게 유지하려면 경로 별칭에 추가하세요. 그런 다음 별칭을 과도하게 사용하지 않는 것이 좋습니다. 가져오기를 단순화할 수는 있지만 과도하게 사용하면 새 팀 구성원이 코드를 덜 직관적으로 만들 수 있기 때문입니다. 일반적으로 자주 액세스하는 디렉토리에는 별칭을 사용하세요.

⁠    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
  },

잠재적인 문제와 이를 방지하는 방법

1. 순환 종속성: 순환 종속성이 생성되지 않도록 별칭을 사용할 때는 주의하세요. 항상 명확한 계층 구조를 유지하는 방식으로 가져오기를 구성하세요.
2. 별칭 남용: 별칭을 사용하면 가져오기가 단순화될 수 있지만, 지나치게 사용하면 새 팀 구성원이 코드를 덜 직관적으로 사용할 수 있습니다. 일반적으로 자주 액세스하는 디렉토리에는 별칭을 사용하세요.
3. 일관되지 않은 이름 지정: 프로젝트 전체에서 별칭에 대해 일관된 이름 지정 규칙을 고수하세요. 예를 들어, 별칭 경로에는 항상 '@' 접두사를 사용하세요.
4. jsconfig.json 업데이트를 잊어버린 경우: vite.config.js에 새 별칭을 추가하는 경우 IDE 지원을 유지하려면 jsconfig.json도 업데이트해야 합니다.
5. 별칭 충돌: 혼란과 잠재적인 오류를 방지하려면 별칭 이름이 npm 패키지 이름 또는 브라우저 전역과 충돌하지 않는지 확인하세요.

읽어주셔서 감사합니다

위 내용은 경로 별칭 Vite + React를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!