Как создать псевдоним пути в SvelteKit, например, папку lib

Определение псевдонимов путей

Если вы хотите переименовать папку «lib», которая определена SvelteKit по умолчанию, или добавить любой другой каталог для краткого импорта, вам необходимо обновить две конфигурации.

tsconfig, чтобы Typescript мог разрешить ваш псевдоним импорта
ваш svelte-config, который также должен знать псевдонимы пути

С этими изменениями каждый каталог в «src» может быть разрешен с помощью псевдонимов пути, что означает, что вы получаете короткий и простой импорт.

Обновление tsconfig-файла

В этом примере я добавлю новый каталог для краткого импорта, но те же изменения применяются, если вы хотите заменить «lib».

В следующем коде показан обновленный файл tsconfig.json, где объект «paths» был дополнен моим новым каталогом «msw», который является аббревиатурой от «mock service worker». Эта папка содержит весь мой код, связанный с MSW.

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

Обновление svelte-config

Теперь осталось также обновить конфигурацию, используемую SvelteKit, с именем «svelte.config.js». Нам просто нужно обновить конфигурацию объекта «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;