module-federation-runtime

module-federation-runtime

this package simulates and exposes the module-federation API, Support browser and node environment

applicable scene

1. can be used to implement module-federation in different compilation environments
2. can be used to dynamically load module-federation modules

   Please try to register all remotes in the initialization phase of the entire project as much as possible to achieve the same effect as when compiling Otherwise, it will be difficult for you to maintain your shared: singleton, requiredVersion and other strategies because the shared library will be dynamically added during runtime

Table of Contents

• Installation
• Usage
• API
  • remotes
  • shareScopes
  • initSharing
  • registerShared
  • findShared
  • registerRemotes
  • findRemote
  • findModule

Installation

npm install module-federation-runtime

Usage example

// browser
import * as runtime from 'module-federation-runtime';
// node
import * as runtime from 'module-federation-runtime/dist/node';

import { remotes, shareScopes, initSharing, registerShared, findShared, registerRemotes, findRemote, findModule } from 'module-federation-runtime';

;(async function () {
  await registerRemotes({
    "mfapp01": {
      url: "https://cdn.jsdelivr.net/npm/mf-app-01/dist/remoteEntry.js"
    },
    "mfapp02": {
      url: "https://cdn.jsdelivr.net/npm/mf-app-02@latest/dist/remoteEntry.js"
    }
  })
  registerShared({
    "react-dom1": {
      version: "18.0.0",
      get() {
        return function () {
          return {
            test: 1
          }
        }
      }
    }
  })
  const remoteModule = await findModule("mfapp01", "./App")
  const shareReactDom = findShared({
    name: "react-dom",
    requiredVersion: "18"
  })
  console.log("remotes", remotes)
  console.log("findRemote", findRemote("mfapp01"))
  console.log("remoteModule", remoteModule)
  console.log("shareScopes", shareScopes)
  console.log("shareReactDom from:", shareReactDom.from)
  console.log("shareReactDom value:", (await shareReactDom.get())())
})()

API

initSharing

wait for all remote modules to be initialized

initSharing(shareScopeKey: string): Promise<1>;

initSharing("default").then(() => {})

registerShared

registerShared(shared: {
  [name: string]: {
    get: function(): ModuleFactory;
    version: string;
    loaded?: boolean;
    from?: string;
    shareScope?: string;
  };
}, shareScopes?: ShareScopes): void;

findShared

findShared(shareConfig: {
  name: string;
  strictVersion?: boolean;
  singleton?: boolean;
  shareScope?: string;
  requiredVersion?: string;
}, shareScopes?: ShareScopes): RegisteredShare;

registerRemotes

registerRemotes(remotes?: {
  [global: string]: {
    url: string;
    shareScope?: string;
  };
}, customLoadScript?: function():Promise<any>, shareScopes?: ShareScopes): Promise;

findRemote

findRemote(global: string): Promise<ModuleFederationContainer>;

findModule

findModule(global: string, path: string): Promise<Module>

remotes

remotes: {
  [global: string]: {
    url: string;
    shareScope?: string;
    container: ModuleFederationContainer;
    containerPromise: Promise<ModuleFederationContainer>;
  };
};

shareScopes

shareScopes: {
  [key: string]: ShareScope;
};