قم بإعداد HMR لـ SvelteKit مع Gitpod

SvelteKit و Gitpod

إذا كنت ترغب في الاستفادة الكاملة من SvelteKit و "Hot Module Reloading" الخاص به في Gitpod ، فسيلزم إجراء تغيير بسيط على التكوين الخاص بك لجعله يعمل. إذا لم يكن الأمر كذلك ، فمن المرجح أن يحدث إعادة تحميل كل بضع ثوانٍ بدلاً من حدوثها فقط عند حفظ التغييرات.

باستخدام Vite’s HMR في Gitpod

يُظهر مقتطف الشفرة التالي تكوينًا بسيطًا ، حيث نقوم بتغيير الجزء المناسب لعمل Vite.

نخبر Vite بشكل أساسي كيف يبدو عنوان URL الخاص بنا وما هو البروتوكول الذي يجب استخدامه ، حيث نحتاج إلى التأكد من استخدام WebSocket وليس HTTPS في سياق Gitpod.

import adapter from "@sveltejs/adapter-auto";
import preprocess from "svelte-preprocess";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: preprocess(),
  kit: {
    adapter: adapter(),
    vite: {
      server: {
        // Configure Vite for HMR with Gitpod.
        hmr: process.env.GITPOD_WORKSPACE_URL
          ? {
              // Due to port fowarding, we have to replace
              // 'https' with the forwarded port, as this
              // is the URI created by Gitpod.
              host: process.env.GITPOD_WORKSPACE_URL.replace("https://", "3000-"),
              protocol: "wss",
              clientPort: 443
            }
          : true
      }
    }
  }
};

export default config;

مع هذا التغيير الصغير ، فإن تطوير PWA التالي باستخدام SvelteKit يعمل بشكل جيد تمامًا في Gitpod!