English | 简体中文
A Vite plugin which support Module Federation. Inspired by Webpack Module Federation feature.
Using npm:
npm install @originjs/vite-plugin-federation --save-dev
The main steps in using federation are:
- for a Vite project, in
vite.config.js
:
import { defineConfig } from 'vite'
import federation from "@originjs/vite-plugin-federation";
export default defineConfig({
plugins: [
federation({
name: 'module-name',
filename: 'remoteEntry.js',
exposes: {
'./Button': './src/Button.vue',
},
remotes:{
foo: 'remote_foo'
}
shared: ['vue']
})
],
})
- for a Rollup project, in
rollup.config.js
:
import federation from '@originjs/vite-plugin-federation'
export default {
input: 'src/index.js',
output: {
format: 'esm',
dir: 'dist'
},
plugins: [
federation({
filename: 'remoteEntry.js',
exposes: {
'./Button': './src/button'
},
shared: ['react']
})
]
}
Vue2, for example
<script>
export default {
name: 'App',
components: {
RemoteButtonScoped: () => import('remote-simple/remote-simple-button-scoped'),
}
}
</script>
Vue2, for example
<template>
<div>
<RemoteButtonScoped />
</div>
</template>
Required as the module name of the remote module.
As the entry file of the remote module, not required, default is remoteEntry.js
As the remote module, the list of components exposed to the public, required for the remote module.
exposes: {
// 'externally exposed component name': 'externally exposed component address'
'. /remote-simple-button': '. /src/components/Button.vue',
'. /remote-simple-section': '. /src/components/Section.vue'
},
The remote module entry file referenced as a local module
remotes: {
// 'remote module name': 'remote module entry file address'
'remote-simple': 'http://localhost:5011/remoteEntry.js',
},
Dependencies shared by local and remote modules. Local modules need to configure the dependencies of all used remote modules; remote modules need to configure the dependencies of externally provided components.
configuration information
The default is true
, whether to add shared to the module, only for the remote
side, remote
will reduce some of the packaging time when this configuration is turned on, because there is no need to package some of the shared
, but once there is no shared
module available on the host
side, it will report an error directly, because there is no fallback module available
Default is defualt
, the shared domain name, just keep the remote
and host
sides the same
Only works on host
side, the version of the shared module provided is version
of the package.json
file in the shared package by default, you need to configure it manually only if you can't get version
by this method
Only for the remote
side, it specifies the required version of the host shared
used, when the version of the host
side does not meet the requiredVersion
requirement, it will use its own shared
module, provided that it is not configured with import=false
, which is not enabled by default
vite-plugin-federation dependencies are required during the development and build process, and global installation is recommended.
- rollup
- vite
Part of example requires dependencies, recommended for global installation.
- lerna
- rimraf
Github CI build, not engineering required:
- playwright-chromium