Vue Academy · درس

‏Webpack Module Federation مع Vue

‏ModuleFederationPlugin وexposes وremotes والتبعيات المشتركة وتحميل المكوّنات البعيدة

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

Module Federation في Webpack

يأتي Webpack 5 مزوّدًا بـ Module Federation مضمّنة. تتيح هذه الميزة لعملية بناء كشف الوحدات لعمليات بناء أخرى، واستهلاك الوحدات منها أثناء التشغيل — وهي الأساس للواجهات الأمامية المصغّرة التي تعمل في وقت التشغيل.

المضيفون والوحدات البعيدة

هناك دوران: الوحدة البعيدة تكشف المكوّنات، والمضيف يستهلكها. ويمكن للتطبيق أن يؤدي الدورين معًا. يحمّل المضيف كود الوحدة البعيدة عبر HTTP أثناء التشغيل، لا في وقت البناء.

The ModuleFederationPlugin

تضبطون federation بإضافة ModuleFederationPlugin إلى مصفوفة plugins في webpack. وتحدّد خياراتها الاسم، وما تكشفونه، وما تستهلكونه، والتبعيات المشتركة.

const { ModuleFederationPlugin } = require("webpack").container

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: "checkout",
    }),
  ],
}

الخيار name

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

new ModuleFederationPlugin({
  name: "checkout",
  filename: "remoteEntry.js",
})

الخيار exposes (للوحدة البعيدة)

تسرد الوحدة البعيدة الوحدات التي تشاركها في exposes. والمفاتيح هي مسارات عامة، أما القيم فهي مسارات ملفات محلية.

new ModuleFederationPlugin({
  name: "checkout",
  filename: "remoteEntry.js",
  exposes: {
    "./CartButton": "./src/components/CartButton.vue",
  },
})

بيان remoteEntry

تنشئ الوحدة البعيدة بيانًا باسم remoteEntry.js يصف الوحدات التي تكشفها. وتحمل التطبيقات المضيفة هذا الملف لاكتشاف كود الوحدة البعيدة وجلبه أثناء التشغيل.

// host loads: https://checkout.example.com/remoteEntry.js

الخيار remotes (للمضيف)

يصرّح المضيف بالوحدات البعيدة التي يستهلكها في remotes، إذ يربط اسمًا مستعارًا محليًا باسم الوحدة البعيدة، بالإضافة إلى عنوان URL الخاص بـ remoteEntry.js.

new ModuleFederationPlugin({
  name: "shell",
  remotes: {
    checkout: "checkout@https://checkout.example.com/remoteEntry.js",
  },
})

الخيار shared

يسرد shared التبعيات التي ينبغي للطرفين مشاركتها لتجنب تحميل نسختين. وبالنسبة إلى إطار عمل مثل Vue، يجب مشاركته حتى تستخدم جميع الواجهات الأمامية المصغّرة نسخة واحدة منه.

new ModuleFederationPlugin({
  name: "shell",
  remotes: { /* ... */ },
  shared: ["vue"],
})

singleton: true لـ Vue

يجب أن يكون Vue أحادي النسخة — أي نسخة واحدة فقط في الصفحة. إذ تؤدي نسختان من Vue إلى تعطّل التفاعلية وهوية المكوّنات. حدّدوه كنسخة مفردة مع اشتراط إصدار.

shared: {
  vue: {
    singleton: true,
    requiredVersion: "^3.4.0",
  },
}

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

استوردوا الوحدة البعيدة ديناميكيًا أثناء التشغيل. وبما أنها تُحمّل عبر الشبكة، استخدموا import() ديناميكيًا — ويُغلّف عادةً داخل defineAsyncComponent في Vue.

import { defineAsyncComponent } from "vue"

const CartButton = defineAsyncComponent(() =>
  import("checkout/CartButton")
)

عرض الوحدة البعيدة

استخدموا المكوّن غير المتزامن مثل أي مكوّن آخر في القالب. يجلب Webpack كود الوحدة البعيدة عند العرض الأول، ثم يخزّنه مؤقتًا.

<template>
  <header>
    <CartButton />
  </header>
</template>

تحقق سريع

تحققوا من فهمكم لـ Module Federation مع Vue.

خلاصة

تعلّمتم Module Federation في Webpack:

يضبط ModuleFederationPlugin عملية federation؛ ويحدّد name هوية عملية البناء.
تسرد الوحدة البعيدة ما تكشفه في exposes، وتصدر بيانًا باسم remoteEntry.js.
يسرد المضيف remotes لربط اسم مستعار بالصيغة name@URL/remoteEntry.js.
يمنع shared تكرار التبعيات؛ ويحتاج Vue إلى singleton: true.
استهلكوا الوحدة البعيدة عبر import("remote/Module") ديناميكيًا، وغالبًا باستخدام defineAsyncComponent.

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

هل درس «‏Webpack Module Federation مع Vue» مجاني؟

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

ماذا ستتعلم في «‏Webpack Module Federation مع Vue»؟

‏ModuleFederationPlugin وexposes وremotes والتبعيات المشتركة وتحميل المكوّنات البعيدة تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «‏Webpack Module Federation مع Vue»؟

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

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

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

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

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