Skip to content
This repository was archived by the owner on Dec 18, 2024. It is now read-only.

Commit 6b364d8

Browse files
zhangHongEnzhangHongEn
committed
1.0.0
1 parent 17e24d5 commit 6b364d8

File tree

9 files changed

+320
-208
lines changed

9 files changed

+320
-208
lines changed

‎packages/stringify-has-fn/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "stringify-has-fn",
3-
"version": "1.0.2",
3+
"version": "1.0.3",
44
"description": "JSON.stringify has function",
55
"main": "src/index.js",
66
"devDependencies": {

‎packages/stringify-has-fn/src/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ function stringifyHasFn (obj) {
1414
var fnStr = fnInfo[1].toString()
1515
var isAsyncFn = fnStr.substring(0, fnStr.indexOf("(")).indexOf("async ") > -1
1616
var argsAndBody = fnStr.match(/\([\s\S]*\}/)[0]
17-
var isArrorFun = /^\([\s]*\)[\s]*=>[\s]*\{/.test(argsAndBody)
17+
var isArrorFun = /^\([^)]*\)[\s]*=>[\s]*\{/.test(argsAndBody)
1818
var fnStatement = isArrorFun ? argsAndBody : `function ${argsAndBody}`
1919
if (isAsyncFn) fnStatement = `async ${fnStatement}`
2020

‎packages/universal-module-federation-plugin/README-cn.md

Lines changed: 91 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
* [UniversalModuleFederationPlugin 示例](#UniversalModuleFederationPlugin-示例)
2323
* [UniversalModuleFederationPlugin API](#UniversalModuleFederationPlugin-API)
2424
* [运行时获取module-federation配置](#运行时获取module-federation配置)
25+
* [模块委托](#模块委托)
2526

2627
## UmdPlugin示例
2728

@@ -50,9 +51,6 @@ module.exports = {
5051
"react-router": "app4reactRouter@https://unpkg.com/react-router@6.4.3/dist/umd/react-router.production.min.js",
5152
"@remix-run/router": "app5remixRouter@https://unpkg.com/@remix-run/router@1.0.3/dist/router.umd.min.js"
5253
},
53-
dependencies: {
54-
automatic: ["shareScopes", "remotes"],
55-
}
5654
}),
5755
new UmdPlugin({
5856
// ...
@@ -64,25 +62,26 @@ module.exports = {
6462

6563
## UmdPlugin API
6664

67-
| options | desc | default | examles |
68-
|-------------------------------|--------------------------------------------|-----------------------------------|:--------------------------------------------------|
69-
| remotes | umd remotes | {} | {app2: "app@http://xxx.js"} |
70-
| dependencies.automatic | 自动匹配remotes和shared中同名的依赖项 | ["shareScopes", "remotes"] | |
71-
| dependencies.referenceShares | 配置从 __*shared*__ 中寻找umd的依赖 | {} | {react: {singleton: true, requiredVersion: "17"}} |
72-
| dependencies.referenceRemotes | 配置从remotes中寻找umd的依赖 | {} | {react: "app5"} |
73-
| runtimeUmdExposes | 如果umd包有多个入口，可以用这个函数解析入口 | ({$umdValue}) => return $umdValue | |
74-
| runtimeInject | 同 __*UniversalModuleFederationPlugin*__ | | |
65+
| options | desc | default | examles |
66+
|-------------------------------|------------------------------------------|----------------------------|:--------------------------------------------------|
67+
| remotes | umd remotes | {} | {app2: "app@http://xxx.js"} |
68+
| dependencies.automatic | 自动匹配remotes和shared中同名的依赖项 | ["shareScopes", "remotes"] | |
69+
| dependencies.referenceShares | 配置从 __*shared*__ 中寻找umd的依赖 | {} | {react: {singleton: true, requiredVersion: "17"}} |
70+
| dependencies.referenceRemotes | 配置从remotes中寻找umd的依赖 | {} | {react: "app5"} |
71+
| runtime | 同 __*UniversalModuleFederationPlugin*__ | | |
7572

76-
#### runtimeUmdExposes
73+
#### runtime.get
7774
``` js
78-
// $umdValue: umd模块的返回值
79-
// $moduleName: "./App" <=== import "umdRemote/App"
80-
runtimeUmdExposes({ $umdValue, $moduleName }) {
81-
$moduleName = $moduleName.replace(/^\.\/?/, "")
82-
if ($moduleName) {
83-
return $umdValue[$moduleName]
75+
// module: umd模块的返回值
76+
// request: "./App" <=== import "umdRemote/App"
77+
runtime: {
78+
get({ module, request}) {
79+
request = request.replace(/^\.\/?/, "")
80+
if (request) {
81+
return module[request]
82+
}
83+
return module
8484
}
85-
return $umdValue
8685
}
8786
```
8887

@@ -99,11 +98,10 @@ const {UniversalModuleFederationPlugin} = require("universal-module-federation-p
9998
plugins: [
10099
new UniversalModuleFederationPlugin({
101100
remotes: {},
102-
runtimeInject: {
101+
runtime: {
103102
injectVars: {},
104-
initial: () => {},
105-
beforeImport(url, options) {},
106-
import(url, options) {}
103+
initial: ({__umf__}) => {},
104+
import({url, name, remoteKey, __umf__}) {}
107105
}
108106
})
109107
]
@@ -115,18 +113,18 @@ plugins: [
115113
plugins: [
116114
new UniversalModuleFederationPlugin({
117115
remotes: {},
118-
runtimeInject: {
119-
// 可以在以下任何runtime hooks中访问"__umf__.$injectVars.testInjectVar"
116+
runtime: {
117+
// 可以在以下任何runtime hooks中访问"__umf__.injectVars.testInjectVar"
120118
injectVars: {
121119
testInjectVar: 111,
122120
},
123121
// 任意runtime hooks都会注入"__umf__"这个变量
124-
initial: async () => {
125-
const {$getShare, $getRemote, $containerRemoteKeyMap, $injectVars, $context} = __umf__
126-
const testInjectVar = $injectVars
122+
initial: async ({__umf__}) => {
123+
const {getShare, getRemote, containerRemoteKeyMap, injectVars, context} = __umf__
124+
const testInjectVar = injectVars
127125
console.log("__umf__", __umf__, testInjectVar)
128-
// $context is an empty object by default, used to pass values between multiple hooks
129-
$context.testA = "testA"
126+
// context is an empty object by default, used to pass values between multiple hooks
127+
context.testA = "testA"
130128
await new Promise(resolve => {
131129
setTimeout(function () {
132130
resolve()
@@ -136,7 +134,7 @@ plugins: [
136134
// remoteA: "a@http://remoteA.com"
137135
// name: "a"
138136
// remoteKey: "remoteA"
139-
import(url, {name, remoteKey}) {
137+
import({url, name, remoteKey, __umf__}) {
140138
console.log("__umf__", __umf__)
141139
return {
142140
init(){},
@@ -156,26 +154,25 @@ plugins: [
156154

157155
## UniversalModuleFederationPlugin API
158156

159-
| options | desc | default | examles |
160-
|-------------------------------------------------------|-------------------------------------------------------------------------------|--------------|:----------------------------|
161-
| remotes | umf remotes | {} | {app2: "app@http://xxx.js"} |
162-
| runtimeInject.injectVars | 为runtime hooks注入变量，任何运行时挂钩都可以使用"\_\_umf\_\_.$injectVars"访问 | {} | {test: 123} |
163-
| runtimeInject.initial():promise | 初始化阶段的runtime hook | function(){} | |
164-
| runtimeInject.beforeImport(url, options):promise<url> | 准备引入remote时触发 | function(){} | |
165-
| runtimeInject.import(url, options):promise<module> | remote的引入钩子, 需要返回一个 container{init, get} | function(){} | |
157+
| options | desc | default | examles |
158+
|--------------------------------------------------------------|-------------------------------------------------------------------------------|--------------|:----------------------------|
159+
| remotes | umf remotes | {} | {app2: "app@http://xxx.js"} |
160+
| runtime.injectVars | 为runtime hooks注入变量，任何运行时挂钩都可以使用"\_\_umf\_\_.$injectVars"访问 | {} | {test: 123} |
161+
| runtime.initial():promise | 初始化阶段的runtime hook | function(){} | |
162+
| runtime.import({url, name, remoteKey}):promise<module> | remote的引入钩子, 需要返回一个 container{init, get} | function(){} | |
166163

167164
#### \_\_umf\_\_
168165

169166
任何运行时挂钩都会注入"\_\_umf\_\_"变量
170167

171-
| property | desc | examles |
172-
|----------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------|--------------------------------------------|
173-
| $getRemote("request"):promise<module> | 用于获取远程模块, 与from处语法一致: import xxx from "xxxx/xxx" | $getRemote("app2/App") |
174-
| $getShare(pkgname: string, {singleton, requiredVersion, ......}):promise<module> | 用于获取share, 第二个参数与shared.xxx配置一致 | $getShare("react", {singleton: true}) |
175-
| $containerRemoteKeyMap: object | 如果配置了 remotes: {"@app2/xx": "app3@http://xxx"} | 则可以这么获取remotes的映射: $containerRemoteKeyMap.app3 --> "@app2/xx" |
176-
| $injectVars: object | 插件配置的注入运行时的变量 | |
177-
| $context: object | $context 默认为空对象，用于多个hook之间传递值 | $context.xxx = xxx |
178-
| - | - | - |
168+
| property | desc | examles |
169+
|---------------------------------------------------------------------------------|---------------------------------------------------------------|------------------------------------------------------------------------|
170+
| getRemote("request"):promise<module> | 用于获取远程模块, 与from处语法一致: import xxx from "xxxx/xxx" | getRemote("app2/App") |
171+
| getShare(pkgname: string, {singleton, requiredVersion, ......}):promise<module> | 用于获取share, 第二个参数与shared.xxx配置一致 | getShare("react", {singleton: true}) |
172+
| containerRemoteKeyMap: object | 如果配置了 remotes: {"@app2/xx": "app3@http://xxx"} | 则可以这么获取remotes的映射: containerRemoteKeyMap.app3 --> "@app2/xx" |
173+
| injectVars: object | 插件配置的注入运行时的变量 | |
174+
| context: object | $context 默认为空对象，用于多个hook之间传递值 | context.xxx = xxx |
175+
| - | - | - |
179176

180177

181178
## 动态远程url示例
@@ -198,11 +195,11 @@ module.exports = {
198195
app2: "app2@http://localhost:3000/remoteEntry.js",
199196
"mf-app-01": "mfapp01@mf-app-01@1.0.2/dist/remoteEntry.js"
200197
},
201-
runtimeInject: {
198+
runtime: {
202199
resolvePath({name, version, entry, query}) {
203200
return `https://cdn.jsdelivr.net/npm/${name}@${version}/${entry}?${query}`
204201
},
205-
async import(url, {name}) {
202+
async import({url, name}) {
206203
await new Promise(resolve => {
207204
__webpack_require__.l(url, resolve)
208205
})
@@ -216,7 +213,7 @@ module.exports = {
216213

217214
## 运行时获取module-federation配置
218215

219-
"runtimeInject" 可以设置为 function
216+
"runtime" 可以设置为 function
220217

221218
``` js
222219
// webpack.config.js
@@ -225,15 +222,57 @@ const {UniversalModuleFederationPlugin} = require("universal-module-federation-p
225222
module.exports = {
226223
plugins: [
227224
new UniversalModuleFederationPlugin({
228-
runtimeInject: (mfOptions) => ({
225+
runtime: (umfInstance) => ({
229226
injectVars: {
230-
mfOptions
227+
mfOptions: umfInstance.mfOptions
231228
},
232-
initial() {
229+
initial({__umf__}) {
233230
console.log("mfOptions", __umf__.$injectVars.mfOptions)
234231
}
235232
})
236233
}),
237234
]
238235
}
236+
```
237+
238+
## 模块委托
239+
``` js
240+
// webpack.config.js
241+
const {UniversalModuleFederationPlugin} = require("universal-module-federation-plugin")
242+
243+
module.exports = {
244+
plugins: [
245+
new ModuleFederationPlugin({
246+
shared: { react: { singleton: true } },
247+
}),
248+
new UniversalModuleFederationPlugin({
249+
remotes: {
250+
"mf-app-01": "mfapp01@https://cdn.jsdelivr.net/npm/mf-app-01/dist/remoteEntry.js",
251+
},
252+
runtime: "./src/remote-delegate.js"
253+
}),
254+
]
255+
}
256+
```
257+
``` js
258+
// src/remote-delegate.js
259+
console.log("initial")
260+
module.exports.import = function ({url, name, remoteKey, __umf__}) {
261+
return new Promise((resolve, reject) => {
262+
const global = name
263+
const __webpack_error__ = new Error()
264+
__webpack_require__.l(
265+
url,
266+
function (event) {
267+
if (typeof window[global] !== 'undefined') return resolve(window[global]);
268+
var realSrc = event && event.target && event.target.src;
269+
__webpack_error__.message = 'Loading script failed.\\n(' + event.message + ': ' + realSrc + ')';
270+
__webpack_error__.name = 'ScriptExternalLoadError';
271+
__webpack_error__.stack = event.stack;
272+
reject(__webpack_error__);
273+
},
274+
global,
275+
);
276+
})
277+
}
239278
```

0 commit comments

Comments
 (0)