微前端大赏二-singlespa实践

微前端大赏二-singlespa实践

• 微前端大赏二-singlespa实践
  • 序
    • 介绍singleSpa
    • singleSpa核心逻辑
  • 搭建环境
    • vue main
    • react child
    • 生命周期
  • 结论
  • 参考文章

序

介绍singleSpa

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

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

这个库可以让你的应用可以使用多个不同的技术栈（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
例如：

<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

最终得到这样一个工程

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

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'
}

修改 /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(
      <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