كيفية إنشاء اسم مستعار للمسار في SvelteKit مثل مجلد lib

تحديد الأسماء المستعارة للمسار

إذا كنت تريد إعادة تسمية المجلد "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;