Vite 폴더 alias 설정

Tags:
Views:
5
Category:
Post
Posted on:
2024. 3. 29.

Vite 폴더 alias

폴더 alias 란?

개발 하며 임포트 경로를 보면 상당히 지저분한 경우가 많다...

// ex)
import  Components from "../../../../Components"

next.js에서 폴더 alias로 @를 붙여 사용하는 것을 보고 방법이 없을까 찾아 보았다.

step 1

// tsconfig.json
{
  "compilerOptions": {
    ...
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"],
      "@components/*": ["components/*"],
      "@shared/*": ["components/shared/*"]
    },
  },
  ...
}

step 2

// vite.config.ts
export default defineConfig({
  ...
  resolve: {
    alias: [
      { find: '@', replacement: path.resolve(__dirname, 'src') },
      {
        find: '@components',
        replacement: path.resolve(__dirname, 'src/components'),
      },
      {
        find: '@shared',
        replacement: path.resolve(__dirname, 'src/components/shared'),
      },
    ],
  },
});

step 3

import CustomButton from "@shared/CustomButton";

이렇게 사용하면 된다.

vite plugin 활용 방법

npm i -D vite-tsconfig-paths

//* vite.config.ts
export default defineConfig({
  ...
  resolve: {
     plugins: [react(), tsconfigPaths()],
  },
});

참고로 cra에서 folder alias를 사용하기 위해 eject를 하는 등 복잡하다고 함...

# Vite 폴더 alias
### 폴더 alias 란?
개발 하며 임포트 경로를 보면 상당히 지저분한 경우가 많다...

```js
// ex)
import  Components from "../../../../Components"  
```
next.js에서 폴더 alias로 @를 붙여 사용하는 것을 보고 방법이 없을까 찾아 보았다.

### step 1
```ts
// tsconfig.json
{
  "compilerOptions": {
    ...
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"],
      "@components/*": ["components/*"],
      "@shared/*": ["components/shared/*"]
    },
  },
  ...
}   
```
### step 2
```js
// vite.config.ts
export default defineConfig({
  ...
  resolve: {
    alias: [
      { find: '@', replacement: path.resolve(__dirname, 'src') },
      {
        find: '@components',
        replacement: path.resolve(__dirname, 'src/components'),
      },
      {
        find: '@shared',
        replacement: path.resolve(__dirname, 'src/components/shared'),
      },
    ],
  },
});
```
step 3
```js
import CustomButton from "@shared/CustomButton";
```
이렇게 사용하면 된다.

### vite plugin 활용 방법

```js
npm i -D vite-tsconfig-paths

//* vite.config.ts
export default defineConfig({
  ...
  resolve: {
     plugins: [react(), tsconfigPaths()],
  },
});
```

참고로 cra에서 folder alias를 사용하기 위해 eject를 하는 등 복잡하다고 함...