From 05b2dc537c0f0c808ebe9644f68691fda53dac8c Mon Sep 17 00:00:00 2001 From: gaopeng Date: Wed, 17 Apr 2024 10:49:50 +0800 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20qiankun=20=E6=8F=92=E4=BB=B6?= =?UTF-8?q?=E6=94=AF=E6=8C=81=20ssr?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../libs/qiankun/master/masterRuntimePlugin.tsx | 3 +++ packages/plugins/src/qiankun/master.ts | 11 +++++++++++ packages/plugins/src/qiankun/slave.ts | 9 ++++++--- 3 files changed, 20 insertions(+), 3 deletions(-) diff --git a/packages/plugins/libs/qiankun/master/masterRuntimePlugin.tsx b/packages/plugins/libs/qiankun/master/masterRuntimePlugin.tsx index 13520cb78342..1d83542850c5 100644 --- a/packages/plugins/libs/qiankun/master/masterRuntimePlugin.tsx +++ b/packages/plugins/libs/qiankun/master/masterRuntimePlugin.tsx @@ -138,6 +138,9 @@ export async function render(oldRender: typeof noop) { } export function patchClientRoutes({ routes }: { routes: any[] }) { + if (typeof window === 'undefined') { + return; + } const microAppRoutes = [].concat( deepFilterLeafRoutes(routes), deepFilterLeafRoutes(microAppRuntimeRoutes), diff --git a/packages/plugins/src/qiankun/master.ts b/packages/plugins/src/qiankun/master.ts index 29a332190db6..0d9f2197e02e 100644 --- a/packages/plugins/src/qiankun/master.ts +++ b/packages/plugins/src/qiankun/master.ts @@ -210,4 +210,15 @@ export { MicroAppWithMemoHistory } from './MicroAppWithMemoHistory'; `, }); }); + + api.modifyConfig({ + before: 'ssr', + fn: (memo) => { + if (memo.ssr) { + memo.externals ??= {}; + memo.externals.qiankun = 'fs'; + } + return memo; + }, + }); }; diff --git a/packages/plugins/src/qiankun/slave.ts b/packages/plugins/src/qiankun/slave.ts index 2e976c28149b..24c9f0d04b5b 100644 --- a/packages/plugins/src/qiankun/slave.ts +++ b/packages/plugins/src/qiankun/slave.ts @@ -180,7 +180,10 @@ export interface IRuntimeConfig { ]; }); - api.chainWebpack((config) => { + api.chainWebpack((config, { ssr }: any) => { + if (ssr) { + return; + } assert(api.pkg.name, 'You should have name in package.json.'); // 默认不修改 library chunk 的 name，从而确保可以通过 window[appName] 访问到导出 // mfsu 关闭的时候才可以修改，否则可能导致配合 mfsu 时，子应用的 umd chunk 无法被正确加载 @@ -223,11 +226,11 @@ export interface IRuntimeConfig { api.addEntryCode(() => [ ` -export const bootstrap = qiankun_genBootstrap(render); +export const bootstrap = qiankun_genBootstrap(typeof window !== 'undefined' ? render : () => {}); export const mount = qiankun_genMount('${api.config.mountElementId}'); export const unmount = qiankun_genUnmount('${api.config.mountElementId}'); export const update = qiankun_genUpdate(); -if (!window.__POWERED_BY_QIANKUN__) { +if (typeof window !== 'undefined' && !window.__POWERED_BY_QIANKUN__) { bootstrap().then(mount); } `, From 9bd6fe300ff1a4eb95ccd6b8a4cd8b084f652568 Mon Sep 17 00:00:00 2001 From: gaopeng Date: Wed, 17 Apr 2024 14:36:02 +0800 Subject: [PATCH 2/4] fix: cr --- .../libs/qiankun/master/masterRuntimePlugin.tsx | 1 + packages/plugins/src/qiankun/master.ts | 17 ++++++++--------- packages/plugins/src/qiankun/slave.ts | 14 +++++++++----- packages/preset-umi/src/types.ts | 1 + 4 files changed, 19 insertions(+), 14 deletions(-) diff --git a/packages/plugins/libs/qiankun/master/masterRuntimePlugin.tsx b/packages/plugins/libs/qiankun/master/masterRuntimePlugin.tsx index 1d83542850c5..d9bf8b3e43d2 100644 --- a/packages/plugins/libs/qiankun/master/masterRuntimePlugin.tsx +++ b/packages/plugins/libs/qiankun/master/masterRuntimePlugin.tsx @@ -138,6 +138,7 @@ export async function render(oldRender: typeof noop) { } export function patchClientRoutes({ routes }: { routes: any[] }) { + // 在 ssr 的场景下，不执行主应用的 patchClientRoutes if (typeof window === 'undefined') { return; } diff --git a/packages/plugins/src/qiankun/master.ts b/packages/plugins/src/qiankun/master.ts index 0d9f2197e02e..4c5add5a52d9 100644 --- a/packages/plugins/src/qiankun/master.ts +++ b/packages/plugins/src/qiankun/master.ts @@ -211,14 +211,13 @@ export { MicroAppWithMemoHistory } from './MicroAppWithMemoHistory'; }); }); - api.modifyConfig({ - before: 'ssr', - fn: (memo) => { - if (memo.ssr) { - memo.externals ??= {}; - memo.externals.qiankun = 'fs'; - } - return memo; - }, + api.modifyConfig((memo) => { + // 在 ssr 的场景下，把 qiankun external 到一个任意模块 + // 这样就不会把 qiankun 的依赖构建进产物中 + if (memo.ssr) { + memo.externals ??= {}; + memo.externals.qiankun = 'fs'; + } + return memo; }); }; diff --git a/packages/plugins/src/qiankun/slave.ts b/packages/plugins/src/qiankun/slave.ts index 24c9f0d04b5b..f862601a14d3 100644 --- a/packages/plugins/src/qiankun/slave.ts +++ b/packages/plugins/src/qiankun/slave.ts @@ -180,7 +180,8 @@ export interface IRuntimeConfig { ]; }); - api.chainWebpack((config, { ssr }: any) => { + api.chainWebpack((config, { ssr }) => { + // ssr 场景下，通过 cjs 的方式来使用模块，跳过 umd方式的构建 if (ssr) { return; } @@ -226,10 +227,13 @@ export interface IRuntimeConfig { api.addEntryCode(() => [ ` -export const bootstrap = qiankun_genBootstrap(typeof window !== 'undefined' ? render : () => {}); -export const mount = qiankun_genMount('${api.config.mountElementId}'); -export const unmount = qiankun_genUnmount('${api.config.mountElementId}'); -export const update = qiankun_genUpdate(); +const qiankun_noop = () => new Error('qiankun lifecycle is not available for server runtime!'); +const ssrBuildTarget = process.env.SSR_BUILD_TARGET; +export const bootstrap = ssrBuildTarget ? qiankun_noop: qiankun_genBootstrap(render); +export const mount = ssrBuildTarget ? qiankun_noop : qiankun_genMount('${api.config.mountElementId}'); +export const unmount = ssrBuildTarget ? qiankun_noop : qiankun_genUnmount('${api.config.mountElementId}'); +export const update = ssrBuildTarget ? qiankun_noop : qiankun_genUpdate(); +// 增加 ssr 的判断 if (typeof window !== 'undefined' && !window.__POWERED_BY_QIANKUN__) { bootstrap().then(mount); } diff --git a/packages/preset-umi/src/types.ts b/packages/preset-umi/src/types.ts index cbbadade3f38..913866833417 100644 --- a/packages/preset-umi/src/types.ts +++ b/packages/preset-umi/src/types.ts @@ -129,6 +129,7 @@ export type IApi = PluginAPI & memo: WebpackChain, args: { env: Env; + ssr?: boolean; webpack: typeof webpack; }, ): void; From 47987b1d385a189efadbbb26b0ab5d35227007dd Mon Sep 17 00:00:00 2001 From: gaopeng Date: Thu, 18 Apr 2024 10:08:12 +0800 Subject: [PATCH 3/4] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=20external=20?= =?UTF-8?q?=E7=9A=84=E6=9C=BA=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/plugins/src/qiankun/master.ts | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/plugins/src/qiankun/master.ts b/packages/plugins/src/qiankun/master.ts index 4c5add5a52d9..b3729fe2f22a 100644 --- a/packages/plugins/src/qiankun/master.ts +++ b/packages/plugins/src/qiankun/master.ts @@ -211,13 +211,18 @@ export { MicroAppWithMemoHistory } from './MicroAppWithMemoHistory'; }); }); - api.modifyConfig((memo) => { + api.chainWebpack((config, { ssr }) => { // 在 ssr 的场景下，把 qiankun external 到一个任意模块 // 这样就不会把 qiankun 的依赖构建进产物中 - if (memo.ssr) { - memo.externals ??= {}; - memo.externals.qiankun = 'fs'; + if (ssr) { + const originalExternals = config.get('externals'); + config.externals({ + ...originalExternals, + qiankun: 'fs', + }); + return config; } - return memo; + + return config; }); }; From 4b375cad2933e5d981f3e274128b08bb1fa1439b Mon Sep 17 00:00:00 2001 From: gaopeng Date: Thu, 18 Apr 2024 22:39:01 +0800 Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=E5=A2=9E=E5=8A=A0=20ssr=20render=20?= =?UTF-8?q?=E5=90=8E=EF=BC=8C=E5=A4=84=E7=90=86=20qiankun=20=E7=9A=84?= =?UTF-8?q?=E7=94=9F=E5=91=BD=E5=91=A8=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/plugins/libs/qiankun/master/masterRuntimePlugin.tsx | 4 ++++ packages/plugins/libs/qiankun/slave/slaveRuntimePlugin.ts | 4 ++++ packages/plugins/src/qiankun/master.ts | 1 - 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/plugins/libs/qiankun/master/masterRuntimePlugin.tsx b/packages/plugins/libs/qiankun/master/masterRuntimePlugin.tsx index d9bf8b3e43d2..d8a70444f40d 100644 --- a/packages/plugins/libs/qiankun/master/masterRuntimePlugin.tsx +++ b/packages/plugins/libs/qiankun/master/masterRuntimePlugin.tsx @@ -77,6 +77,10 @@ function patchMicroAppRouteComponent(routes: any[]) { } export async function render(oldRender: typeof noop) { + // 在 ssr 的场景下，直接返回旧的 render + if (typeof window === 'undefined') { + return oldRender(); + } const runtimeOptions = await getMasterRuntime(); let masterOptions: MasterOptions = { ...getMasterOptions(), diff --git a/packages/plugins/libs/qiankun/slave/slaveRuntimePlugin.ts b/packages/plugins/libs/qiankun/slave/slaveRuntimePlugin.ts index e16244405db5..bd81f6bfc2e1 100644 --- a/packages/plugins/libs/qiankun/slave/slaveRuntimePlugin.ts +++ b/packages/plugins/libs/qiankun/slave/slaveRuntimePlugin.ts @@ -3,6 +3,10 @@ import { createHistory } from '@@/core/history'; import qiankunRender, { contextOptsStack } from './lifecycles'; export function render(oldRender: any) { + // 在 ssr 的场景下，直接返回旧的 render + if (typeof window === 'undefined') { + return oldRender(); + } return qiankunRender().then(oldRender); } diff --git a/packages/plugins/src/qiankun/master.ts b/packages/plugins/src/qiankun/master.ts index b3729fe2f22a..30ff0a914f43 100644 --- a/packages/plugins/src/qiankun/master.ts +++ b/packages/plugins/src/qiankun/master.ts @@ -220,7 +220,6 @@ export { MicroAppWithMemoHistory } from './MicroAppWithMemoHistory'; ...originalExternals, qiankun: 'fs', }); - return config; } return config;