微前端大赏二-singlespa实践

微前端大赏二-singlespa实践

 

介绍singleSpa

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

这里有一个演示: (https://single-spa.surge.sh/)

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

优点:

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

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

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

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

缺点:

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

 

singleSpa核心逻辑

几张图可以解决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实践

 

第二张图,我画出了更加具体的,singlespa在渲染过程中的核心逻辑
1、 首先我们有 main(主app) child(子app),主app只有一个,子app可以有多个
2、 其次,主app上一般我们可以在index.html里面,写多几个空间,也就是多几个div
例如:

 

<div id=”react-app”></div>
<div id=”vue-app”></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

 

最终得到这样一个工程

 

微前端大赏二-singlespa实践

 

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

 

react child

上面的代码可以看到,我们register了一个react应用 http://127.0.0.1:3000/asset-manifest.json 并且访问了它的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 status
git 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'
}

 

微前端大赏二-singlespa实践

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

 

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

 

微前端大赏二-singlespa实践

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(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    ,
    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 (
      <div>This renders when a catastrophic error occurs</div>
    );
  },
});
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-vitals
reportWebVitals();

 

7、运行
npm run start

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

 

生命周期

生命周期函数共有4个:bootstrap、mount、unmount、update。生命周期可以传入 返回Promise的函数也可以传入 返回Promise函数的数组。
引用一个大佬完整的说明, 非常的详细:
https://github.com/YataoZhang/my-single-spa/issues/4

 

结论

single spa可以给我们提供一整套方案,去搭建一套微前端集成框架,但它并不是一个开箱即用的封装,它有很多的坑等着我们去踩。
一般情况下,我们选择使用qiankun,它的封装程度更好,api更加友好一些。待积攒足够多的使用经验,可以考虑自研一套自己的微前端框架,增加整体的前端研发效率。
下节我将给大家带来qiankun对singlespa的封装,在具体应用中的实践。待完结框架篇后,我们可以再深入探究singlespa的实现原理以及各种概念。

 

参考文章

single-spa 文档: https://single-spa.js.org/docs/getting-started-overview/

微前端 single-spa: https://juejin.cn/post/6844903896884707342

这可能是你见过最完善的微前端解决方案!: https://www.infoq.cn/article/o6GxRD9iHQOplKICiDDU

single-spa微前端: http://www.soulapp.tech/2019/09/25/single-spa微前端/

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

上一篇:nw.js 命令行参数


下一篇:哪里找百度网盘资源➕薇