ما هو Vite؟ دليل مبسّط لمنشئي التطبيقات

Vite (يُنطق "فيت"، وهي كلمة فرنسية تعني "سريع") أداة بناء للمواقع وتطبيقات الويب. أثناء العمل، يشغّل خادم تطوير يُظهر تغييراتك في المتصفح خلال لحظات. وعندما تكون جاهزاً للإطلاق، يجمّع شيفرتك في ملفات صغيرة ومحسّنة يستطيع أي مستضيف للويب تقديمها. وهو مجاني ومفتوح المصدر، وهو الأداة الافتراضية خلف كثير من مشاريع React وVue وSvelte.

لماذا يهم Vite عند البناء بالذكاء الاصطناعي

قد لا تكتب أمر Vite أبداً، لكن إذا بُني تطبيقك بمنشئ تطبيقات بالذكاء الاصطناعي، فمن المرجح أن Vite هو الذي يشغّله. تبدأ مشاريع Mythex الجديدة على Vite + React + TypeScript + Tailwind ما لم تطلب غير ذلك (كيف يُختار التقني).

ومعرفة ما يفعله Vite تساعدك على:

• فهم المعاينة. المعاينة الحية التي تتحدث أثناء تعديل الذكاء الاصطناعي للملفات تكون عادةً خادم تطوير من Vite.
• فهم النشر. يتحول تطبيق Vite إلى مجلد من الملفات الثابتة، من HTML وJavaScript وCSS وصور، وهذا رخيص وبسيط للاستضافة.
• قراءة رسائل الخطأ. عندما تُظهر المعاينة طبقة خطأ حمراء أو صفحة فارغة، فغالباً يكون Vite يُبلغ بأن ملفاً فشل في التجميع.
• معرفة حدوده. يبني Vite الواجهة الأمامية. فإذا احتاج تطبيقك إلى خلفية، مثل قاعدة بيانات أو مفاتيح API سرية أو مدفوعات، فإنها تعمل في مكان آخر. انظر الواجهة الأمامية مقابل الخلفية.

تشبيه من الحياة اليومية

فكّر في مطبخ مطعم.

• أثناء التحضير (التطوير)، يتذوق الطاهي كل طبق ويعدّله أثناء العمل. يغيّر التوابل ويتذوق مرة أخرى بعد ثانية. هذا هو خادم التطوير في Vite: تغيّر ملفاً فتتحدث الصفحة فوراً، وغالباً دون أن تفقد ما كتبته في نموذج.
• لطلب الضيافة (الإنتاج)، يُطهى كل شيء ويُقسّم ويُعبّأ ويُعنون كي يسافر جيداً ويُقدَّم في أي مكان. هذا هو vite build: تُجمَّع شيفرتك وتُصغَّر ويُضاف إليها بصمات، لتصبح ملفات جاهزة لأي مستضيف.

الوصفات نفسها، وطريقتان مختلفتان جداً للتعامل معها، وVite يقوم بالاثنتين.

ماذا تفعل Vite فعلاً

يتكون تطبيق ويب حديث من ملفات كثيرة: مكونات وأنماط وصور ومكتبات طرف ثالث. والمتصفحات لا تستطيع استخدام ذلك كما هو مكتوب. يجب أن تتحول TypeScript إلى JavaScript، وأن يُحوَّل JSX الخاص بـ React، وأن تتحول فئات Tailwind إلى CSS.

يتعامل Vite مع ذلك في وضعين:

كانت الأدوات الأقدم تجمّع التطبيق كله قبل عرض أي شيء، فقد يستغرق بدء المشاريع الكبيرة أو تحديثها وقتاً طويلاً. حيلة Vite هي تجاوز ذلك أثناء التطوير، والسماح للمتصفح بتحميل الملفات عند الحاجة. أما للإنتاج فما زال يجمّع الشيفرة، إذ أصبح ذلك بدءاً من Vite 8 مع أداة تجميع اسمها Rolldown، لأن ملفات كثيرة صغيرة أبطأ للزوار من عدد قليل من الملفات المحسّنة.

مثال عملي: ما الذي يوجد داخل مشروع Vite

إليك تقريباً شكل تطبيق صغير بـ Vite وReact:

