Vue Academy · درس

منظومة Vite: الإضافات وأدوات التطوير

منظومة unplugin، وvite-plugin-vue، وvite-plugin-inspect، وvite-bundle-visualizer

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

النظام البيئي لإضافات Vite

يشغّل نظام إضافات Vite، المبني على واجهة Rollup مع خطافات خاصة بـ Vite، نظامًا بيئيًا غنيًا. وبالنسبة إلى مشاريع Vue، تحسّن بعض الإضافات تجربة المطوّر تحسنًا كبيرًا، مثل الاستيراد التلقائي والتسجيل التلقائي للمكوّنات وفحص التحويل وتحليل الحزم.

unplugin-auto-import

تستورد unplugin-auto-import تلقائيًا واجهات برمجة التطبيقات الشائعة، مثل ref وcomputed في Vue، ومساعدات Router وPinia، وملفات composables الخاصة بك، حتى تتمكن من استخدامها من دون كتابة عبارات import.

import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'],
      dts: 'src/auto-imports.d.ts'
    })
  ]
})

استيراد composables الخاصة بك تلقائيًا

وجّه الإضافة إلى مجلد composables الخاص بك، وستصبح تلك الدوال متاحة عالميًا أيضًا. كما تنشئ ملف .d.ts حتى يواصل TypeScript ومحرّرك فهمها.

AutoImport({
  imports: ['vue'],
  dirs: ['src/composables'], // auto-import useFoo, useBar
  dts: 'src/auto-imports.d.ts'
})

// in a component, no import needed:
// const x = ref(0); const { user } = useAuth()

unplugin-vue-components

تستورد unplugin-vue-components المكوّنات وتسجّلها عند الطلب تلقائيًا؛ فما عليك سوى وضع <MyButton /> في قالب، وستستوردها الإضافة تلقائيًا. كما تزيل المكوّنات غير المستخدمة أثناء إنشاء الحزمة.

import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({
      dirs: ['src/components'],
      dts: 'src/components.d.ts'
    })
  ]
})

المحلِّلات لمكتبات واجهة المستخدم

تدعم إضافة المكوّنات المحلِّلات لمكتبات واجهة المستخدم الشائعة، مثل Element Plus وVuetify وNaive UI، فتستورد مكوّناتها وأنماطها تلقائيًا عند استخدامها، من دون تسجيل يدوي.

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

Components({
  resolvers: [ElementPlusResolver()]
})
// <el-button> now works with no import

vite-plugin-inspect

توفّر vite-plugin-inspect واجهة مستخدم تتيح لك رؤية كيفية تحويل كل إضافة لشيفرتك عبر مسار المعالجة. وهي مفيدة جدًا لتصحيح سبب وصول ملف إلى حالته النهائية.

import Inspect from 'vite-plugin-inspect'

export default defineConfig({
  plugins: [Inspect()]
})
// visit http://localhost:5173/__inspect/ in dev

قراءة مسار التحويل

في واجهة Inspect، تختار وحدة ثم تستعرض تحويلها عبر كل إضافة خطوةً بخطوة. ويمكنك مثلًا رؤية كيفية تقسيم Vue SFC إلى render وscript، وكيف يحقن الاستيراد التلقائي الشيفرة، مما يساعدك على تحديد الإضافات التي تتسبب في المشكلات.

أداة تصور الحزمة

لفهم حجم حزمة الإنتاج، استخدم إضافة للتصور، مثل rollup-plugin-visualizer. فهي تنشئ مخططًا تفاعليًا يشبه الخريطة الشجرية يوضح محتويات كل جزء بعد البناء.

import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    visualizer({ open: true, filename: 'stats.html' })
  ]
})

الاستفادة من نتائج أداة التصور

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

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['vue', 'vue-router', 'pinia']
      }
    }
  }
}

دمج الإضافات

تتآلف هذه الإضافات جيدًا. فعادةً ما يضم إعداد Vue الاستيراد التلقائي والمكوّنات والفحص، الذي يُستخدم في التطوير فقط، وأداة التصور، التي تُستخدم أثناء البناء فقط، للحصول على سير عمل سلس.

plugins: [
  vue(),
  AutoImport({ imports: ['vue', 'vue-router'] }),
  Components({ dirs: ['src/components'] }),
  Inspect(),
  visualizer({ filename: 'stats.html' })
]

الانتباه إلى ملفات dts وgitignore

تنشئ إضافتا الاستيراد التلقائي والمكوّنات ملفات .d.ts. حدّد ما إذا كنت ستضمّنها في المستودع، مما يساعد CI على إجراء فحص الأنواع من دون بناء، أو ستضيفها إلى gitignore، إذ سيُعاد إنشاؤها عند بدء التطوير. وفي كلتا الحالتين، أبقِها ضمن عناصر tsconfig المضمّنة.

اختبار سريع

اختبر مدى فهمك للنظام البيئي لأدوات Vite.

مراجعة

تعرّفت إلى النظام البيئي لأدوات Vite:

unplugin-auto-import — الاستيراد التلقائي لواجهات Vue البرمجية وملفات composables
unplugin-vue-components — الاستيراد والتسجيل التلقائيان للمكوّنات، مع محلِّلات مكتبات واجهة المستخدم
vite-plugin-inspect — عرض كيفية تحويل الإضافات لكل وحدة
أداة تصور الحزمة — خريطة شجرية لمحتويات الأجزاء تساعد على توجيه التحسين
يمكن دمج هذه الإضافات للحصول على سير عمل سلس لتطوير Vue وبنائه

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

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

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

ماذا ستتعلم في «منظومة Vite: الإضافات وأدوات التطوير»؟

منظومة unplugin، وvite-plugin-vue، وvite-plugin-inspect، وvite-bundle-visualizer تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

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

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

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

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

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

‏Vue Vapor Mode: تحسين وقت الترجمة
منظومة Vite: الإضافات وأدوات التطوير
‏Vue Macros ومقترحات المجتمع
اختيار حزمة Vue المناسبة لعام 2025 وما بعده

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