כיצד ליצור כינוי נתיב ב-SvelteKit כמו תיקיית lib

הגדרת כינויים של נתיב

אם אתה רוצה לשנות את שם התיקיה "lib" המוגדרת על ידי SvelteKit כברירת מחדל או להוסיף כל ספרייה אחרת לייבוא קצר, עליך לעדכן שתי הגדרות.

tsconfig, כך ש-Typescript יוכל לפתור את כינוי הייבוא שלך
ה-svelte-config שלך, שגם צריך לדעת את כינויי הנתיב

עם השינויים האלה, כל ספרייה ב- "src" ניתנת לפתרון באמצעות כינויים של נתיבים, מה שאומר שאתה מקבל ייבוא קצר ופשוט.

עדכון קובץ tsconfig

בדוגמה זו, אוסיף ספרייה חדשה לייבוא קצר, אך אותם שינויים חלים אם ברצונך להחליף את "lib".

הקוד הבא מציג tsconfig.json מעודכן, שבו ה-"paths"-object שופר עם הספרייה החדשה שלי "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;