Vite Federation 플러그인

비트에서의 페더레이션

플러그인 설치

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

제공 앱 설정

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",
  },
}

공개 항목 객체

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

사용 앱 설정

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: {
  remote_app: "https://remote.example.com/assets/remoteEntry.js",
}

공유 의존성

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

원격 컴포넌트 사용하기

import { defineAsyncComponent } from "vue"

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

원격 앱의 타입 선언

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

원격 앱은 개발 서버가 아닌 미리보기 사용

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

빠른 확인

복습