11# universal-module-federation-plugin
22
3+ [ ![ npm] ( https://img.shields.io/npm/v/universal-module-federation-plugin.svg )] ( https://www.npmjs.com/package/universal-module-federation-plugin )
4+
35Keep the original API of module-federation, support the integration of various module specifications
46
57Allows you to control all the processes of each dependency by yourself
68
7- Can do almost anything you want
8-
9- ## umd
9+ ## umd examles
1010
1111Allow module-federation to use umd module, umd dependencies can be obtained from shareScopes or remotes
1212
@@ -21,8 +21,8 @@ module.exports = {
2121 filename: ' remoteEntry.js'
2222 remotes: {
2323 app2: " app2@http://localhost:9002/remoteEntry.js"
24- app4reactRouter : " app4reactRouter@https://unpkg.com/react-router@6.4.3/dist/umd/react-router.production.min.js"
25- app5remixRouter : " app5remixRouter@https://unpkg.com/@remix-run/router@1.0.3/dist/router.umd.min.js"
24+ " react-router " : " app4reactRouter@https://unpkg.com/react-router@6.4.3/dist/umd/react-router.production.min.js"
25+ " @remix-run/router " : " app5remixRouter@https://unpkg.com/@remix-run/router@1.0.3/dist/router.umd.min.js"
2626 },
2727 exposes: {
2828 ' ./App' : ' ./src/App'
@@ -31,30 +31,9 @@ module.exports = {
3131 }),
3232 new UmdPlugin ({
3333 // The matched remotes are loaded in umd mode
34- includeRemotes: [" app4reactRouter" / app5remixRouter/ ],
35- // $umdValue: Module object exposed by umd
36- // $moduleName: "./App" <=== import "umdRemote/App"
37- runtimeUmdExposes ({ $umdValue, $moduleName }) {
38- $moduleName = $moduleName .replace (/ ^ \.\/ ? / " "
39- if ($moduleName) {
40- return $umdValue[$moduleName]
41- }
42- return $umdValue
43- },
34+ includeRemotes: [/ react-router/ " @remix-run/router"
4435 dependencies: {
45- // Automatically match dependencies with the same name in remotes and shared
46- // !!! "automatic" is under development
4736 automatic: [" shareScopes" " remotes"
48- referenceShares: {
49- // "react" This dependency is fetched from shareScopes
50- react: {
51- singleton: true
52- },
53- },
54- referenceRemotes: {
55- // "@remix-run/router" This dependency is obtained from remotes
56- " @remix-run/router" : " app5remixRouter"
57- }
5837 }
5938 }),
6039 new UmdPlugin ({
@@ -65,60 +44,76 @@ module.exports = {
6544}
6645```
6746
47+ ## umd api
48+
49+ | options | desc | default | examles |
50+ | -------------------------------| ---------------------------------------------------------------------------| -----------------------------------| :--------------------------------------------------|
51+ | includeRemotes | match umd remotes | [ ] | [ /umd-app/, "app3"] |
52+ | excludeRemotes | exclude umd remotes | [ ] | [ "app2"] |
53+ | dependencies.automatic | Automatically match dependencies with the same name in remotes and shared | [ "shareScopes", "remotes"] | |
54+ | dependencies.referenceShares | umd dependencies use by shares | {} | {react: {singleton: true, requiredVersion: "17"}} |
55+ | dependencies.referenceRemotes | umd dependencies use by remotes | {} | {react: "app5"} |
56+ | runtimeUmdExposes | | ({$umdValue}) => return $umdValue | |
57+
58+ #### runtimeUmdExposes
59+ ``` js
60+ // $umdValue: Module object exposed by umd
61+ // $moduleName: "./App" <=== import "umdRemote/App"
62+ runtimeUmdExposes ({ $umdValue, $moduleName }) {
63+ $moduleName = $moduleName .replace (/ ^ \.\/ ? / " "
64+ if ($moduleName) {
65+ return $umdValue[$moduleName]
66+ }
67+ return $umdValue
68+ }
69+ ```
70+
6871## custom module specification
6972
7073If you have modified systemjs, or you have your own module specification, you can use UniversalModuleFederationPlugin to integrate it. The following is the source code of UmdPlugin, and the explanation of each API will be updated after the documentation.
7174
72- ```
75+ ``` js
7376// webpack.config.js
74- const {UniversalModuleFederationPlugin} = require("universal-
75- module.exports = {
76- plugins: [
77- new UniversalModuleFederationPlugin({
78- includeRemotes: this.options.includeRemotes,
79- excludeRemotes: this.options.excludeRemotes,
80- runtimeInjectVars: {
81- referenceShares: this.options.dependencies.referenceShares,
82- referenceRemotes: this.options.dependencies.referenceRemotes,
83- umdExposes: this.options.runtimeUmdExposes
84- },
85- runtimeInject: ({$semverhook, $getShare, $getRemote, $injectVars}) => {
86- const {
87- referenceRemotes,
88- referenceShares,
89- umdExposes
90- } = $injectVars
91- const {interceptSystemDep} = require("umfjs")
92- const interceptDeps = Object.keys(referenceShares)
93- .concat(Object.keys(referenceRemotes))
94-
95- $semverhook.on("resolve", (url) => {})
96- $semverhook.on("import", (url) => {
97- return {
98- init(){},
99- async get(moduleName = "") {
100- const res = await window.System.import(url)
101- return function() {
102- return umdExposes({
103- $umdValue: res,
104- $moduleName: moduleName
105- })
106- }
107- }
108- }
109- })
110-
111- interceptSystemDep(interceptDeps, async (dep) => {
112- let depValue = null
113- if (referenceShares[dep]) {
114- depValue = await $getShare(referenceShares[dep].import || dep, referenceShares[dep])
115- } else if (referenceRemotes[dep]) {
116- depValue = await $getRemote(referenceRemotes[dep])
77+
78+ const PLUGIN_NAME = ' UmdPlugin'
79+ const UniversalModuleFederationPlugin = require (" ./UniversalModuleFederationPlugin"
80+
81+ class UmdPlugin {
82+
83+ apply (compiler ) {
84+ new UniversalModuleFederationPlugin ({
85+ runtimeInject : ({$semverhook, $getShare, $getRemote, $containerRemoteKeyMap, $injectVars}) => {
86+ const {interceptSystemAllDep } = require (" umfjs"
87+ const {System , eventBus } = interceptSystemAllDep ()
88+
89+ $semverhook .on (" import" url ) => {
90+ return {
91+ init (){},
92+ async get (moduleName = " "
93+ const res = await System .import (url)
94+ return function () {
95+ return umdExposes ({
96+ $umdValue: res,
97+ $moduleName: moduleName
98+ })
11799 }
118- return depValue
119- })
100+ }
120101 }
121- }).apply(compiler)
122- ]
102+ })
103+
104+ eventBus .on (" importDep" dep ) => {
105+ if (referenceRemotes[dep]) {
106+ return $getRemote (referenceRemotes[dep] || dep)
107+ }
108+ })
109+ eventBus .on (" importDep" dep ) => {
110+ if (referenceShares[dep]) {
111+ return $getShare (referenceShares[dep].import || dep, referenceShares[dep])
112+ }
113+ })
114+ }
115+ }).apply (compiler)
116+ }
117+
123118}
124119```
0 commit comments