Vue Academy · درس

إضافة Vite Federation

‏@originjs/vite-plugin-federation، وإعداد المنتج/المستهلك، والاستيراد الديناميكي للموارد البعيدة

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

Federation في Vite

بدأت Module Federation في Webpack، لكن العديد من تطبيقات Vue تستخدم Vite. ويضيف المكوّن الإضافي المجتمعي @originjs/vite-plugin-federation دعم federation إلى التطبيقات المنتجة والمستهلكة التي تعتمد على Vite.

تثبيت المكوّن الإضافي

أضيفوا المكوّن الإضافي إلى كل من التطبيق المنتج (الوحدة البعيدة) والتطبيق المستهلك (المضيف).

// terminal
// npm install -D @originjs/vite-plugin-federation

إعداد المنتج

في المنتج (الوحدة البعيدة)، أضيفوا federation إلى vite.config.ts مع name وكائن exposes يربط الأسماء العامة بالملفات المحلية.

import federation from "@originjs/vite-plugin-federation"

export default {
  plugins: [
    federation({
      name: "remote_app",
      filename: "remoteEntry.js",
      exposes: {
        "./Widget": "./src/components/Widget.vue",
      },
    }),
  ],
}

إعدادات البناء لـ Federation

يتطلب المكوّن الإضافي هدف بناء حديثًا وتعطيل تصغير الوحدات في بعض الإعدادات. حدّدوا هدف البناء حتى تعمل عمليات الاستيراد الديناميكية و await على المستوى الأعلى.

export default {
  plugins: [federation({ /* ... */ })],
  build: {
    target: "esnext",
  },
}

كائن exposes

كما هي الحال في Webpack، تكون المفاتيح مسارات الاستيراد العامة التي يستخدمها المستهلكون، وتكون القيم مسارات ملفات المصدر المحلية. اكشفوا فقط ما تحتاج إليه الفرق الأخرى.

exposes: {
  "./Widget": "./src/components/Widget.vue",
  "./useCart": "./src/composables/useCart.ts",
}

إعداد المستهلك

في المستهلك (المضيف)، أضيفوا federation مع كائن remotes يربط اسمًا مستعارًا بعنوان URL الخاص بـ remoteEntry.js للوحدة البعيدة.

import federation from "@originjs/vite-plugin-federation"

export default {
  plugins: [
    federation({
      name: "host_app",
      remotes: {
        remote_app: "https://remote.example.com/assets/remoteEntry.js",
      },
    }),
  ],
}

عنوان URL للوحدات البعيدة

القيمة هي عنوان URL الكامل لملف remoteEntry.js المبني. أثناء التطوير، وجّهوا العنوان إلى خادم المعاينة الخاص بالوحدة البعيدة؛ وفي الإنتاج، إلى مسارها المنشور على CDN.

remotes: {
  remote_app: "https://remote.example.com/assets/remoteEntry.js",
}

التبعيات المشتركة

أضيفوا مصفوفة shared حتى يستخدم المضيف والوحدة البعيدة نسخة واحدة من المكتبات الشائعة. ويُعد إدراج vue ضروريًا للحفاظ على نسخة واحدة من Vue.

federation({
  name: "host_app",
  remotes: { /* ... */ },
  shared: ["vue", "pinia"],
})

استهلاك مكوّن بعيد

استوردوا من الاسم المستعار متبوعًا بالاسم المكشوف. استخدموا استيرادًا ديناميكيًا مع defineAsyncComponent لأن الكود يُجلب أثناء التشغيل.

import { defineAsyncComponent } from "vue"

const Widget = defineAsyncComponent(() =>
  import("remote_app/Widget")
)

تصريحات الأنواع للوحدات البعيدة

لا يعرف TypeScript أنواع الوحدات البعيدة. صرّحوا بها حتى تتحقق صحة أنواع عمليات الاستيراد.

// remotes.d.ts
declare module "remote_app/Widget" {
  import type { DefineComponent } from "vue"
  const component: DefineComponent
  export default component
}

المعاينة، لا التطوير، للوحدات البعيدة

تحتاج Federation إلى ملف remoteEntry.js المبني، والذي لا ينتجه خادم تطوير Vite بالطريقة نفسها. ابنوا الوحدة البعيدة وقدّموها باستخدام vite preview حتى يتمكن المضيف من جلبها.

// remote terminal
// vite build && vite preview --port 5001

تحقق سريع

تحققوا من فهمكم للمكوّن الإضافي لـ federation في Vite.

خلاصة

تعلّمتم federation في Vite:

يضيف @originjs/vite-plugin-federation ميزة Module Federation إلى Vite.
يحدّد إعداد المنتج name وكائن exposes (اسم عام يقابله ملف محلي).
يحدّد إعداد المستهلك كائن remotes الذي يربط اسمًا مستعارًا بعنوان URL الخاص بـ remoteEntry.js للوحدة البعيدة.
أدرجوا التبعيات المشتركة، بما في ذلك vue، في shared.
استهلكوا الوحدة عبر import("alias/Module") ديناميكيًا؛ وابنوا الوحدة البعيدة ثم شغّلوا vite preview.

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

هل درس «إضافة Vite Federation» مجاني؟

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

ماذا ستتعلم في «إضافة Vite Federation»؟

‏@originjs/vite-plugin-federation، وإعداد المنتج/المستهلك، والاستيراد الديناميكي للموارد البعيدة تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

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

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

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

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

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

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