Vite يركز على تجربة تطوير سريعة وبناء production واضح. لكن أداة البناء ليست تصميمًا معماريًا كاملًا؛ أنت ما زلت مسؤولًا عن تنظيم الملفات، إدارة الحالة، والتحقق من الروابط. دليل Vite الرسمي يشرح بداية المشروع وأوامر التطوير والبناء [1].
ابدأ بأقل قالب
اختر framework الذي تحتاجه، أو Vanilla عندما يكون المشروع ودجت أو صفحة واحدة. ثبّت dependencies من خلال مدير حزم واحد، واحتفظ بالـlockfile. لا تضف router أو state library قبل ظهور حاجة حقيقية.
npm create vite@latest ignis-widget -- --template vanilla
cd ignis-widget
npm install
npm run devافصل dev عن production
بيئة التطوير تسمح برسائل تفصيلية وhot reload، أما production فيحتاج ملفات ثابتة مضغوطة ومسارات صحيحة. ضع إعدادات عامة في الكود، وأي قيمة خاصة أو endpoint في environment variable لا ترفعها إلى Git. راجع أن npm run build ينجح من مجلد نظيف.
نظّم المشروع
قسّم الكود حسب الوظيفة: components أو widgets، services لطلبات البيانات، styles، وlib للوظائف العامة. لا تجعل ملف main مسؤولًا عن كل شيء. عند بناء ودجت يمكن أن يكون entry واحدًا، لكن اجعل واجهته الخارجية موثقة.
قائمة فحص قبل النشر
- افتح build من خلال preview لا من dev server.
- اختبر المسارات عند refresh.
- افحص assets التي تستخدم مسارات مطلقة أو نسبية.
- اختبر الهاتف وprefers-reduced-motion.
- راجع source map وملفات debug قبل جعلها عامة.
مراجع رسمية
هذه الروابط الرسمية هي نقطة الرجوع عند اختلاف إصدار الأداة أو تغيّر سلوك المتصفح.