個人博客: https://alili.tech/
使用single-spa構建我們的微服務化的前端應用之后,其實有一個問題會一直困擾著我們,
就是如何有效的開發(fā)?如何與我們平時開發(fā)的前端應用一樣簡單,容易上手.
今天就以umi子模塊為例,希望給到大家一個思路
今天我就介紹一種方法,希望對大家有幫助.
模塊加載器
是否還記得我之前的模塊加載器, https://alili.tech/archive/1a60cede/
我們只需要將原來模塊的加載器,封裝成npm包.
然后在我們開發(fā)子模塊項目的時候,運行我們的加載器
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代理到我們的線上測試環(huán)境,來拿到這個文件
// 我們需要通過webpack代理到我們的線上測試環(huán)境,來拿到這個文件
// 我們需要通過webpack代理到我們的線上測試環(huán)境,來拿到這個文件
// 重要的事情說三遍
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)
// 注冊我們的線上測試環(huán)境的
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
});
}
// 重點!!!
// 注冊本地正在開發(fā)的模塊
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 };
// 注冊應用于事件派發(fā)器
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
}
// 注冊應用于事件派發(fā)器
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}
});
`);
// 開發(fā)環(huán)境
if (process.env.NODE_ENV === 'development') {
// 替換我們的渲染函數(shù)為以下內(nèi)容,直接返回子模塊的聲明周期
// 這樣我們就可以在一開始寫的的app.js里面的render函數(shù),拿到這些返回的東西呢
// 通過我們修改過后的模塊加載器,注冊到single-spa中
api.modifyEntryRender(`
const bootstrap = [
reactLifecycles.bootstrap,
];
const mount = [
reactLifecycles.mount,
];
const unmount = [
reactLifecycles.unmount,
];
return {
bootstrap,
mount,
unmount
}
`);
}
// 經(jīng)過以上的修改之后,我們的umi會失去熱更新的功能,
// 只能退而求其次,主動刷新瀏覽器,不過也不傷大雅
// 編譯完成之后,主動刷新瀏覽器
api.onDevCompileDone(() => {
api.refreshBrowser()
});
webpack代理
別忘了修改代理配置,為了可以直接拿到所有的項目位置
{
devServer: {
proxy: {
'/project.config.js': {
// 你的測試環(huán)境地址
target: 'https://demo.xyz/',
}
}
},
}
尾巴
所有的前端微服務化的關鍵點,今天算是全部寫完了.
經(jīng)過了大半年的思考與探索,為去年9月份的自問自答的:
前端微服務化解決方案1 - 思考
我們即將面臨以下問題:
- 我們?nèi)绾螌崿F(xiàn)在一個頁面里渲染多種技術棧?
- 不同技術棧的獨立模塊之間如何通訊?
- 如何通過路由渲染到正確的模塊?
- 在不同技術棧之間的路由該如何正確觸發(fā)?
- 項目代碼別切割之后,通過何種方式合并到一起?
- 我們的每一個模塊項目如何打包?
- 前端微服務化后我們該如何編寫我們的代碼?
- 獨立團隊之間該如何協(xié)作?
現(xiàn)在已經(jīng)全部得出了答案.
