@tripod_ding/vite-plugin-federation
TypeScript icon, indicating that this package has built-in type declarations

1.2.1 • Public • Published

vite-plugin-federation

A Vite/Rollup plugin which support Module Federation. Inspired by Webpack and compatible with Webpack Module Federation.

Install

npm install @originjs/vite-plugin-federation --save-dev

or

yarn add @originjs/vite-plugin-federation --dev

Usage

Using the Module Federation usually requires more than 2 projects, one as the host side and one as the remote side.

Step 1: Configure the remote side.

  • for a vite project, modify vite.config.js:
// vite.config.js
import federation from "@originjs/vite-plugin-federation";
export default {
    plugins: [
        federation({
            name: 'remote-app',
            filename: 'remoteEntry.js',
            // Modules to expose
            exposes: {
                './Button': './src/Button.vue',
            },
            shared: ['vue']
        })
    ]
}
  • for a rollup project, modify rollup.config.js:
// rollup.config.js
import federation from '@originjs/vite-plugin-federation'
export default {
    input: 'src/index.js',
    plugins: [
        federation({
            name: 'remote-app',
            filename: 'remoteEntry.js',
            // Modules to expose
            exposes: {
                './Button': './src/button'.
            },
            shared: ['vue']
        })
    ]
}

Step 2: Configure the host side

  • for a vite project, modify vite.config.js:
// vite.config.js
import federation from "@originjs/vite-plugin-federation";
export default {
    plugins: [
        federation({
            name: 'host-app',
            remotes: {
                remote_app: "http://localhost:5001/assets/remoteEntry.js",
            },
            shared: ['vue']
        })
    ]
}
  • for a rollup project, modify rollup.config.js:
// rollup.config.js
import federation from '@originjs/vite-plugin-federation'
export default {
    input: 'src/index.js',
    plugins: [
        federation({
            name: 'host-app',
            remotes: {
                remote_app: "http://localhost:5001/remoteEntry.js",
            },
            shared: ['vue']
        })
    ]
}

Step 3: Using remote modules on the host side

Using a Vue project as an example

import { createApp, defineAsyncComponent } from "vue";
const app = createApp(Layout);
...
const RemoteButton = defineAsyncComponent(() => import("remote_app/Button"));
app.component("RemoteButton", RemoteButton);
app.mount("#root");

Using remote components in templates

<template>
    <div>
        <RemoteButton />
    </div>
</template>

Example projects

Examples Host Remote
basic-host-remote rollup+esm rollup+esm
react-in-vue vite+esm vite+esm
simple-react-esm rollup+esm rollup+esm
simple-react-systemjs rollup+systemjs rollup+systemjs
simple-react-webpack rollup+systemjs webpack+systemjs
vue2-demo vite+esm vite+esm
vue3-advanced-demo vite+esm 
vue-router/pinia
vite+esm
vue-router/pinia
vue3-demo-esm vite+esm vite+esm
vue3-demo-systemjs vite+systemjs vite+systemjs
vue3-demo-webpack-esm-esm vite/webpack+esm vite/webpack+esm
vue3-demo-webpack-esm-var vite+esm webpack+var
vue3-demo-webpack-systemjs vite+systemjs webpack+systemjs

Readme

Keywords

Package Sidebar

Install

npm i @tripod_ding/vite-plugin-federation

Weekly Downloads

0

Version

1.2.1

License

MulanPSL-2.0

Unpacked Size

165 kB

Total Files

10

Last publish

Collaborators

  • tripod_ding