Hoe om 'n pad-alias in SvelteKit te skep soos die lib-gids

Definieer pad aliasse

As jy die "lib"-vouer wat by verstek deur SvelteKit gedefinieer is, wil hernoem of enige ander gids wil byvoeg vir kort invoere, moet jy twee konfigurasies opdateer.

tsconfig, sodat Typescript jou invoer-alias kan oplos
jou svelte-config, wat ook die pad-aliasse moet ken

Met hierdie veranderinge kan elke gids in "src" opgelos word via padaliasse, wat beteken dat jy kort en eenvoudige invoere kry.

Opdatering van die tsconfig-lêer

In hierdie voorbeeld sal ek 'n nuwe gids byvoeg vir kort invoere, maar dieselfde veranderinge geld as jy "lib" wil vervang.

Die volgende kode wys 'n opgedateerde tsconfig.json, waar die "paths"-objek verbeter is met my nuwe gids "msw", wat 'n afkorting is vir "mock service worker". Hierdie gids bevat al my MSW-verwante kode.

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

Opdatering van die svelte-config

Wat nou oorbly, is om ook die konfigurasie op te dateer wat deur SvelteKit verbruik word, genaamd "svelte.config.js". Ons moet eenvoudig die "vite"-voorwerpkonfigurasie opdateer. Let daarop dat ons ook die "lib"-vouer eksplisiet moet verskaf, aangesien ons aanpassing die verstek een oorheers, wat beteken dat die "lib"-vouer nie meer 'n alias sal wees nie.

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;