How can I simplify my imports when using SvelteKit with Vite bundler, like $lib/?

Question

I am currently working on a project using SvelteKit with Vite bundler and I'm finding that my imports are becoming overly complicated. For example, to access certain files, I have to write imports like this: import GtoolsStore from "../../../../../../../../database/Gtools/GtoolsStore"; As you can see, there are many "../" required to access the file.

This is not only tedious to write, but it also makes it harder to read and understand the code. It also makes it more difficult to refactor the code, since changing the file structure could require many updates to import statements throughout the project.

In SvelteKit, we have various base URLs like $lib/ which are useful for simplifying imports. For example, instead of writing ../../../../../myFolder/myComponent.svelte, we can simply use $lib/myFolder/MyComponent.

However, I would like to create custom base URLs for specific folders like $src and $database without overriding existing base URLs like $lib and $app. I imagine this could be done through some kind of configuration file, such as {baseUrls: {"src": ./src, "database": $src/database}}.

By using custom base URLs, I hope to simplify my imports and make it easier to work with the project. However, I'm not sure how to do this properly in SvelteKit and Vite, and I'm concerned about potential conflicts with TypeScript and VSCODE's autocomplete and IntelliSense.

Therefore, I would appreciate any guidance or advice on how to create custom base URLs in SvelteKit and Vite, and how to ensure that this solution works well with VSCODE's autocomplete and intellisense, as well as TypeScript. Thank you in advance for your help!

here is an example of structure in VSCODE
(if you need it,
but should work also in others by a simple configuration I believe.)

Candelariacandelario

Answer 1

In SvelteKit, you can use a concept called alias which you can learn by using docs: https://kit.svelte.dev/docs/configuration#alias

Here's the simplest example of how to change the svelte.config.js file to solve our problem:

(use the next one, not this, this is only the simplest example):

/**
 * @type {import('@sveltejs/kit').Config}
 */
const config = {
  kit: {
    alias: {
      '$src': './src',
      '$database': './src/database'
    }
  }
};

export default config;

but the better complete one is
(since I see you have tailwind and so much other things, so this config won't break your code):

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

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://kit.svelte.dev/docs/integrations#preprocessors
    // for more information about preprocessors
    preprocess: vitePreprocess(),

    kit: {
        // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
        // If your environment is not supported or you settled on a specific environment, switch out the adapter.
        // See https://kit.svelte.dev/docs/adapters for more information about adapters.
        adapter: adapter(),
        // see https://kit.svelte.dev/docs/configuration#alias for more information about alias
        alias: {
            $src: './src',
            $database: './src/database',
        }
    }
};

export default config;

In this example, we define two aliases: $src and $database, which point to the src/ and src/database/ directories in our project. You can define as many aliases as you need and name them however you like.

Now, in your Svelte components or JavaScript files, you can import files from these directories using the aliases you defined:

import GtoolsStore from '$database/Gtools/GtoolsStore';
import MyComponent from '$src/myFolder/MyComponent.svelte';

As you can see, the imports are much simpler.

Remember if you have existing imports that use relative paths, you'll need to update them to use the aliases instead.

---

EDIT:

It is not obligatory to use the prefix $

you can use any prefix,
But to be consistent with Svelte it is better to follow the $lib notation...

if you really don't like it
You can even avoid using it, by doing so

const config = {
  kit: {
    alias: {
      src: './src',
      database: './src/database'
    }
  }
};

and your imports will become like this:

import GtoolsStore from 'database/Gtools/GtoolsStore';
import MyComponent from 'src/myFolder/MyComponent.svelte';

Petronille