قم ببناء تطبيقات الويب المعقدة الخاصة بك في وقت أقل ، مع حلقة ملاحظات أسرع ، باستخدام Vite.

نظرًا لأن تطبيقات الويب أصبحت أكثر ثراءً بالميزات ، فإن الحاجة إلى أدوات بناء سريعة وفعالة تستمر في الازدياد في الطلب.

Vite هي أداة بناء حديثة توفر خادم تطوير سريعًا وعملية بناء محسّنة ، مما يسمح للمستخدمين بتبسيط سير العمل وتحسين تجربة المستخدم النهائي.

سوف تستكشف كيفية البدء باستخدام Vite ، الذي يغطي عملية التثبيت والميزات الأساسية وأوامر واجهة سطر الأوامر (CLI).

بدء مشروع Vite

قبل أن تتمكن من استخدام ملفات فايت، يجب عليك التثبيت Node.js و Node Package Manager على نظامك. بعد تثبيت هاتين الحزمتين ، يمكنك المتابعة لإنشاء مشروع باستخدام Vite.

إليك كيفية تهيئة مشروع باستخدام Vite باستخدام npm:

npm init vite

عند تشغيل هذا الأمر ، فإنه ينشئ مشروع Vite جديدًا في دليل العمل الحالي. يطالبك الأمر بإجراء اختيارات التكوين الأساسية لإعداد مشروع Vite الجديد الخاص بك.

فيما يلي تفصيل للخيارات التي يطالبك الأمر بتحديدها:

  1. اسم المشروع. عند تشغيل الأمر ، فإنه يطالبك بتوفير اسم لمشروعك الجديد. سيظهر الاسم الذي تقدمه أيضًا في ملف package.json ملف ويكون بمثابة اسم دليل مشروعك.
    2. instagram viewer
  2. اختر إطار عمل. ستطلب منك هذه المطالبة اختيار إطار عمل لمشروعك. يدعم Vite حاليًا الأطر الأمامية الشائعة مثل React و Vue و Angular وخيار Vanilla لرمز JavaScript العادي.
  3. اختر متغير. يطالبك هذا باختيار متغير لمشروعك ، يغطي البدائل مثل JavaScript و لغتها الفرعية TypeScript.

بعد تقديم المعلومات المطلوبة ، سيقوم Vite بإنشاء هيكل مشروع جديد في دليل العمل الحالي الخاص بك. سيمثل الهيكل إعدادًا أساسيًا للمشروع ، بما في ذلك أ package.json ملف src الدليل بامتداد index.html و main.js ملف و عام الدليل.

بعد إنشاء هيكل المشروع ، يمكنك الانتقال إلى دليل المشروع عن طريق التشغيل قرص مضغوط . بمجرد الانتهاء من ذلك ، قم بتثبيت أي تبعيات إضافية قد يتطلبها مشروعك باستخدام تثبيت npm يأمر.

لبدء خادم تطوير ومراقبة أي تغييرات يتم إجراؤها على مشروعك ، ستقوم بتشغيل ملف npm تشغيل dev الأمر داخل محطة مشروعك.

ميزات Vite

تركز ميزات Vite على تبسيط عملية الإنشاء وتعزيز تجربة إنشاء الويب.

خادم التطوير السريع

يستخدم خادم التطوير في Vite وحدات ES الأصلية وتحميل الوحدات البطيئة ، مما يتيح سرعة مذهلة. وهذا يسمح بحلقات تغذية مرتدة سريعة وأوقات بدء تشغيل فائقة السرعة.

عملية بناء محسنة

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

دعم العديد من الأطر الأمامية

يدعم Vite العديد من الإطارات الأمامية ، بما في ذلك Vue و أطر عمل مشابهة مثل React Js و Angular Js. يتيح ذلك للمطورين اختيار إطار العمل المفضل لديهم وتسخير إمكانات Vite القوية.

استبدال الوحدة الساخنة (HMR)

تسمح ميزة Vite's Hot Module Replacement (HMR) بإجراء تحديثات سريعة وسلسة للتطبيق دون الحاجة إلى تحديث صفحة كاملة. هذا يجعل عملية التطوير أسرع وأكثر كفاءة.

المعالجة المسبقة لـ CSS وتكامل PostCSS

