[Sveltekit] alias설정으로 경로 줄여서 모듈 import 편하게 하기. (ex $app, $lib)

sveltekit에서 모듈을 추가할때면 import를 사용합니다.

 

<script>
    import { onMount } from "svelte";
    import { page } from '$app/stores'
    import { browser } from "$app/environment";
    ...
</script>

복잡한 app 경로는 "$app" 과 같은 이름으로 이용합니다.

이외에도 "/src/lib" 경로를 "$lib"으로 사용하기도 합니다.

 

 

 

기본적으로 모듈은 상대경로를 사용하고, 마지막에 모듈명을 써줍니다.

"/MyModule.js"

폴더 경로가 복잡하면 이런 경우도 생기게 되죠

"/src/components/module/MyModule.js"

그리고 지금 쓰고 싶은 코드 경로가 복잡하면 이련경우도 생기게 됩니다.

"../../../../MyModule.js"

"../../../MyModule.js"

"../../MyModule.js"

그리고 같은 코드를 다른곳에 쓰고 싶어서 import부분을 복붙하다보면 상대경로가 달라져서 오류가 나곤합니다.

 

 

 

이럴때는 편하게 사용하기위해 경로를 미리 설정해놔야합니다.

위에서 말한 $lib, $app 같은 경우죠. 

원리는 Vite로 인해 빌드 될때, 경로가 교체됩니다.

 

 

 

 

설정하는 방법은 간단합니다.

 

root폴더에 있는 svelte.config.js를 수정하면 됩니다.

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite'; 

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter({
            runtime: 'nodejs18.x',
        }),
        alias: {
            $util:'/src/util'
        }
    },
    preprocess: vitePreprocess(),
};

export default config;

export하고 있는 config 객체를 수정하면 됩니다.

 

자주 쓰는 util 경로를 등록해보겠습니다.

config.kit.alias부분에 $util:'/src/util' 을 적어줍니다.

 

여러개를 등록하고 싶으면 config.kit.alias부분에 더 추가해주면 됩니다.

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite'; 

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter({
            runtime: 'nodejs18.x',
        }),
        alias: {
            $util:'/src/util',
            my-directory:'/src/my/directory'
        }
    },
    preprocess: vitePreprocess(),
};

export default config;

 

설정이 됬으면 "npm run dev" 명령어로 한번 실행해서 빌드해줍니다.

 

 

<script>
    import { onMount } from "svelte";
    import { page } from '$app/stores'
    import { browser } from "$app/environment";
    import { MyFunc } from '$util/MyModule.js'
    ...
</script>

한번 빌드가 되면 그때부턴 script부분에서 import명령어를 이용해서

복잡한 경로를 적지않고 alias에 적어둔 $util(숏컷)을 사용할 수 있습니다.