Vue Academy · บทเรียน

ปลั๊กอิน Vite Federation

@originjs/vite-plugin-federation การตั้งค่าผู้ผลิต/ผู้ใช้ และการนำเข้า remotes แบบไดนามิก

บทเรียน 3 จาก 413 ขั้นตอน

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

การเชื่อมโมดูลบน Vite

Module Federation เริ่มต้นใน Webpack แต่แอป Vue จำนวนมากใช้ Vite ปลั๊กอินจากชุมชน @originjs/vite-plugin-federation นำความสามารถด้านการเชื่อมโมดูลมาใช้กับแอปที่สร้างและนำโมดูลไปใช้บน Vite

การติดตั้งปลั๊กอิน

เพิ่มปลั๊กอินลงในทั้งแอปตัวผลิต (รีโมต) และแอปตัวใช้ (โฮสต์)

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

การตั้งค่าตัวผลิต

ใน ตัวผลิต (รีโมต) ให้เพิ่ม federation ใน vite.config.ts พร้อมระบุ name และออบเจ็กต์ exposes ที่จับคู่ชื่อสาธารณะกับ files ภายในเครื่อง

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

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

การตั้งค่าการสร้างสำหรับการเชื่อมโมดูล

ปลั๊กอินต้องใช้เป้าหมายการสร้างที่ทันสมัย และในการตั้งค่าบางแบบต้องปิดการย่อโมดูล กำหนดเป้าหมายการสร้างเพื่อให้การนำเข้าแบบไดนามิกและการรอผลระดับบนสุดทำงานได้

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

ออบเจ็กต์สำหรับเปิดเผยโมดูล

เช่นเดียวกับ Webpack คีย์คือเส้นทางนำเข้าสาธารณะที่ผู้ใช้โมดูลใช้ ส่วนค่าคือเส้นทางไปยัง files ต้นฉบับภายในเครื่อง ให้เปิดเผยเฉพาะสิ่งที่ทีมอื่นต้องใช้

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 ของ remotes

ค่าดังกล่าวคือ 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"],
})

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

นำเข้าจากชื่อแทนและชื่อที่เปิดเผย ใช้การนำเข้าแบบไดนามิกร่วมกับ 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
}

ใช้การแสดงตัวอย่าง ไม่ใช่โหมดพัฒนา สำหรับรีโมต

การเชื่อมโมดูลต้องใช้ remoteEntry.js ที่สร้างแล้ว แต่เซิร์ฟเวอร์พัฒนาของ Vite ไม่ได้สร้างสิ่งนี้ในรูปแบบเดียวกัน ให้สร้างรีโมตแล้วให้บริการด้วย vite preview เพื่อให้โฮสต์ดึงมาใช้ได้

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

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

ตรวจสอบความเข้าใจของคุณเกี่ยวกับปลั๊กอินการเชื่อมโมดูลของ Vite

ตอบคำถามในบทเรียนแบบโต้ตอบ

ทบทวน

คุณได้เรียนรู้การเชื่อมโมดูลบน Vite ดังนี้:

@originjs/vite-plugin-federation นำ Module Federation มาใช้กับ Vite
การตั้งค่าตัวผลิตระบุ name และออบเจ็กต์ exposes (ชื่อสาธารณะไปยัง file ภายในเครื่อง)
การตั้งค่าตัวใช้ระบุออบเจ็กต์ remotes ที่จับคู่ชื่อแทนกับ URL ของ remoteEntry.js ของรีโมต
แสดงรายการการพึ่งพาที่ใช้ร่วมกัน (รวมถึง vue) ไว้ใน shared
นำมาใช้ผ่าน import("alias/Module") แบบไดนามิก แล้วสร้างรีโมตและใช้ vite preview

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 42
บทเรียน: 156

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

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

บทเรียน “ปลั๊กอิน Vite Federation” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ปลั๊กอิน Vite Federation”

@originjs/vite-plugin-federation การตั้งค่าผู้ผลิต/ผู้ใช้ และการนำเข้า remotes แบบไดนามิก คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “ปลั๊กอิน Vite Federation” ใช้เวลานานแค่ไหน

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

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

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

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

← กลับไปที่ Vue Academy