微前端大赏二-singlespa实践
发布日期:2021-05-09 09:33:35 浏览次数:18 分类:博客文章

本文共 6056 字,大约阅读时间需要 20 分钟。

微前端大赏二-singlespa实践

 

介绍singleSpa

singleSpa是一个javascript库

它可以让很多小页面、小的组件、不同架构的前端组件在一个页面应用程序中共存。

这里有一个演示: ()

这个库可以让你的应用可以使用多个不同的技术栈(vue、react、angular等等),这样我们就可以做同步开发,最后再使用一个公用的路由即可实现路由完美切换。 也可以使用一样的技术栈,分不同的团队进行开发,只需要最后使用这个库把它们整合在一起,设置不用的路由名称就可以了。

优点:

  • 敏捷

    独立开发和更快的部署周期: 开发团队可以选择自己的技术并及时更新技术栈。 一旦完成其中一项就可以部署,而不必等待所有事情完毕。

  • 风险下降

    降低错误和回归问题的风险,相互之间的依赖性急剧下降。

  • 更小单元

    更简单快捷的测试,每一个小的变化不必再触碰整个应用程序。

  • 持续交付

    更快交付客户价值,有助于持续集成、持续部署以及持续交付。

缺点:

  • 配置复杂
    singlespa相对来说配置复杂,当然我们还有更简单一点的qiankun,也可以基于singlespa封装一套更适合自己的框架。
  • 一定的资源浪费
    由于核心逻辑还是在于请求manifest,拿到js文件后执行渲染,这个过程不可避免会产生一些冗余,对于C端的应用来说,这个问题比较致命,当然,对于B端来说,这个是可以接受的,在可控制的范围之内

 

singleSpa核心逻辑

几张图可以解决singleSpa的核心逻辑

第一张图,很显然,第一步,在我们的webpack应用里生成一个manifest.json文件,这个文件内容差不多如下:

 

{  "files": {    "static/js/0.chunk.js": "/static/js/0.chunk.js",    "static/js/0.chunk.js.map": "/static/js/0.chunk.js.map",    "static/js/1.chunk.js": "/static/js/1.chunk.js",    "static/js/1.chunk.js.map": "/static/js/1.chunk.js.map",    "main.js": "/static/js/main.chunk.js",    "main.js.map": "/static/js/main.chunk.js.map",    "runtime-main.js": "/static/js/bundle.js",    "runtime-main.js.map": "/static/js/bundle.js.map",    "index.html": "/index.html",    "static/media/logo.svg": "/static/media/logo.103b5fa1.svg"  },  "entrypoints": [    "static/js/bundle.js",    "static/js/0.chunk.js",    "static/js/main.chunk.js"  ]}

 

关键点在 entrypoints 这个属性,我们可以通过manifest拿到项目的依赖表并可以使用script标签动态加载出来,这个时候我们就可以实现动态加载不同的微前端应用了。

 

 

第二张图,我画出了更加具体的,singlespa在渲染过程中的核心逻辑

1、 首先我们有 main(主app) child(子app),主app只有一个,子app可以有多个
2、 其次,主app上一般我们可以在index.html里面,写多几个空间,也就是多几个div
例如:

 

 

3、然后,在我们的child上,我们要用webpack插件,生成一个带有所有需要加载的依赖文件的manifest.json

4、主应用去加载这个manifest.json,获取到具体的js,使用script标签把它放到主应用上,进行渲染

至此我们就可以完全搞清楚,为什么singlespa这么神奇了,接下来让我们搭建一个简易版的singlespa

 

搭建环境

 

vue main

由于我们需要使用webpack配置,而最新版本的vue-cli默认只有babel,我们用这个步骤来安装一个vue版本的main

1、装包

 

npm install @vue/cli @vue/cli-init  -g

 

2、创建一个项目

 

vue init webpack demo-single

 

3、cd demo-single

4、装包

 

npm i single-spa single-spa-vue axios --save

 

5、在src目录创建一个singlespa配置文件 single-spa-config.js

 

