M

MLOG

العربية

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

إزالة الغموض عن بنية إضافات Vite: دليل عالمي لإنشاء إضافات مخصصة

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

فهم المبادئ الأساسية لـ Vite

قبل الخوض في إنشاء الإضافات، من الضروري فهم مبادئ Vite الأساسية:

دور الإضافات في النظام البيئي لـ Vite

صُممت بنية إضافات Vite لتكون قابلة للتوسيع بشكل كبير. يمكن للإضافات أن:

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

بنية إضافات Vite: نظرة متعمقة

إضافة Vite هي في الأساس كائن JavaScript له خصائص محددة تحدد سلوكه. دعنا نفحص العناصر الرئيسية:

إعدادات الإضافة

ملف `vite.config.js` (أو `vite.config.ts`) هو المكان الذي تقوم فيه بتكوين مشروع Vite الخاص بك، بما في ذلك تحديد الإضافات التي سيتم استخدامها. يقبل الخيار `plugins` مصفوفة من كائنات الإضافات أو دوال تعيد كائنات إضافات.

// vite.config.js
import myPlugin from './my-plugin';

export default {
  plugins: [
    myPlugin(), // Invoke the plugin function to create a plugin instance
  ],
};

خصائص كائن الإضافة

يمكن أن يحتوي كائن إضافة Vite على عدة خصائص تحدد سلوكه خلال المراحل المختلفة لعملية البناء. إليك تفصيل للخصائص الأكثر شيوعًا:

خطافات الإضافة (Hooks) وترتيب التنفيذ

تعمل إضافات Vite من خلال سلسلة من الخطافات التي يتم تشغيلها في مراحل مختلفة من عملية البناء. فهم ترتيب تنفيذ هذه الخطافات أمر بالغ الأهمية لكتابة إضافات فعالة.

  1. config: تعديل إعدادات Vite.
  2. configResolved: الوصول إلى الإعدادات النهائية.
  3. configureServer: تعديل خادم التطوير (في وضع التطوير فقط).
  4. transformIndexHtml: تحويل ملف `index.html`.
  5. buildStart: بداية عملية البناء.
  6. resolveId: حل معرفات الوحدات (module IDs).
  7. load: تحميل محتوى الوحدة.
  8. transform: تحويل كود الوحدة.
  9. handleHotUpdate: التعامل مع التحديث السريع للوحدات (HMR).
  10. writeBundle: تعديل الحزمة الناتجة قبل كتابتها على القرص.
  11. closeBundle: يُستدعى بعد كتابة الحزمة الناتجة على القرص.
  12. buildEnd: نهاية عملية البناء.

إنشاء أول إضافة Vite مخصصة لك

دعنا ننشئ إضافة Vite بسيطة تضيف لافتة (banner) إلى أعلى كل ملف JavaScript في بناء الإنتاج. ستحتوي هذه اللافتة على اسم المشروع وإصداره.

تنفيذ الإضافة

// banner-plugin.js
import { readFileSync } from 'node:fs';
import { resolve } from 'node:path';

export default function bannerPlugin() {
  return {
    name: 'banner-plugin',
    apply: 'build',
    transform(code, id) {
      if (!id.endsWith('.js')) {
        return code;
      }

      const packageJsonPath = resolve(process.cwd(), 'package.json');
      const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
      const banner = `/**\n * Project: ${packageJson.name}\n * Version: ${packageJson.version}\n */\n`;

      return banner + code;
    },
  };
}

الشرح:

دمج الإضافة

استورد الإضافة في ملف `vite.config.js` وأضفها إلى مصفوفة `plugins`:

// vite.config.js
import bannerPlugin from './banner-plugin';

export default {
  plugins: [
    bannerPlugin(),
  ],
};

تشغيل عملية البناء

الآن، قم بتشغيل `npm run build` (أو أمر بناء مشروعك). بعد اكتمال البناء، تفحص ملفات JavaScript التي تم إنشاؤها في مجلد `dist`. سترى اللافتة في أعلى كل ملف.

تقنيات الإضافات المتقدمة

بالإضافة إلى تحويلات الكود البسيطة، يمكن لإضافات Vite الاستفادة من تقنيات أكثر تقدمًا لتعزيز قدراتها.

الوحدات الافتراضية (Virtual Modules)

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

// virtual-module-plugin.js
export default function virtualModulePlugin(options) {
  const virtualModuleId = 'virtual:my-module';
  const resolvedVirtualModuleId = '\0' + virtualModuleId; // Prefix with \0 to prevent Rollup from processing

  return {
    name: 'virtual-module-plugin',
    resolveId(id) {
      if (id === virtualModuleId) {
        return resolvedVirtualModuleId;
      }
    },
    load(id) {
      if (id === resolvedVirtualModuleId) {
        return `export default ${JSON.stringify(options)};`;
      }
    },
  };
}

في هذا المثال:

استخدام الوحدة الافتراضية

// vite.config.js
import virtualModulePlugin from './virtual-module-plugin';

export default {
  plugins: [
    virtualModulePlugin({ message: 'Hello from virtual module!' }),
  ],
};

// main.js
import message from 'virtual:my-module';

console.log(message.message); // Output: Hello from virtual module!

تحويل ملف Index HTML

يسمح الخطاف `transformIndexHtml` بتعديل ملف `index.html`، مثل إدخال السكريبتات، الأنماط، أو علامات meta. هذا مفيد لإضافة تتبع التحليلات، تكوين بيانات الوسائط الاجتماعية، أو تخصيص بنية HTML.

// inject-script-plugin.js
export default function injectScriptPlugin() {
  return {
    name: 'inject-script-plugin',
    transformIndexHtml(html) {
      return html.replace(
        '',
        ``
      );
    },
  };
}

تقوم هذه الإضافة بإدخال عبارة `console.log` في ملف `index.html` قبل علامة الإغلاق `` مباشرة.

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

يوفر الخطاف `configureServer` الوصول إلى مثيل خادم التطوير، مما يسمح لك بإضافة برمجيات وسيطة (middleware) مخصصة، تعديل سلوك الخادم، أو التعامل مع طلبات API.

// mock-api-plugin.js
export default function mockApiPlugin() {
  return {
    name: 'mock-api-plugin',
    configureServer(server) {
      server.middlewares.use('/api/data', (req, res) => {
        res.writeHead(200, { 'Content-Type': 'application/json' });
        res.end(JSON.stringify({ message: 'Hello from mock API!' }));
      });
    },
  };
}

تضيف هذه الإضافة برمجية وسيطة تعترض الطلبات إلى `/api/data` وتعيد استجابة JSON برسالة وهمية. هذا مفيد لمحاكاة نقاط نهاية API أثناء التطوير، قبل أن يتم تنفيذ الواجهة الخلفية بالكامل. تذكر أن هذه الإضافة تعمل فقط أثناء التطوير.

أمثلة وحالات استخدام واقعية للإضافات

فيما يلي بعض الأمثلة العملية لكيفية استخدام إضافات Vite لحل تحديات التطوير الشائعة:

أفضل الممارسات لكتابة إضافات Vite

اتبع هذه الممارسات الأفضل لإنشاء إضافات Vite قوية وقابلة للصيانة:

تصحيح أخطاء إضافات Vite

قد يكون تصحيح أخطاء إضافات Vite تحديًا، ولكن هناك العديد من التقنيات التي يمكن أن تساعد:

الخاتمة: تمكين عملية التطوير لديك بإضافات Vite

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

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

إزالة الغموض عن بنية إضافات Vite: دليل عالمي لإنشاء إضافات مخصصة | MLOG