Package Exports

@module-federation/vite
@module-federation/vite/lib/index.cjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@module-federation/vite) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vite plugin for Module Federation

Reason why 🤔

Microservices nowadays is a well-known concept and maybe you are using it in your current company. Do you know that now you can apply similar ideas on the Frontend? With Module Federation you can load separately compiled and deployed code into a unique application. This plugin makes Module Federation work together with Vite.

Working implementations

React

Svelte

Vue

Getting started 🚀

https://module-federation.io/guide/basic/webpack.html

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { federation } from 'module-federation-vite';
import topLevelAwait from 'vite-plugin-top-level-await';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    federation({
      name: 'bbc',
      remotes: {
        mfapp01: 'mfapp01@https://unpkg.com/mf-app-01@1.0.9/dist/remoteEntry.js',
        remote2: 'mfapp02@https://unpkg.com/mf-app-02/dist/remoteEntry.js',
        remote3:
          'remote1@https://unpkg.com/react-manifest-example_remote1@1.0.6/dist/mf-manifest.json',
        // "remote4": {
        //   entry: "http://localhost:5174/dd/remoteEntry.js",
        //   globalEntryName: "bb",
        //   type: "esm"
        // }
      },
      exposes: {
        App: './src/App.vue',
      },
      filename: 'dd/remoteEntry.js',
      shared: {
        vue: {},
        react: {
          requiredVersion: '18',
        },
      },
    }),
    // If you set build.target: "chrome89", you can remove this plugin
    // topLevelAwait(),
  ],
  build: {
    target: 'chrome89',
  },
});

roadmap

feat: generate mf-manifest.json
feat: support chrome plugin

✅ ~~feat: support runtime plugins~~

feat: download remote d.ts
feat: generate d.ts
feat: support @vitejs/plugin-legacy

So far so good 🎉

Now you are ready to use Module Federation in Vite!