my-app/
  index.html          ← صفحة HTML الوحيدة التي يبدأ منها التطبيق
  package.json        ← قائمة المكتبات والسكربتات (التطوير والبناء)
  vite.config.ts      ← إعدادات Vite والإضافات
  src/
    main.tsx          ← يشغّل React ويركّبه داخل index.html
    App.tsx           ← المكون الرئيسي للتطبيق
    index.css         ← الأنماط، مثل @import "tailwindcss";
  public/             ← ملفات تُنسخ كما هي (أيقونة الموقع، robots.txt)

والسكربتات الموجودة في package.json:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

الآن تابع تغييراً واحداً:

1. تطلب من الذكاء الاصطناعي "اجعل العنوان أزرق".
2. يعدّل فئة في App.tsx.
3. يلاحظ Vite أن الملف تغيّر، فيحوّل ذلك الملف وحده ويرسل التحديث إلى المتصفح.
4. يصبح العنوان أزرق في المعاينة، غالباً خلال ثانية.

عند النشر، ينتج vite build شيئاً مثل dist/index.html مع dist/assets/index-a1b2c3.js. ذلك الجزء الذي يبدو عشوائياً في اسم الملف يتغير كلما تغير المحتوى، لذلك تستطيع المتصفحات وشبكات CDN تخزين الملفات لفترة طويلة دون تقديم شيفرة قديمة.

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

لا يعرض Vite لشيفرة المتصفح إلا المتغيرات التي تبدأ أسماؤها بـ VITE_، مثل VITE_PUBLIC_MAP_ID. وهذا إجراء أمني: أي شيء في شيفرة المتصفح يستطيع الزوار رؤيته، لذلك يجب ألا تحمل المفاتيح السرية هذه البادئة وأن تبقى في الخلفية. انظر متغيرات البيئة والأسرار.

المصطلحات الأساسية

مفاهيم خاطئة شائعة

• "Vite إطار عمل." إنه أداة بناء. React أو Vue أو Svelte هو إطار العمل، وVite يشغّله ويجهّزه.
• "تطبيق Vite يتضمن خلفية." تطبيق Vite القياسي واجهة أمامية فقط. تحتاج قواعد البيانات وتسجيل الدخول والمفاتيح السرية إلى خادم أو API بجانبه.
• "خادم التطوير مناسب للنشر على الإنترنت." إنه ليس مصمماً لحركة زيارات حقيقية. انشر دائماً مخرجات البناء للإنتاج.
• "كل ما في .env سري." في تطبيق Vite، تُدمج متغيرات VITE_ في الملفات التي يحمّلها كل زائر.
• "تحديث صفحة تُعطي 404 يعني أن التطبيق معطّل." في تطبيق الصفحة الواحدة، يجب أن يعيد المستضيف توجيه كل مسار إلى index.html. وهذا إعداد استضافة، انظر كيف تصلح أخطاء 404 بعد النشر.

ماذا تطلب من منشئ التطبيق بالذكاء الاصطناعي

• "هل هذا التطبيق Vite فقط (واجهة أمامية)، أم يحتوي على خلفية أيضاً؟ وأين يعمل كل جزء؟"
• "شغّل بناء الإنتاج وأصلح أي أخطاء أو تحذيرات قبل أن أنشر."
• "تأكد من أن المفاتيح السرية ليست في متغيرات VITE_ ولا في أي مكان من شيفرة الواجهة الأمامية."
• "المعاينة تُظهر صفحة فارغة؛ افحص أخطاء Vite وأخطاء وحدة التحكم في المتصفح وأصلح السبب." انظر كيف تصلح الصفحة البيضاء الفارغة.
• "تأكد من أن تحديث أي رابط صفحة يعمل بعد النشر، وليس الصفحة الرئيسية فقط."

Vite في Mythex

كل مشروع Mythex جديد يبدأ على Vite ما لم تطلب Next.js أو HTML ثابتاً أو خلفية مختلفة. تتحدث المعاينة الحية في بيئتك الخاصة المعزولة أثناء تعديل الوكيل للملفات، وينشئ النشر التطبيق ويطلقه، ولا تحتاج إلى إعداد أي استضافة بنفسك. وإذا احتجت لاحقاً إلى API أو قاعدة بيانات، فاطلب ذلك في الدردشة، ويستطيع Mythex إضافة خدمة خلفية بجانب الواجهة الأمامية في Vite (التطبيقات متعددة الخدمات).

الأسئلة