Egyéni lib-mappa a SvelteKitben

Hogyan hozzunk létre elérési aliast a SvelteKitben

Útvonal álnevek meghatározása

Ha át szeretné nevezni a SvelteKit által alapértelmezés szerint meghatározott „lib” mappát, vagy bármilyen más könyvtárat szeretne hozzáadni a rövid importáláshoz, két konfigurációt kell frissítenie.

  • tsconfig, hogy a Typescript fel tudja oldani az importálási álnevet
  • a svelte-config, amelynek ismernie kell az elérési út álneveit is

Ezekkel a változtatásokkal az „src” minden könyvtára feloldható elérési álnevekkel, ami azt jelenti, hogy rövid és egyszerű importálást kap.

A tsconfig-fájl frissítése

Ebben a példában egy új könyvtárat adok hozzá a rövid importáláshoz, de ugyanezek a változtatások érvényesek, ha le szeretné cserélni a „lib” szót.

A következő kód egy frissített tsconfig.json fájlt mutat, ahol a „paths”-objektum az új „msw” könyvtárammal bővült, amely a „mock service worker” rövidítése. Ez a mappa tartalmazza az összes MSW-vel kapcsolatos kódomat.

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

A svelte-config frissítése

Most már csak a SvelteKit által felhasznált „svelte.config.js” konfiguráció frissítése maradt hátra. Egyszerűen frissítenünk kell a „vite”-objektum konfigurációját. Ne feledje, hogy a „lib” mappát is kifejezetten meg kell adnunk, mivel a testreszabásunk felülírja az alapértelmezettet, ami azt jelenti, hogy a „lib” mappa már nem lesz álnév.

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;

Következtetés

És ez az! Ezekkel a kis változtatásokkal az „src” bármely mappáját használhatja elérési aliasokkal a tiszta és egyszerű importálás érdekében.