0Pricing
Vue Academy · บทเรียน

Webpack Module Federation กับ Vue

ModuleFederationPlugin, exposes, remotes, การขึ้นต่อกันที่ใช้ร่วมกัน และการโหลดคอมโพเนนต์ระยะไกล

Webpack Module Federation กับ Vue เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

Module Federation ใน Webpack

Webpack 5 มี Module Federation มาให้ในตัว ช่วยให้บิลด์หนึ่งเปิดเผยโมดูลให้บิลด์อื่น และใช้โมดูลจากบิลด์เหล่านั้นผ่านเครือข่ายขณะทำงาน ซึ่งเป็นรากฐานของไมโครฟรอนต์เอนด์แบบทำงานขณะทำงาน

โฮสต์และรีโมต

มีสองบทบาท ได้แก่ รีโมต ซึ่งเปิดเผย component และ โฮสต์ ซึ่งนำไปใช้ แอปหนึ่งสามารถทำหน้าที่เป็นทั้งสองบทบาทได้ โฮสต์จะโหลดโค้ดของรีโมตผ่าน HTTP ขณะทำงาน ไม่ใช่ขณะสร้าง

ModuleFederationPlugin

คุณตั้งค่าการเชื่อมโมดูลโดยเพิ่ม ModuleFederationPlugin ลงในอาร์เรย์ plugins ของ webpack ตัวเลือกต่าง ๆ กำหนดชื่อ สิ่งที่คุณเปิดเผย สิ่งที่คุณนำไปใช้ และการพึ่งพาที่ใช้ร่วมกัน

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

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

ตัวเลือกชื่อ

name คือตัวระบุส่วนกลางที่ไม่ซ้ำกันของบิลด์นี้ โฮสต์จะอ้างอิงรีโมตด้วยชื่อนี้

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

ตัวเลือกโมดูลที่เปิดเผย (รีโมต)

รีโมตจะแสดงรายการโมดูลที่แบ่งปันไว้ใน exposes คีย์คือเส้นทางสาธารณะ ส่วนค่าคือเส้นทางไปยัง file ภายในเครื่อง

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

ไฟล์ Manifest ของ remoteEntry

รีโมตจะสร้าง Manifest remoteEntry.js ซึ่งอธิบายโมดูลที่เปิดเผยไว้ โฮสต์จะโหลด file นี้เพื่อค้นหาและดึงโค้ดของรีโมตขณะทำงาน

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

ตัวเลือกรีโมต (โฮสต์)

โฮสต์จะประกาศรีโมตที่นำมาใช้ใน remotes โดยจับคู่ชื่อแทนภายในเครื่องกับชื่อรีโมตและ URL ของ remoteEntry.js

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

ตัวเลือกการใช้ร่วมกัน

shared จะแสดงรายการการพึ่งพาที่ทั้งสองฝั่งควรใช้ร่วมกัน เพื่อหลีกเลี่ยงการโหลดซ้ำสองชุด สำหรับเฟรมเวิร์กอย่าง Vue คุณต้องใช้การพึ่งพาร่วมกัน เพื่อให้ไมโครฟรอนต์เอนด์ทั้งหมดใช้หนึ่งอินสแตนซ์เดียวกัน

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

ตั้งค่าเป็นซิงเกิลตันสำหรับ Vue

Vue ต้องเป็น ซิงเกิลตัน ซึ่งหมายถึงมีเพียงหนึ่งชุดในหน้าเว็บ การมีอินสแตนซ์ Vue สองชุดจะทำให้การตอบสนองและเอกลักษณ์ของ component เสียหาย กำหนดให้เป็นซิงเกิลตันพร้อมระบุข้อกำหนดเวอร์ชัน

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

การใช้ component จากรีโมต

นำเข้าโมดูลรีโมตแบบไดนามิกขณะทำงาน เนื่องจากโมดูลนี้โหลดผ่านเครือข่าย ให้ใช้ import() แบบไดนามิก ซึ่งโดยทั่วไปจะห่อด้วย defineAsyncComponent ใน Vue

import { defineAsyncComponent } from "vue"

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

การแสดงผลรีโมต

ใช้ component แบบอะซิงโครนัสในแม่แบบของคุณได้เหมือน component อื่น ๆ Webpack จะดึงโค้ดของรีโมตเมื่อแสดงผลครั้งแรกและเก็บไว้ในแคช

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

ตรวจสอบความเข้าใจ

ตรวจสอบความเข้าใจของคุณเกี่ยวกับ Module Federation กับ Vue

ทบทวน

คุณได้เรียนรู้ Module Federation ของ Webpack ดังนี้:

  • ModuleFederationPlugin ใช้ตั้งค่าการเชื่อมโมดูล และ name ใช้ระบุบิลด์
  • รีโมตจะแสดงรายการ exposes และสร้าง Manifest remoteEntry.js
  • โฮสต์จะแสดงรายการ remotes โดยจับคู่ชื่อแทนกับ name@URL/remoteEntry.js
  • shared ป้องกันการมีการพึ่งพาซ้ำ โดย Vue ต้องใช้ singleton: true
  • นำรีโมตมาใช้ผ่าน import("remote/Module") แบบไดนามิก ซึ่งมักใช้ร่วมกับ defineAsyncComponent

คำถามที่พบบ่อย

บทเรียน “Webpack Module Federation กับ Vue” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “Webpack Module Federation กับ Vue” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “Webpack Module Federation กับ Vue”

ModuleFederationPlugin, exposes, remotes, การขึ้นต่อกันที่ใช้ร่วมกัน และการโหลดคอมโพเนนต์ระยะไกล คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “Webpack Module Federation กับ Vue” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. หลักการสถาปัตยกรรมไมโครฟรอนต์เอนด์
  2. Webpack Module Federation กับ Vue
  3. ปลั๊กอิน Vite Federation
  4. สถานะร่วมกันระหว่างไมโครฟรอนต์เอนด์
← กลับไปที่ Vue Academy