个人博客: https://alili.tech/
使用single-spa构建我们的微服务化的前端应用之后,其实有一个问题会一直困扰着我们,
就是如何有效的开发?如何与我们平时开发的前端应用一样简单,容易上手.
今天就以umi子模块为例,希望给到大家一个思路
今天我就介绍一种方法,希望对大家有帮助.
模块加载器
是否还记得我之前的模块加载器, https://alili.tech/archive/1a60cede/
我们只需要将原来模块的加载器,封装成npm包.
然后在我们开发子模块项目的时候,运行我们的加载器
image
// umi src/app.js
import bootstrap from '@demo/demo-module-dev-loader' //封装过后的npm包
import store from 'store'; // 我们用于通讯的store文件
export async function render(oldRender) {
if (process.env.NODE_ENV === 'development') {
const main = oldRender();
const res = await window.fetch('./project.json');
let currentProject = await res.json();
bootstrap({
main,
store,
prefix: currentProject.prefix
});
} else {
oldRender();
}
}
module-dev-loader
我们的demo-module-dev-loader里一样会有一个 Bootstrap.js文件,我们对他进行一些小的修改.
import * as singleSpa from 'single-spa';
import { registerApp,registerLocal } from './Register'
export default async function bootstrap (local) {
// 拿到我们的项目配置文件,但是我们的本地是没有这个文件的.
// 我们需要通过webpack代理到我们的线上测试环境,来拿到这个文件
// 我们需要通过webpack代理到我们的线上测试环境,来拿到这个文件
// 我们需要通过webpack代理到我们的线上测试环境,来拿到这个文件
// 重要的事情说三遍
const projectConfig = await window.SystemJS.import('/project.config.js')
const res = await window.fetch('/project.json')
const currentProject = await res.json()
let {projects} = projectConfig;
// 移除当前项目,因为当前项目会使用registerLocal方法注册
projects = projects.filter(ele => ele.name !== currentProject.name)
// 注册我们的线上测试环境的
for (let index = 0; index < projects.length; index++) {
const project = projects[index];
await registerApp({
name: project.name,
main: `${project.main}`,
store: project.store,
base: project.base,
prefix: project.prefix
});
}
// 重点!!!
// 注册本地正在开发的模块
local && registerLocal(local)
singleSpa.start();
}
registerLocal 方法展示
// Register.js
// 在原来registerApp上做了一些删减,大概的原理是一模一样的
export function registerLocal({base,main,prefix,store,name='local'}){
// 导入store模块
let storeModule = {}, customProps = { globalEventDistributor: globalEventDistributor };
storeModule = store && { storeInstance: null };
// 注册应用于事件派发器
if (storeModule.storeInstance && globalEventDistributor) {
// 取出 redux storeInstance
customProps.store = storeModule.storeInstance;
// 注册到全局
globalEventDistributor.registerStore(storeModule.storeInstance);
}
singleSpa.registerApplication(name, async ()=> main, base ? (() => true) : hashPrefix({prefix}),customProps);
}
// 原来的registerApp方法,与以前一模一样,没有改动.
// 为了方便对比registerLocal,所以列出来 供大家参考
export async function registerApp(params) {
// 导入store模块
let storeModule = {}, customProps = { globalEventDistributor: globalEventDistributor };
// 尝试导入store
try {
storeModule = params.store ? await window.SystemJS.import(params.store) : { storeInstance: null };
} catch (e) {
console.log(`Could not load store of app ${params.name}.`, e);
//如果失败则不注册该模块
return
}
// 注册应用于事件派发器
if (storeModule.storeInstance && globalEventDistributor) {
// 取出 redux storeInstance
customProps.store = storeModule.storeInstance;
// 注册到全局
globalEventDistributor.registerStore(storeModule.storeInstance);
}
singleSpa.registerApplication(params.name, async ()=> await window.SystemJS.import(params.main), params.base ? (() => true) : hashPrefix(params), customProps);
}
umi插件
我们的umi插件也需要修改
// 还是原来的元素加载方法
const domElementGetterStr = `
function domElementGetter() {
let el = document.getElementById('submodule-page')
if (!el) {
el = document.createElement('div')
el.id = 'submodule-page'
}
let timer = null
timer = setInterval(() => {
if (document.querySelector('#submoduleContent.submoduleContent') && !document.querySelector('#submodule-page')) {
document.querySelector('#submoduleContent.submoduleContent').appendChild(el)
clearInterval(timer)
}
}, 100)
return el
}`
// 在umi 导入single-spa-react模块
// 并且封装我们的rootElement 组件,拿到我们的生命周期实例
api.addEntryCodeAhead(`
import singleSpaReact from 'single-spa-react';
let reactLifecycles;
reactLifecycles = singleSpaReact({
React,
ReactDOM,
rootComponent: (spa) => window.g_plugins.apply('rootContainer', {
initialValue: React.createElement(require('./router').default),
}),
domElementGetter: ${options.base?`() => document.getElementById('root')`:domElementGetterStr}
});
`);
// 开发环境
if (process.env.NODE_ENV === 'development') {
// 替换我们的渲染函数为以下内容,直接返回子模块的声明周期
// 这样我们就可以在一开始写的的app.js里面的render函数,拿到这些返回的东西呢
// 通过我们修改过后的模块加载器,注册到single-spa中
api.modifyEntryRender(`
const bootstrap = [
reactLifecycles.bootstrap,
];
const mount = [
reactLifecycles.mount,
];
const unmount = [
reactLifecycles.unmount,
];
return {
bootstrap,
mount,
unmount
}
`);
}
// 经过以上的修改之后,我们的umi会失去热更新的功能,
// 只能退而求其次,主动刷新浏览器,不过也不伤大雅
// 编译完成之后,主动刷新浏览器
api.onDevCompileDone(() => {
api.refreshBrowser()
});
webpack代理
别忘了修改代理配置,为了可以直接拿到所有的项目位置
{
devServer: {
proxy: {
'/project.config.js': {
// 你的测试环境地址
target: 'https://demo.xyz/',
}
}
},
}
尾巴
所有的前端微服务化的关键点,今天算是全部写完了.
经过了大半年的思考与探索,为去年9月份的自问自答的:
前端微服务化解决方案1 - 思考
我们即将面临以下问题:
- 我们如何实现在一个页面里渲染多种技术栈?
- 不同技术栈的独立模块之间如何通讯?
- 如何通过路由渲染到正确的模块?
- 在不同技术栈之间的路由该如何正确触发?
- 项目代码别切割之后,通过何种方式合并到一起?
- 我们的每一个模块项目如何打包?
- 前端微服务化后我们该如何编写我们的代码?
- 独立团队之间该如何协作?
现在已经全部得出了答案.
