mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-06 03:59:53 +08:00
chore(plugin-qiankun): 去掉无用代码
This commit is contained in:
万纯
parent
f179419757
commit
d32006e61a
@ -29,7 +29,7 @@
|
||||
"dependencies": {
|
||||
"@umijs/utils": "3.3.3",
|
||||
"address": "^1.1.2",
|
||||
"path-to-regexp": "^6.2.0",
|
||||
"lodash": "^4.17.15",
|
||||
"qiankun": "2.3.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -1,7 +1,3 @@
|
||||
// import { join } from 'path';
|
||||
|
||||
// const namespace = 'plugin-qiankun';
|
||||
|
||||
export default (api) => {
|
||||
api.describe({
|
||||
key: 'qiankun',
|
||||
@ -21,8 +17,4 @@ export default (api) => {
|
||||
require.resolve('./main'),
|
||||
require.resolve('./micro')
|
||||
]);
|
||||
|
||||
// const absRuntimeFilePath = join(namespace, 'runtime.js');
|
||||
|
||||
// api.addRuntimePlugin(() => `@@/${absRuntimeFilePath}`);
|
||||
};
|
||||
|
||||
@ -75,136 +75,4 @@ export default function (api) {
|
||||
source: absGetMicroAppRouteCompPath
|
||||
}
|
||||
]);
|
||||
|
||||
|
||||
// const { registerRuntimeKeyInIndex = false } = options || {};
|
||||
|
||||
// api.addRuntimePlugin(() => require.resolve('./runtime'));
|
||||
|
||||
// if (!registerRuntimeKeyInIndex) {
|
||||
// api.addRuntimePluginKey(() => 'qiankun');
|
||||
// }
|
||||
|
||||
// api.modifyDefaultConfig(config => ({
|
||||
// ...config,
|
||||
// mountElementId: defaultMainRootId,
|
||||
// disableGlobalVariables: true
|
||||
// }));
|
||||
|
||||
// // apps 可能在构建期为空
|
||||
// const { apps = [] } = options || {};
|
||||
// if (apps.length) {
|
||||
// // 获取一组路由中以 basePath 为前缀的路由
|
||||
// const findRouteWithPrefix = (routes, basePath) => {
|
||||
// for (const route of routes) {
|
||||
// if (route.path && testPathWithPrefix(basePath, route.path)) { return route; }
|
||||
|
||||
// if (route.routes && route.routes.length) {
|
||||
// return findRouteWithPrefix(route.routes, basePath);
|
||||
// }
|
||||
// }
|
||||
|
||||
// return null;
|
||||
// };
|
||||
|
||||
// const modifyAppRoutes = () => {
|
||||
// // TODO: fes缺少修改路由API
|
||||
// api.modifyRoutes((routes) => {
|
||||
// const {
|
||||
// config: { history: mainHistory = defaultHistoryMode }
|
||||
// } = api;
|
||||
|
||||
// const newRoutes = routes.map((route) => {
|
||||
// if (route.path === '/' && route.routes && route.routes.length) {
|
||||
// apps.forEach(({ history: slaveHistory = 'history', base }) => {
|
||||
// // 当子应用的 history mode 跟主应用一致时，为避免出现 404 手动为主应用创建一个 path 为 子应用 rule 的空 div 路由组件
|
||||
// if (slaveHistory === mainHistory) {
|
||||
// const baseConfig = toArray(base);
|
||||
|
||||
// baseConfig.forEach((basePath) => {
|
||||
// const routeWithPrefix = findRouteWithPrefix(routes, basePath);
|
||||
|
||||
// // 应用没有自己配置过 basePath 相关路由，则自动加入 mock 的路由
|
||||
// if (!routeWithPrefix) {
|
||||
// route.routes.unshift({
|
||||
// path: basePath,
|
||||
// exact: false,
|
||||
// component: `() => {
|
||||
// if (process.env.NODE_ENV === 'development') {
|
||||
// console.log('${basePath} 404 mock rendered');
|
||||
// }
|
||||
|
||||
// return React.createElement('div');
|
||||
// }`
|
||||
// });
|
||||
// } else {
|
||||
// // 若用户已配置过跟应用 base 重名的路由，则强制将该路由 exact 设置为 false，目的是兼容之前遗留的错误用法的场景
|
||||
// routeWithPrefix.exact = false;
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
|
||||
// return route;
|
||||
// });
|
||||
|
||||
// return newRoutes;
|
||||
// });
|
||||
// };
|
||||
|
||||
// modifyAppRoutes();
|
||||
// }
|
||||
|
||||
// const rootExportsFile = join(api.paths.absSrcPath, 'rootExports.js');
|
||||
|
||||
// api.addTmpGenerateWatcherPaths(() => rootExportsFile);
|
||||
|
||||
// const namespace = 'plugin-qiankun';
|
||||
// const absCoreFilePath = join(namespace, 'qiankunDefer.js');
|
||||
|
||||
// api.onGenerateFiles(() => {
|
||||
// const {
|
||||
// config: { history = defaultHistoryMode }
|
||||
// } = api;
|
||||
// const rootExports = `window.g_rootExports = ${existsSync(rootExportsFile) ? 'require(\'@/rootExports\')' : '{}'};`.trim();
|
||||
|
||||
// api.writeTmpFile({
|
||||
// path: `${namespace}/qiankunRootExports.js`,
|
||||
// content: rootExports
|
||||
// });
|
||||
|
||||
// api.writeTmpFile({
|
||||
// path: `${namespace}/subAppsConfig.json`,
|
||||
// content: JSON.stringify({
|
||||
// mainHistory: history,
|
||||
// ...options
|
||||
// })
|
||||
// });
|
||||
|
||||
// api.writeTmpFile({
|
||||
// path: `${namespace}/qiankunDefer.js`,
|
||||
// content: `
|
||||
// class Deferred {
|
||||
// constructor() {
|
||||
// this.promise = new Promise(resolve => this.resolve = resolve);
|
||||
// }
|
||||
// }
|
||||
// export const deferred = new Deferred();
|
||||
// export const qiankunStart = deferred.resolve;
|
||||
// `.trim()
|
||||
// });
|
||||
|
||||
// api.writeTmpFile({
|
||||
// path: `${namespace}/runtime.js`,
|
||||
// content: readFileSync(join(__dirname, 'runtime.js'), 'utf-8')
|
||||
// });
|
||||
// });
|
||||
|
||||
// api.addPluginExports(() => [
|
||||
// {
|
||||
// specifiers: ['qiankunStart'],
|
||||
// source: absCoreFilePath
|
||||
// }
|
||||
// ]);
|
||||
}
|
||||
|
||||
@ -4,14 +4,15 @@ import {
|
||||
watch,
|
||||
computed,
|
||||
onBeforeUnmount,
|
||||
onMounted
|
||||
} from 'vue';
|
||||
import { loadMicroApp } from 'qiankun';
|
||||
onMounted,
|
||||
} from "vue";
|
||||
import { loadMicroApp } from "qiankun";
|
||||
import mergeWith from "lodash/mergeWith";
|
||||
// eslint-disable-next-line import/extensions
|
||||
import { getMasterOptions } from './masterOptions';
|
||||
import { getMasterOptions } from "./masterOptions";
|
||||
|
||||
function unmountMicroApp(microApp) {
|
||||
if (microApp) {
|
||||
if (microApp && microApp.mountPromise) {
|
||||
microApp.mountPromise.then(() => microApp.unmount());
|
||||
}
|
||||
}
|
||||
@ -20,8 +21,8 @@ export const MicroApp = defineComponent({
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const {
|
||||
@ -31,37 +32,48 @@ export const MicroApp = defineComponent({
|
||||
...globalSettings
|
||||
} = getMasterOptions();
|
||||
|
||||
const {
|
||||
name,
|
||||
settings: settingsFromProps = {},
|
||||
loader,
|
||||
lifeCycles,
|
||||
className,
|
||||
...propsFromParams
|
||||
} = props;
|
||||
|
||||
const containerRef = ref(null);
|
||||
const microAppRef = ref();
|
||||
const updatingPromise = ref();
|
||||
const updatingTimestamp = ref(Date.now());
|
||||
|
||||
const appConfigRef = computed(() => {
|
||||
const _appConfig = apps.find(app => app.name === props.name);
|
||||
if (!_appConfig) {
|
||||
const getAppConfig = () => {
|
||||
const appConfig = apps.find((app) => app.name === name);
|
||||
if (!appConfig) {
|
||||
throw new Error(
|
||||
`[@fesjs/plugin-qiankun]: Can not find the configuration of ${props.name} app!`
|
||||
`[@fesjs/plugin-qiankun]: Can not find the configuration of ${name} app!`
|
||||
);
|
||||
}
|
||||
return _appConfig;
|
||||
});
|
||||
return appConfig;
|
||||
};
|
||||
|
||||
const loadApp = () => {
|
||||
const appConfig = appConfigRef.value;
|
||||
const appConfig = getAppConfig();
|
||||
const { name, entry, props: propsFromConfig = {} } = appConfig;
|
||||
// 加载新的
|
||||
microAppRef.value = loadMicroApp(
|
||||
{
|
||||
name: appConfig.name,
|
||||
entry: appConfig.entry,
|
||||
name: name,
|
||||
entry: entry,
|
||||
container: containerRef.value,
|
||||
props: { ...appConfig.props }
|
||||
props: { ...propsFromConfig, ...propsFromParams },
|
||||
},
|
||||
{
|
||||
...globalSettings,
|
||||
...(props.settings || {}),
|
||||
globalLifeCycles,
|
||||
lifeCycles: props.lifeCycles
|
||||
}
|
||||
...settingsFromProps,
|
||||
},
|
||||
mergeWith({}, globalLifeCycles, lifeCycles, (v1, v2) =>
|
||||
concat(v1 ?? [], v2 ?? [])
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
@ -73,7 +85,7 @@ export const MicroApp = defineComponent({
|
||||
unmountMicroApp(microAppRef.value);
|
||||
});
|
||||
|
||||
watch(appConfigRef, () => {
|
||||
watch(props, () => {
|
||||
unmountMicroApp(microAppRef.value);
|
||||
|
||||
loadApp();
|
||||
@ -81,7 +93,8 @@ export const MicroApp = defineComponent({
|
||||
|
||||
watch(microAppRef, () => {
|
||||
const microApp = microAppRef.value;
|
||||
const appConfig = appConfigRef.value;
|
||||
const appConfig = getAppConfig();
|
||||
const { props: propsFromConfig = {} } = appConfig;
|
||||
if (microApp) {
|
||||
if (!updatingPromise.value) {
|
||||
// 初始化 updatingPromise 为 microApp.mountPromise，从而确保后续更新是在应用 mount 完成之后
|
||||
@ -89,12 +102,13 @@ export const MicroApp = defineComponent({
|
||||
} else {
|
||||
// 确保 microApp.update 调用是跟组件状态变更顺序一致的，且后一个微应用更新必须等待前一个更新完成
|
||||
updatingPromise.value = updatingPromise.value.then(() => {
|
||||
const canUpdate = app => app?.update && app.getStatus() === 'MOUNTED';
|
||||
const canUpdate = (app) =>
|
||||
app?.update && app.getStatus() === "MOUNTED";
|
||||
if (canUpdate(microApp)) {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
if (process.env.NODE_ENV === "development") {
|
||||
if (
|
||||
Date.now() - updatingTimestamp.value
|
||||
< 200
|
||||
Date.now() - updatingTimestamp.value <
|
||||
200
|
||||
) {
|
||||
console.warn(
|
||||
`[@fesjs/plugin-qiankun] It seems like microApp ${props.name} is updating too many times in a short time(200ms), you may need to do some optimization to avoid the unnecessary re-rendering.`
|
||||
@ -102,7 +116,7 @@ export const MicroApp = defineComponent({
|
||||
}
|
||||
|
||||
console.info(
|
||||
`[@umijs/plugin-qiankun] MicroApp ${props.name} is updating with props: `,
|
||||
`[@fesjs/plugin-qiankun] MicroApp ${props.name} is updating with props: `,
|
||||
props
|
||||
);
|
||||
updatingTimestamp.value = Date.now();
|
||||
@ -110,7 +124,8 @@ export const MicroApp = defineComponent({
|
||||
|
||||
// 返回 microApp.update 形成链式调用
|
||||
return microApp.update({
|
||||
...appConfig.props
|
||||
...propsFromConfig,
|
||||
...propsFromParams,
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -118,6 +133,6 @@ export const MicroApp = defineComponent({
|
||||
}
|
||||
});
|
||||
|
||||
return () => <div ref={containerRef} className={props.className}></div>;
|
||||
}
|
||||
return () => <div ref={containerRef} className={className}></div>;
|
||||
},
|
||||
});
|
||||
|
||||
@ -144,108 +144,4 @@ if (!window.__POWERED_BY_QIANKUN__) {
|
||||
}
|
||||
`
|
||||
);
|
||||
|
||||
// const { registerRuntimeKeyInIndex = false } = options || {};
|
||||
|
||||
// api.addRuntimePlugin(() => require.resolve('./runtime'));
|
||||
|
||||
// // if (!registerRuntimeKeyInIndex) {
|
||||
// // api.addRuntimePluginKey(() => 'qiankun');
|
||||
// // }
|
||||
|
||||
// const lifecyclePath = require.resolve('./lifecycles');
|
||||
// const { name: pkgName } = require(join(api.cwd, 'package.json'));
|
||||
|
||||
// // TODO: fes缺少修改默认配置API
|
||||
// api.modifyDefaultConfig(memo => Object.assign(Object.assign({}, memo), {
|
||||
// disableGlobalVariables: true,
|
||||
// base: `/${pkgName}`,
|
||||
// mountElementId: defaultMircoRootId,
|
||||
// // 默认开启 runtimePublicPath，避免出现 dynamic import 场景子应用资源地址出问题
|
||||
// runtimePublicPath: true
|
||||
// }));
|
||||
|
||||
// if (api.service.userConfig.runtimePublicPath !== false) {
|
||||
// // TODO: fes缺少修改 publicPath API
|
||||
// api.modifyPublicPathStr(
|
||||
// () => `window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ || "${
|
||||
// // 开发阶段 publicPath 配置无效，默认为 /
|
||||
// process.env.NODE_ENV !== 'development'
|
||||
// ? api.config.publicPath || '/'
|
||||
// : '/'
|
||||
// }"`
|
||||
// );
|
||||
// }
|
||||
|
||||
// api.chainWebpack((config) => {
|
||||
// assert(api.pkg.name, 'You should have name in package.json');
|
||||
// config.output.libraryTarget('umd').library(`${api.pkg.name}-[name]`);
|
||||
// });
|
||||
|
||||
// // bundle 添加 entry 标记
|
||||
// // TODO: fes缺少修改HTML API
|
||||
// api.modifyHTML(($) => {
|
||||
// $('script').each((_, el) => {
|
||||
// const scriptEl = $(el);
|
||||
// const umiEntryJs = /\/?umi(\.\w+)?\.js$/g;
|
||||
// const scriptElSrc = scriptEl.attr('src');
|
||||
|
||||
// if (
|
||||
// umiEntryJs.test(
|
||||
// scriptElSrc !== null && scriptElSrc !== 0 ? scriptElSrc : ''
|
||||
// )
|
||||
// ) {
|
||||
// scriptEl.attr('entry', '');
|
||||
// }
|
||||
// });
|
||||
// return $;
|
||||
// });
|
||||
|
||||
// api.onGenerateFiles(() => {
|
||||
// api.writeTmpFile({
|
||||
// path: `${namespace}/qiankunContext.js`,
|
||||
// content: `
|
||||
// import { createApp, h } from 'vue';
|
||||
// export const Context = createContext(null);
|
||||
// export function useRootExports() {
|
||||
// return useContext(Context);
|
||||
// };
|
||||
// `.trim()
|
||||
// });
|
||||
|
||||
// api.writeTmpFile({
|
||||
// path: `${namespace}/runtime.js`,
|
||||
// content: readFileSync(join(__dirname, 'runtime.js'), 'utf-8')
|
||||
// });
|
||||
|
||||
// api.writeTmpFile({
|
||||
// path: `${namespace}/lifecycles.js`,
|
||||
// content: readFileSync(join(__dirname, 'lifecycles.js'), 'utf-8')
|
||||
// });
|
||||
// });
|
||||
|
||||
// api.addPluginExports(() => [
|
||||
// {
|
||||
// specifiers: ['useRootExports'],
|
||||
// source: `${namespace}/qiankunContext.js`
|
||||
// }
|
||||
// ]);
|
||||
|
||||
// api.addEntryImports(() => ({
|
||||
// source: lifecyclePath,
|
||||
// specifier:
|
||||
// '{ genMount as qiankun_genMount, genBootstrap as qiankun_genBootstrap, genUnmount as qiankun_genUnmount }'
|
||||
// }));
|
||||
|
||||
// api.addEntryCode(
|
||||
// () => `
|
||||
// export const bootstrap = qiankun_genBootstrap(Promise.resolve(), clientRender);
|
||||
// export const mount = qiankun_genMount();
|
||||
// export const unmount = qiankun_genUnmount('${api.config.mountElementId}');
|
||||
|
||||
// if (!window.__POWERED_BY_QIANKUN__) {
|
||||
// bootstrap().then(mount);
|
||||
// }
|
||||
// `
|
||||
// );
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user