// single-spa-config.js    import * as singleSpa from 'single-spa'; //导入single-spa    import axios from 'axios'    /*        runScript:        一个promise同步方法。可以代替创建一个script标签,然后加载服务    */    const runScript = async (url) => {        return new Promise((resolve, reject) => {            const script = document.createElement('script');            script.src = url;            script.onload = resolve;            script.onerror = reject;            const firstScript = document.getElementsByTagName('script')[0];            firstScript.parentNode.insertBefore(script, firstScript);        });    };    const getManifest = (url, bundle) => new Promise(async (resolve) => {        const { data } = await axios.get(url);        // eslint-disable-next-line no-console        const { entrypoints } = data;        for (let i = 0; i < entrypoints.length; i++) {            await runScript('http://127.0.0.1:3000/' + entrypoints[i]).then(() => {                if (i === entrypoints.length - 1) {                    resolve()                }            })        }    });    singleSpa.registerApplication( //注册微前端服务        'singleDemoVue', async () => {            let singleVue = null;            await getManifest('http://127.0.0.1:3000/asset-manifest.json').then(() => {                singleVue = window.singleReact;            });            return singleVue;            },        location => location.pathname.startsWith('/react') // 配置前缀    );    singleSpa.start(); // 启动

 

注: 可以看到,runScript就是个创建script标签的方法,getManifest是一个简单的获取manifest并创建script的方法

6、在main.js里引入这个文件

 

import './single-spa-config'

7、运行

npm run dev

 

最终得到这样一个工程

 

 

这样我们就完成了一个入口的配置,当然它还很简单,更复杂的操作我们应该放在具体的工程上去做

 

react child

上面的代码可以看到,我们register了一个react应用  并且访问了它的manifest文件,现在我们需要创建一个react子应用,也是直接通过几个步骤来完成,我们使用create-react-app来快速搭建:

1、装包

 

npm install create-react-app -g

 

2、创建

 

npx create-react-app my-app

 

3、创建完成后,注意我们需要对webpack做一点修改,默认create-react-app会有一个git本地分支,让我们先提交到本地仓库一下

 

git statusgit add ./git commit -m ttt

 

4、拿到webpack配置文件,create-react-app默认隐藏了webpack配置文件

 

yarn eject 或 npm run eject

 

5、修改webpack文件

修改 /config/webpack.config.js 在output增加:

 

output: {    ... 这里忽略了原有的    library: 'singleReact',    libraryTarget: 'window'}

 

修改 /scripts/start.js文件,在const devServer = new ...这个地方,增加一个header的设置:

 

const devServer = new WebpackDevServer(compiler, {      ...serverConfig,      // 这里上增加的header设置      headers: {        'Access-Control-Allow-Origin': '*',      }      });

 

6、修改src/index.js

一个是要把root改为动态渲染,一个是注册生命周期

 

import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import reportWebVitals from './reportWebVitals';import singleSpaReact, {SingleSpaContext} from 'single-spa-react';const rootComponent = () => {  ReactDOM.render(      
, document.getElementById('react-root') );}// ReactDOM.render(// ,// document.getElementById('root')// );const reactLifecycles = singleSpaReact({ React, ReactDOM, rootComponent, errorBoundary(err, info, props) { // https://reactjs.org/docs/error-boundaries.html console.error(err) return (
This renders when a catastrophic error occurs
); },});export const bootstrap = reactLifecycles.bootstrap;export const mount = reactLifecycles.mount;export const unmount = reactLifecycles.unmount;// If you want to start measuring performance in your app, pass a function// to log results (for example: reportWebVitals(console.log))// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitalsreportWebVitals();

 

7、运行

npm run start

8、在main的vue那里,访问/react 你会看到下面有一个react渲染和vue的一起出现,大功告成

 

生命周期

生命周期函数共有4个:bootstrap、mount、unmount、update。 生命周期可以传入 返回Promise的函数也可以传入 返回Promise函数的数组。

引用一个大佬完整的说明, 非常的详细:

 

结论

single spa可以给我们提供一整套方案,去搭建一套微前端集成框架,但它并不是一个开箱即用的封装,它有很多的坑等着我们去踩。

一般情况下,我们选择使用qiankun,它的封装程度更好,api更加友好一些。待积攒足够多的使用经验,可以考虑自研一套自己的微前端框架,增加整体的前端研发效率。
下节我将给大家带来qiankun对singlespa的封装,在具体应用中的实践。待完结框架篇后,我们可以再深入探究singlespa的实现原理以及各种概念。

 

参考文章

single-spa 文档: 

微前端 single-spa: 

这可能是你见过最完善的微前端解决方案!: 

single-spa微前端: 

Single-Spa + Vue Cli 微前端落地指南 (项目隔离远程加载,自动引入) : 

转载地址:https://www.cnblogs.com/ztfjs/p/single-spa2.html 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:【前端开发】前端架构与具体的应用的矛盾,最终的简单才是王道。
下一篇:微前端大赏

发表评论

最新留言

哈哈,博客排版真的漂亮呢~
[***.90.31.176]2024年05月23日 18时50分59秒