أتمتة الـ Imports في Vue 3 باستخدام unplugin-auto-import لتقليل الكود

يا هلا بيك يا بشمهندس! تعال نتكلم شوية عن حاجة كلنا بنعاني منها واحنا شغالين فطور التطوير (Frontend Development) وتحديداً لما بنكتب كود بـ فيو 3 (Vue 3). تخيل نفسك كده قاعد رايق، وكاتب كومبوننت (Component) جديد، وعايز تستخدم حاجات بسيطة زي ref أو computed أو حتى useRouter، تلاقي نفسك في أول كل ملف كاتب سطرين تلاتة بس عشان تعمل استيراد (Imports) للحاجات دي! وطبعاً لو عندك مشروع كبير، هتلاقي أول خمس سطور في كل ملف شكلهم حافظهم صم.

الموضوع ده مش بس بيضيع وقت، ده كمان بيعمل "زحمة" ملهاش أي لزمة في الكود (Boilerplate Code). طيب إيه الحل؟ الحل السحري هو أتمتة الاستيرادات (Auto Imports) باستخدام أداة جامدة جداً اسمها unplugin-auto-import. في المقال ده، هناخد رحلة تفصيلية نعرف إزاي نثبتها ونظبطها عشان نخلي أداة البناء (Vite) تعمل الشغل ده لوحدها، وتعيش حياتك تكتب كود نظيف وسريع.

إيه هو وجع الراس اللي بتسببه الـ Manual Imports في Vue 3؟

زمان في فترات التطوير القديمة كنا متعودين نكتب كل حاجة بإيدينا، لكن مع ظهور فيو 3 (Vue 3) وخصوصاً مع طريقة الـ Composition API، بقى عندنا إضافات ودوال (Functions) كتير بنحتاج نستدعيها جوه الـ Setup بتاعنا.

تعال نبص على شكل الكود العادي:

import { ref, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';

// وبعدين تبدأ تكتب الكود بتاعك!
const count = ref(0);

تخيل بقى لو عندك 50 ملف في المشروع، وكل ملف جواه الـ Imports دي متكررة. ده غير بقى لو نسيت تعمل Import لحاجة، تلاقي الكود ضرب في الـ Console ومطلع لك إيرور مزعج. هنا بقى بيجي دور تقنية الاستيراد التلقائي (Auto-importing) اللي بتريحك من القصة دي تماماً، وتخلي الـ Bundler بتافكارها الذكية هو اللي يحط الـ Imports دي في كود الـ Production من غير ما تحس.

تثبيت وإعداد unplugin-auto-import مع Vite

علشان نطبق الكلام ده عملي، هنحتاج نستخدم أداة unplugin-auto-import مع أداة البناء السريعة فيتي (Vite). الخطوات بسيطة ومش معقدة خالص، امشي معايا خطوة بخطوة.

أول حاجة، هنفتح التيرمينال (Terminal) ونثبت الحزمة كـ DevDependency في المشروع بتاعنا عن طريق الـ Package Manager اللي بتفضله (سواء NPM أو Yarn أو Pnpm):

npm install -D unplugin-auto-import

بعد ما التثبيت يخلص، الخطوة التانية هي إنا نروح لملف الإعدادات بتاع فيتي (vite.config.js أو vite.config.ts) ونعرفه بالأداة الجديدة دي عشان يبدأ يراقب الملفات ويدمج الـ Imports تلقائياً.

تعديل ملف vite.config.js بالشكل الصحيح

تعال نشوف إزاي هنضيف الإعدادات جوه ملف الـ Vite. احنا هنحتاج نستدعي الأداة ونحطها جوه مصفوفة الـ Plugins بالشكل ده:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      // دي الحاجات اللي الأداة هتعمل لها Import لوحدها
      imports: [
        'vue',
        'vue-router',
        'pinia' // لو بتستخدم Pinia لإدارة الحالة
      ],
      // مكان ما هنحفظ ملف الـ Types عشان التيشيرت أو الـ IDE ما يعترضش
      dts: 'src/auto-imports.d.ts',
    }),
  ],
});

الجميل في الإعدادات دي إنك مش بس بتقول لها استوردي من فيو (Vue)، لأ، انت ممكن كمان تضيف مكاتب زي فيو روتر (Vue Router) أو بينيا (Pinia) أو حتى أي مكتبة خارجية (Third-party library) بتح'تاج تستخدمها كتير.

التعامل مع TypeScript وملف الـ Declarations

لو انت من عشاق التيشيرت أو التايب سكريبت (TypeScript) - وزي ما المفروض يكون لأنها بتفرمل الأخطاء بدري - ممكن تقلق وتقول: "يا عم، لو الكود اتعمله Import من غير ما أكتبه، محرر الكود (VS Code) هيزعل ويطلع لي خط تحت المتغيرات إنها غير معرفة (Not Defined)".

وهنا بتيجي الإجابة في سطر الإعدادات اللي كتبناه فوق اللي اسمه dts: 'src/auto-imports.d.ts'. الأداة بذكاء شديد بتنشئ ملف تعريفات (TypeScript Declaration File) لوحدها جوه مجلد السورس (Src)، والملف ده بيعرف الـ IDE بكل الدوال اللي تم أتمتتها، فـ تلاقي الأوتو-كومبليت (Auto-complete) شغال معاك زي الفل ولا كأن فيه أي تغيير حصل!

شكل الكود بعد الأتمتة (السحر الحقيقي)

تعال بقى نشوف الكود بتاعنا بقى شكله إزاي بعد ما ظبطنا الأداة دي. لو فتحت أي ملف مكون (Component) وعايز تستخدم ref و useRouter، هكتب كده عل طول:

<script setup>
// بص كده.. مفيش أي Imports مكتوبة خالص فوق!
const count = ref(10);
const router = useRouter();

function goHome() {
  router.push('/');
}
</script>

<template>
  <div>
    <p>العدد: {{ count }}</p>
    <button @click="goHome">روح الرئيسية</button>
  </div>
</template>

الكود بقى نظيف جداً، مختصر، وسهل القراءة. التركيز كله بقى على منطق البرمجة (Business Logic) مش على روتين كتابة الاستيرادات.

نصيحة من أخ لتطوير مهاراتك التقنية

يا سيدي الفاضل، الأدوات الحديثة زي unplugin-auto-import موجودة عشان تريحك وتخلي تركيزك كله منصب على بناء المنتج والحل البرمجي مش على تفاصيل بناء الكود المكررة (Boilerplate). لكن نصيحتي ليك كـ مبرمج بيحب يتطور: ابدا دايماً بفهم الأساسيات (Vanilla/Manual Imports) واعرف الحاجة دي بتشتغل إزاي من جوه، وبعدين استخدم الأداة عشان تسرع شغلك. متخليش الأدوات تكسلك عن فهم الميكانيزم اللي بتحصل تحت الكود، لأن المعرفة دي هي اللي هتنقذك وقت ما يحصل مشكلة أو Bug غريب في الإنتاج (Production). واصل التعلم وكود بحب!