lib 폴더와 같은 SvelteKit에서 경로 별칭을 만드는 방법

경로 별칭 정의

기본적으로 SvelteKit에 의해 정의된 "lib" 폴더의 이름을 바꾸거나 짧은 가져오기를 위해 다른 디렉토리를 추가하려면 두 개의 구성을 업데이트해야 합니다.

Typescript가 가져오기 별칭을 확인할 수 있도록 tsconfig
경로 별칭도 알아야 하는 svelte-config

이러한 변경으로 "src"의 모든 디렉토리는 경로 별칭을 통해 확인할 수 있습니다. 즉, 짧고 간단한 가져오기를 얻을 수 있습니다.

tsconfig 파일 업데이트

이 예에서는 짧은 가져오기를 위한 새 디렉토리를 추가하지만 "lib"를 바꾸려는 경우에도 동일한 변경 사항이 적용됩니다.

다음 코드는 업데이트된 tsconfig.json을 보여줍니다. 여기서 "경로"-객체는 "모의 서비스 작업자"의 약어인 새 디렉터리 "msw"로 향상되었습니다. 이 폴더에는 모든 MSW 관련 코드가 포함되어 있습니다.

{
  "compilerOptions": {
    ...
    "paths": {
      "$lib": ["src/lib"],
      "$lib/*": ["src/lib/*"],
      "$msw": ["src/msw"],
      "$msw/*": ["src/msw/*"]
    }
  },
  ...
}

svelte-config 업데이트

이제 남은 것은 "svelte.config.js"라는 SvelteKit에서 사용하는 구성도 업데이트하는 것입니다. "vite"-객체 구성을 업데이트하기만 하면 됩니다. 사용자 정의가 기본 폴더를 재정의하므로 "lib" 폴더도 명시적으로 제공해야 합니다. 즉, "lib" 폴더는 더 이상 별칭이 되지 않습니다.

import adapter from "@sveltejs/adapter-auto";
import preprocess from "svelte-preprocess";
import path from "path";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
  preprocess: preprocess(),

  kit: {
    adapter: adapter(),
    vite: {
      resolve: {
        alias: {
          $msw: path.resolve("./src/msw"),
          $lib: path.resolve("./src/lib")
        }
      }
    }
  }
};

export default config;