Frontend Academy · درس

Vite: نظام الإضافات ووضع SSR

اكتب إضافة Vite باستخدام hooks باسمَي transform وload، وادمج إضافات خارجية، واضبط Vite للعرض من جهة الخادم باستخدام الخيار ssrBuild

الدرس 1 من 414 خطوة

Vite: نظام الإضافات ووضع SSR درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.

لماذا انتصر Vite؟

أنشأ Evan You أداة Vite، وتعني كلمة Vite بالفرنسية «سريع». تعرض ملفات المصدر في بيئة التطوير دون تجميع، عبر وحدات ES الأصلية، ما يوفّر بدء تشغيل بارد فوريًا. ويستخدم الإنتاج Rollup للتجميع. وتُعد تجربة التطوير فيه أسرع بكثير من Webpack.

كيف يعمل خادم تطوير Vite؟

تدعم المتصفحات الحديثة وحدات ES دعمًا أصليًا. يعرض Vite ملفات المصدر كما هي، ويحوّل TypeScript وJSX عند الطلب. عدم التجميع يعني عدم الانتظار أثناء بدء التشغيل البارد.

الاستبدال السريع للوحدات

يستبدل HMR الوحدات دون إعادة تحميل الصفحة. وتستند آلية HMR في Vite إلى ESM، وهي أسرع بكثير من آلية Webpack. وتتصل به معظم أطر العمل (React وVue وSvelte) لتحديث المكونات على مستوى المكون مع الحفاظ على الحالة.

أساسيات إعداد Vite

اضبط Vite عبر vite.config.ts في جذر المشروع.

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: { port: 5173 },
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-dom']
        }
      }
    }
  }
});

نظام الإضافات

إضافات Vite هي امتداد لإضافات Rollup، مع خطافات إضافية لخادم التطوير. والإضافة عبارة عن كائن، أو دالة تعيد كائنًا، يحتوي على خطافات مسماة.

// myPlugin.ts
export default function myPlugin() {
  return {
    name: 'my-plugin',
    transform(code, id) {
      if (!id.endsWith('.mdx')) return null;
      // transform MDX to JS:
      return { code: compileMdx(code), map: null };
    },
    handleHotUpdate(ctx) {
      // react to file changes
    }
  };
}

// vite.config.ts
import myPlugin from './myPlugin';
export default { plugins: [myPlugin()] };

الخطافات الأساسية

transform(code, id): تعدّل محتوى الملف، مثل ترجمة MDX أو حقن البيئة. load(id): توفّر محتوى للوحدات الافتراضية. resolveId(source): تخصّص طريقة حل الوحدات. configureServer(server): تضيف middleware إلى خادم التطوير.

الإضافات الشائعة

@vitejs/plugin-react (React + Fast Refresh). @vitejs/plugin-vue. vite-plugin-pwa. vite-plugin-svgr (استيراد ملفات SVG كمكونات). vite-plugin-checker (TypeScript وESLint في طبقة تراكبية). vite-plugin-mkcert (HTTPS محلي).

وضع SSR في Vite

يدعم Vite العرض من جانب الخادم باستخدام أساسيات منخفضة المستوى. وتبني أطر مثل Nuxt وSvelteKit وRemix وAstro فوقه. ولتنفيذ SSR مخصص، اتبع دليل SSR الخاص بـ Vite.

// server.ts
import { createServer } from 'vite';

const vite = await createServer({
  server: { middlewareMode: true },
  appType: 'custom'
});

express()
  .use(vite.middlewares)
  .use('*', async (req, res) => {
    const url = req.originalUrl;
    let template = await readFile('index.html', 'utf-8');
    template = await vite.transformIndexHtml(url, template);
    const { render } = await vite.ssrLoadModule('/src/entry-server.ts');
    const appHtml = await render(url);
    res.send(template.replace('<!--app-html-->', appHtml));
  });

البناء لـ SSR

يتطلب الأمر عمليتي بناء: واحدة للعميل وأخرى للخادم. وينتج vite build --ssr entry-server.ts حزمة الخادم.

// package.json
"scripts": {
  "build:client": "vite build",
  "build:server": "vite build --ssr src/entry-server.ts",
  "build": "npm run build:client && npm run build:server"
}

متغيرات البيئة

تكون قيمة import.meta.env.MODE هي 'development' أو 'production'. وتُعرَض المتغيرات المخصصة ذات البادئة VITE_.

معالجة CSS

يتعامل Vite مباشرةً مع CSS وCSS Modules (‏foo.module.css) وPostCSS (يكتشف postcss.config.js تلقائيًا) ومعالجات CSS المسبقة (Sass وLess وStylus). ويمكنك حقن CSS الحرج عبر الإضافات.

Vite مقابل Webpack مقابل Turbopack

Vite: تطوير أصلي لـ ESM، وبناء باستخدام Rollup، ومنظومة واسعة. Webpack: أداة ضخمة قديمة، أكثر قابلية للتهيئة وأبطأ. Turbopack (من Vercel): مبني باستخدام Rust ومتوافق مع Webpack، ومضمّن حاليًا مع Next. للمشاريع الجديدة: استخدم Vite لتطبيقات SPA، وNext أو Turbopack للمشاريع الخاصة بـ Next.

تحقّق سريعًا

لماذا يبدأ خادم تطوير Vite بسرعة أكبر بكثير من خادم Webpack عند التشغيل البارد؟

أجب عليها في الدرس التفاعلي

مراجعة: Vite

خادم تطوير مبني على ESM: بدء تشغيل بارد فوري وHMR سريع. يستخدم الإنتاج Rollup. توسّع الإضافات خطافات Rollup ‏(transform وload وresolveId)، إضافةً إلى خطافات Vite الخاصة (configureServer وhandleHotUpdate). يتوفر وضع SSR عبر createServer مع middlewareMode، ويمكن البناء باستخدام --ssr. تتوفر إضافات لـ PWA وMDX وSVGR وmkcert. استخدم import.meta.env لمتغيرات البيئة. كما أن CSS Modules وPostCSS والمعالجات المسبقة مضمّنة.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 41
الدروس: 163

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «Vite: نظام الإضافات ووضع SSR» مجاني؟

نعم — نص درس «Vite: نظام الإضافات ووضع SSR» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ماذا ستتعلم في «Vite: نظام الإضافات ووضع SSR»؟

اكتب إضافة Vite باستخدام hooks باسمَي transform وload، وادمج إضافات خارجية، واضبط Vite للعرض من جهة الخادم باستخدام الخيار ssrBuild تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟

لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «Vite: نظام الإضافات ووضع SSR»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟

نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Frontend Academy