。

但是再问深入一点#xff1a;它是干嘛的#xff0c;它有什么用#xff0c;可能就回答不出来了。

一方面没多少人研究和使用微前端。

可能还没来得及用微前端扩展项目#xff0c;公司就已经倒闭了。

另一方…前言

single-spa。

但是再问深入一点它是干嘛的它有什么用可能就回答不出来了。

一方面没多少人研究和使用微前端。

可能还没来得及用微前端扩展项目公司就已经倒闭了。

另一方面是中文博客对微前端的研究少之又少很多文章只是简单翻译一下官方文档读几个API放个官方的

Demo

文档一样喜欢造概念。

讲一个东西的时候总是把别的库拉进来一起讲把一个简单的东西变得非常复杂。

最令人吐槽的一点就是官方的

sample

的角度来聊一下官方文档的都讲了哪些内容相信看完这篇文章就能看懂

Demo

让我们从一个最小的需求开始说起。

有一天产品经理突然说我们要做一个

URL

就好吧再不行复制粘贴也很快吧。

而程序员想的却是又要看屎山了。

又要重构了。

又要联调了。

测试数据有没有啊等一下联调的后端是谁啊

估计这是做大项目时经常遇到的需求了搬运一个现有的页面。

我想大多数人都会选择在自己项目里复制粘贴别人的代码然后稍微重构一下再测试环境联调最后上线。

但是这样就又多了一份代码了如果别人的页面改了那么自己项目又要跟着同步修改再联调再上线非常麻烦。

iframe

Modal显示的时候只能在那一小块地方展示不能全屏展示无法跟随浏览器前进后退天生的硬隔离无法与主应用进行资源共享交流也很困难

SPA

切换路由就是切换页面组件组件的挂载和卸载非常快单页应用肯定共享

ReduxVue

技术栈无关主框架不限制接入应用的技术栈微应用具备完全自主权独立开发、独立部署微应用仓库独立前后端可独立开发部署完成后主框架自动完成同步更新增量升级在面对各种复杂场景时我们通常很难对一个已经存在的系统做全量的技术栈升级或重构而微前端是一种非常好的实施渐进式重构的手段和策略独立运行时每个微应用之间状态隔离运行时状态不共享

single-spa

是开始加载子应用怎么加载由开发者自己实现等会会说到Unload

unloadApplication

可以控制的我能理解那什么时候应该开始这一套生命周期呢应该是有一个契机来开始整套流程的或者某几个流程的。

window.location.href

app由开发者自己玩别的生命周期里要干嘛的还是由开发者造的子应用自己玩监听

url

说自己是微前端框架但是一个微前端的特性都没有实现都是需要开发者在加载自己子

App

APIregisterApplication表示注册一个子应用。

使用如下

