Vite: خادم التطوير والبناء
ابدأ مشروع Vite، واستخدم خادم التطوير ذي HMR الفوري، وشغّل أمر البناء، وعاين مخرجات الإنتاج.
Vite: خادم التطوير والبناء درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ما هو Vite؟
Vite هو أداة بناء للواجهة الأمامية من الجيل التالي، أنشأها Evan You (منشئ Vue). ويوفّر خادم تطوير فائق السرعة باستخدام ESM الأصلي وesbuild، إضافةً إلى بناء للإنتاج يعتمد على Rollup.
إنشاء مشروع Vite
ينشئ npm create vite@latest الهيكل الأولي لمشروع جديد. اختر إطار العمل (Vanilla أو React أو Vue أو Svelte أو Preact أو Lit) والنسخة (JS أو TS). يصبح المشروع جاهزًا فورًا — من دون الحاجة إلى أي إعداد.
npm create vite@latest my-app
# Choose: React + TypeScript
cd my-app
npm install
npm run dev # dev server on localhost:5173خادم التطوير — بدء فوري
لا ينشئ Vite حزمةً في أثناء التطوير، بل يقدّم كل ملف كوحدة ESM أصلية. ويستوردها المتصفح مباشرةً. عدم إنشاء حزمة يعني بدءًا باردًا يستغرق أقل من 100 مللي ثانية، بصرف النظر عن حجم المشروع. ولا يُعاد تجميع سوى الملفات التي تغيّرت عند استخدام HMR.
HMR — استبدال الوحدات السريع
يستبدل HMR في Vite الوحدة التي تغيّرت فقط داخل التطبيق قيد التشغيل، من دون إعادة تحميل الصفحة بالكامل. وفي React مع @vitejs/plugin-react، تُحافَظ على حالة المكوّن أثناء HMR. وتظهر التغييرات في أقل من 50 مللي ثانية.
ملف vite.config.js / vite.config.ts
يُضبط Vite باستخدام ملف vite.config.ts. ومن الخيارات الشائعة: الإضافات، والبدائل في resolve، ومنفذ الخادم، والوكيل لطلبات API، ومجلد مخرجات البناء.
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
resolve: {
alias: { '@': '/src' },
},
server: {
port: 3000,
proxy: {
'/api': 'http://localhost:8080',
},
},
});متغيرات البيئة
يعرِض Vite متغيرات البيئة التي تبدأ بالبادئة VITE_ عبر import.meta.env. خزّنها في .env و.env.development و.env.production. لا تضع البادئة VITE_ للبيانات السرية مطلقًا، لأنها ستُضمَّن في حزمة المتصفح.
# .env
VITE_API_URL=https://api.example.com
# In code:
const apiUrl = import.meta.env.VITE_API_URL;npm run build — بناء الإنتاج
يستدعي npm run build Rollup من وراء الكواليس لتجميع التطبيق وتصغيره وإزالة شفرته غير المستخدمة. وتُوضَع المخرجات في مجلد dist/، وتكون جاهزة للنشر.
npm run build
# Output:
# dist/
# index.html
# assets/
# index-a1b2c3.js (minified app bundle)
# vendor-d4e5f6.js (node_modules chunk)
# index-7h8i9j.cssتحليل الحزمة
استخدم vite-bundle-visualizer أو rollup-plugin-visualizer لإنشاء مخطط شجري لمحتويات الحزمة. يساعد ذلك على تحديد التبعيات الكبيرة والفرص المتاحة للتحميل الكسول.
npm run preview
يقدّم npm run preview بناء الإنتاج الموجود في dist/ محليًا. استخدمه للتحقق من بناء الإنتاج قبل النشر، إذ يكشف المشكلات التي لا تظهر إلا عندما لا يكون التطبيق في وضع التطوير.
تقسيم الشفرة في Vite
تنشئ عبارات import() الديناميكية أجزاءً منفصلة تلقائيًا. كما تؤدي المسارات الكسولة في React Router وdefineAsyncComponent في Vue إلى التقسيم. تحقّق من أحجام الأجزاء في مخرجات البناء.
Vite للمكتبات
ينشئ وضع المكتبة في Vite (build.lib) مكتبات npm، ويُخرجها بتنسيقي ESM وCJS. حدّد قائمة خارجية لمنع تضمين تبعيات الندّ مثل React.
تحقق سريع
لماذا يكون خادم التطوير في Vite أسرع من خادم webpack؟
مراجعة: Vite
ينشئ npm create vite@latest الهيكل الأولي فورًا. يستخدم خادم التطوير ESM الأصلي — فلا حاجة إلى إنشاء حزمة، ويكون HMR فوريًا. يُستخدم vite.config.ts للإضافات والبدائل والوكيل. وتُستخدم البادئة VITE_ لمتغيرات البيئة الآمنة للمتصفح. ينتج npm run build حزمة Rollup محسّنة. ويختبر npm run preview بناء الإنتاج محليًا.
الأسئلة الشائعة
هل درس «Vite: خادم التطوير والبناء» مجاني؟
نعم — نص درس «Vite: خادم التطوير والبناء» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «Vite: خادم التطوير والبناء»؟
ابدأ مشروع Vite، واستخدم خادم التطوير ذي HMR الفوري، وشغّل أمر البناء، وعاين مخرجات الإنتاج. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «Vite: خادم التطوير والبناء»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- وحدات ES: import وexport وdynamic import
- npm وpackage.json: الاعتماديات والبرامج النصية
- Vite: خادم التطوير والبناء
- مفاهيم التجميع: tree shaking وتقسيم الشيفرة