usemf

!!!!!!!! new version to https://github.com/zhangHongEn/universal-module-federation-plugin/tree/main/packages/module-federation-runtime

Usemf is a jssdk (not a react hook) used to introduce module-federation in a non-webpack5 environment

中文文档

1. Modules of module federation can be introduced, and shared can be overwritten
2. @module-federation/webpack-4

Usage scenario

1. If you need to use the module Federation library provided by yourself or a third party in a non webpack5 environment, you can use usemf

Try online

https://stackblitz.com/github/wpmjs/wpmjs/tree/main/examples/umd-and-module-federation?file=app1%2Fsrc%2FApp.js

Simplest usage:

"Shared" is not required, and the "MF" module will automatically use the standby module

importusemffrom"usemf"constapp2=usemf.import({url: "http://localhost:3002/remoteEntry.js",name: "app2",})("./App")

API:

• import({url, name, shared: {shareScope, pkg}, customGetContainer})
• getShareScopes()
• getContainer({url, name, customGetContainer})
• getShare(name, {requiredVersion,shareScope,singleton,strictVersion}, shareScopes)

Advanced Usage:

importReactfrom"react";importusemffrom"usemf"constshared={// You can provide shared React to make app2 not use the standby react module to achieve react singletonreact: {version: "17.0.2",asyncget(){// const res = await window.System.import("https://unpkg.com/react@17.0.2/umd/react.development.js")returnfunction(){returnReact}}},"react-dom": {version: "17.0.2",asyncget(){returnfunction(){return{test: "react-dom"}}}}}constapp2=usemf.import({url: "http://localhost:3002/remoteEntry.js",name: "app2",shared: {react: shared.react}})("./App")constapp3=usemf.import({url: "http://localhost:3003/remoteEntry.js",name: "app3",
shared
})("./App")constApp2=React.lazy(()=>app2)constApp2_2=React.lazy(()=>app3)