Προσαρμοσμένος φάκελος lib στο SvelteKit

Ορισμός ψευδωνύμων διαδρομής

Εάν θέλετε να μετονομάσετε τον φάκελο "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;

συμπέρασμα

Και αυτό είναι! Με αυτές τις μικρές αλλαγές, μπορείτε να χρησιμοποιήσετε οποιονδήποτε φάκελο στο "src" με ψευδώνυμα διαδρομής για καθαρές και απλές εισαγωγές.