So erstellen Sie einen Pfadalias in SvelteKit wie den lib-Ordner

Pfad-Aliase definieren

Wenn Sie den von SvelteKit standardmäßig definierten „lib“-Ordner umbenennen oder ein anderes Verzeichnis für kurze Importe hinzufügen möchten, müssen Sie zwei Configs aktualisieren.

tsconfig, damit Typescript Ihren Import-Alias auflösen kann
Ihre svelte-config, die auch die Pfad-Aliase kennen muss

Mit diesen Änderungen kann jedes Verzeichnis in „src“ über Pfad-Aliase aufgelöst werden, was bedeutet, dass Sie kurze und einfache Importe erhalten.

Aktualisieren der tsconfig-Datei

In diesem Beispiel füge ich ein neues Verzeichnis für kurze Importe hinzu, aber die gleichen Änderungen gelten, wenn Sie „lib“ ersetzen möchten.

Der folgende Code zeigt eine aktualisierte tsconfig.json, in der das „paths“-Objekt um mein neues Verzeichnis „msw“ erweitert wurde, was eine Abkürzung für „mock service worker“ ist. Dieser Ordner enthält meinen gesamten MSW-bezogenen Code.

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

Aktualisieren der svelte-config

Jetzt muss nur noch die Konfiguration aktualisiert werden, die von SvelteKit mit dem Namen "svelte.config.js" verwendet wird. Wir müssen lediglich die „vite“-Objektkonfiguration aktualisieren. Beachten Sie, dass wir auch den „lib“-Ordner explizit angeben müssen, da unsere Anpassung den Standardordner überschreibt, was bedeutet, dass der „lib“-Ordner kein Alias mehr wäre.

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;