يدعم Vite معالجة CSS المسبقة ، بما في ذلك Sass و Less و Stylus. يتكامل أيضًا مع PostCSS ، مما يسمح بتحويلات وتحسينات إضافية لـ CSS.

يأتي Vite مع العديد من الميزات الأخرى ، بما في ذلك دعم TypeScript و JSX و WebAssembly. مع إصدار Vite v4.0.4، نما مجتمع مطوري Vite وظل يعمل بنشاط على صيانة البرنامج ، مضيفًا ميزات جديدة منتظمة.

واجهة سطر أوامر Vite (CLI)

تعد واجهة سطر أوامر Vite (CLI) أداة مفيدة لتخصيص سلوك Vite. يوفر مجموعة من الأوامر الأساسية التي تساعد أيضًا في تبسيط عملية التطوير. فيما يلي بعض أوامر CLI المهمة:

بناء vite

سيقوم هذا الأمر ببناء التطبيق لبيئة الإنتاج ، وتحسين وتقليل التعليمات البرمجية بحيث تكون جاهزة للنشر. باستخدام هذا الأمر ، يمكنك التأكد من أن التطبيق الخاص بك سريع وفعال قدر الإمكان وجاهز للتوزيع على المستخدمين.

معاينة vite

يتيح لك هذا الأمر معاينة الكود الذي تم إنشاؤه قبل نشره في الإنتاج. إذا كنت تريد التأكد من أن كل شيء يبدو ويعمل كما هو متوقع ولا توجد مشكلات أو مشاكل واضحة تتطلب الانتباه ، فهذا أمر مفيد للتشغيل.

vite الأمثل

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

vite الأمثل يتم التنفيذ تلقائيًا أثناء بناء vite الأمر الذي يولد إنشاءات إنتاج محسّنة. يمكنك أيضًا تشغيله بشكل منفصل للتحقق من حجم البنية والأداء

ملف تكوين Vite

في Vite ، يحدد ملف التكوين الخيارات المختلفة لعملية الإنشاء. يستخدم ملف التكوين Vite JavaScript وبناء جملة وحدات ES6.

بشكل افتراضي ، يجب عليك تسمية ملف التكوين الخاص بك vite.config.js ووضعه في الدليل الجذر للمشروع.

فيما يلي بعض الخيارات الأكثر استخدامًا في ملف تكوين Vite:

  • جذر. يحدد الدليل الجذر للمشروع.
  • الخادم. تكوين خادم التطوير. يتضمن خيارات لتكوين طلبات المضيف والمنفذ والوكيل لواجهة API الخلفية.
  • الإضافات. يسمح بإضافة الإضافات إلى عملية بناء Vite. المكوّن الإضافي هو وظيفة تعدل عملية الإنشاء بطريقة ما ، مثل إضافة دعم لتنسيق ملف جديد أو تحويل التعليمات البرمجية المصدر.
  • حل. يؤدي هذا إلى تكوين كيفية حل Vite للواردات في المشروع. يتضمن خيارات لتحديد الأسماء المستعارة والامتدادات وأدلة الوحدة النمطية.

فيما يلي مثال على ملف تكوين Vite:

يستورد {تعريفكونفيغ} من"vite";
يستورد طريق من'طريق';
يصدّرتقصير DefinConfig ({
 الخادم: {
 ميناء: 3000,
 يفتح: حقيقي,
 },
 حل: {
 الاسم المستعار: {
'@': path.resolve (__dirname، "./src"),
 },
 },
 المكونات الإضافية: [] ،
});

يقوم ملف التكوين هذا بإعداد مشروع Vite أساسي باستخدام:

  • خادم تطوير محلي يعمل على المنفذ 3000
  • اسم مستعار لـ src الدليل
  • لا توجد إضافات

يتمتع Vite بمجتمع قوي

تشرح العديد من الموارد عبر الإنترنت بالتفصيل كيفية استخدام Vite مع الأطر الشائعة مثل React و Vue و Angular.

بالإضافة إلى ذلك ، هناك ثروة من المعلومات حول استخدام Vite بشكل فعال في وثائقه الرسمية. مع توفر هذه الموارد ، يمكن دمج Vite في مشروعك التالي.