Come creare un alias di percorso in SvelteKit come la cartella lib

Definizione degli alias di percorso

Se vuoi rinominare la cartella "lib" definita da SvelteKit per impostazione predefinita o aggiungere qualsiasi altra directory per importazioni brevi, devi aggiornare due configurazioni.

tsconfig, in modo che Typescript possa risolvere l'alias di importazione
il tuo svelte-config, che deve anche conoscere gli alias di percorso

Con queste modifiche, ogni directory in "src" può essere risolta tramite alias di percorso, il che significa che si ottengono importazioni brevi e semplici.

Aggiornamento del file tsconfig

In questo esempio, aggiungerò una nuova directory per le importazioni brevi, ma le stesse modifiche si applicano se si desidera sostituire "lib".

Il codice seguente mostra un tsconfig.json aggiornato, in cui l'oggetto "percorsi" è stato migliorato con la mia nuova directory "msw", che è l'abbreviazione di "lavoratore del servizio fittizio". Questa cartella contiene tutto il mio codice relativo a MSW.

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

Aggiornamento di svelte-config

Ora non resta che aggiornare anche la configurazione consumata da SvelteKit, denominata "svelte.config.js". Dobbiamo semplicemente aggiornare la configurazione dell'oggetto "vite". Nota che dobbiamo anche fornire esplicitamente la cartella "lib", poiché la nostra personalizzazione sovrascrive quella predefinita, il che significa che la cartella "lib" non sarebbe più un alias.

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;