singleSpa.registerApplication({name:

taobao,

匹配规则表示啥时候开始走这个子应用的生命周期customProps:

自定义

./providesHelperMethod.js;helperMethod();

/script

https://cdn.jsdelivr.net/npm/vue2.6.12/dist/vue.esm.browser.js}}

/scriptdiv

idcontainer我是{{name}}/divscript

typemoduleimport

https://cdn.jsdelivr.net/npm/vue2.6.12/dist/vue.esm.browser.js

现在只有

importmap它还有很多的功能比如获取当前加载的所有模块、当前模块的

import

typesystemjs-importmap{imports:

//localhost:9000/react-mf-root-config.js}}

/scriptscriptsingleSpa.registerApplication({name:

taobao,

System.import(react-mf/root-config),

/appName,

匹配规则表示啥时候开始走这个子应用的生命周期customProps:

自定义

singleSpa.registerApplication({name:

taobao,

匹配规则表示啥时候开始走这个子应用的生命周期customProps:

自定义

希望主应用应该就一个空壳子只需要管内容要放在哪个地方所有的功能、交互都应该交由

index.html

还是有点多余而且觉得有点奥特曼了。

不过为了跟着文档的节奏来这里假设就用

SystemJS

srchttps://storage.googleapis.com/polyglot.microfrontends.app/importmap.json/script%

(isLocal)

typesystemjs-importmap{imports:

//localhost:9000/polyglot-mf-root-config.js}}/script%

%script

srchttps://cdn.jsdelivr.net/npm/import-map-overrides2.2.0/dist/import-map-overrides.js/scriptscript

srchttps://cdn.jsdelivr.net/npm/systemjs6.8.3/dist/system.min.js/scriptscript

srchttps://cdn.jsdelivr.net/npm/systemjs6.8.3/dist/extras/amd.min.js/script

/head

bodyscriptSystem.import(polyglot-mf/root-config);System.import(polyglot-mf/styleguide);/scriptimport-map-overrides-full

show-when-local-storagedevtools

dev-libs/import-map-overrides-full

/body

single-spa;registerApplication({name:

System.import(polyglot-mf/navbar),activeWhen:

System.import(polyglot-mf/clients),activeWhen:

/clients,

polyglot-mf/account-settings,app:

loadWithoutAmd(polyglot-mf/account-settings),activeWhen:

/settings,

System.import(name).***n((module)

{window.define

是完美的轻量微前端主应用但是就算再压缩主应用的交互那总得告诉子应用放置的位置吧那不还得

DOM

idsingle-spa-layoutsingle-spa-routernav

nameorganization/nav/application/navdiv

nameorganization/settings/application/routeroute

nameorganization/clients/application/route/divfooterapplication

nameorganization/footer/application/footer/single-spa-router/template/head

/html

很像只能说一模一样吧。

当然上面这么写很直观但是浏览器并不认识这些元素所以

single-spa-layout

把识别这些元素的逻辑都封装成了函数并暴露给开发者开发者只要调用一下就能识别出

appName

{constructApplications,constructRoutes,constructLayoutEngine,

from

constructRoutes(document.querySelector(#single-spa-layout));//

const

constructApplications({routes,loadApp({

name

applications.forEach(registerApplication);//

启动主应用

来渲染子应用的根组件ReactDOM.render(SubApp/,

document.getElementById(root));

export

singleSpaReact({React,ReactDOM,rootComponent:

info,

reactLifecycles.unmount;single-spa

说我不能单给

搞啊别的框架也要给它们整上一个一碗水端平所以有这了这些牛鬼蛇神

CSS

{document.head.appendChild(styleElement);},reactLifecycles.mount,

]export

[https://example.com/main.css],//

Webpack

[cssLifecycles.bootstrap,reactLifecycles.bootstrap

]export

后会有样式闪一下的问题cssLifecycles.mount,reactLifecycles.mount

]export

同理reactLifecycles.unmount,cssLifecycles.unmount

Webpack

__webpack_require__.cssAssetFileName

CSS

文件名。

ExposeRuntimeCssAssetsPlugin

cssUrls

require(mini-css-extract-plugin);

const

require(single-spa-css/ExposeRuntimeCssAssetsPlugin.cjs);module.exports

{plugins:

MiniCssExtractPlugin({filename:

[name].css,}),new

ExposeRuntimeCssAssetsPlugin({//

The

引入和移除问题但是又带来了另一个问题怎么保证各个子应用的样式不互相干扰呢官方给出的建议是

第一种方法使用

.app1__settings-67f89dd87sf89ds

{color:

require(postcss-prefix-selector);module.exports

{plugins:

#single-spa-application\\:\\org-name\\/project-name})]

Shadow

这个问题和上面提到的处理“公共依赖”的问题是差不多的。

官方给出两个建议

CSS

其实上面两个方法都大同小异思路都是在主应用一波引入只是一个统一引入CSS另一个统一引入

子应用里使用

singleSpaLeakedGlobals({globalVariableNames:

[$,

[leakedGlobalsLifecycles.bootstrap,

放在第一位frameworkLifecycles.bootstrap,

]export

[leakedGlobalsLifecycles.mount,

mount

时添加全局变量如果之前有记录在案的直接恢复frameworkLifecycles.mount,

]export

[leakedGlobalsLifecycles.unmount,

删掉新添加的全局变量frameworkLifecycles.unmount,

url

single-spa-leaked-globalssingle-spa-css

这些库虽然它们也导出了生命周期但这些生命周期与页面渲染、url

application

来自动调度的而这些库是要通过手动调度的。

只不过我们一般选择在子应用里的生命周期里手动调用它们而已。

这种与

在微前端也有着非常重要的作用一般是在子应用的生命周期里提供一些功能像

single-spa-css

unmount是Parcel功能组件比如给子应用的生命周期打一些补丁bootstrap,

mount,

Tools前者用的不多后者自己看一下就会了不多废话。

由于本文是通过发现问题到解决问题来讲述文档内容的所以从头看到尾还是有点乱这里就做一下总结

微前端概念

文档就这些了嘛没错就这些了。

文档好像给了很多“最佳实践”但真正将所有“最佳实践”结合起来并落地的又没多少。

比如文档说用

来做样式隔离但是也没有详细说明要具体要怎么做。

像这样的例子还有很多文档往往只告诉了一条路怎么走还要看开发者自己。

这就你给人一种

“把问题只解决一半”

的用上面提到的小库来搭建微前端是可以的但是要用到生产环境真的没那么容易。

single-spa

微前端框架真正实现了微前端的所有特性不过这又是另外一个故事了。