百度360必应搜狗淘宝本站头条
tomcat 乱码无法与服务器建立安全连接是什么意思sysv-rc-confdocker映射容器目录到宿主机internet explorer 增强的安全配置已启用
当前位置：网站首页 > 技术文章 > 正文

微前端架构实战中-single-spa 篇

nanshan 2024-12-02 23:31 6 浏览 0 评论

第3章 微前端框架 single-spa

https://zh-hans.single-spa.js.org/

single-spa：https://single-spa.js.org/ 是一个实现微前端架构的框架。

在 single-spa 框架中有三种类型的微前端应用：

  1. single-spa-application / parcel：微前端架构中的微应用，可以使用 vue、react、angular 等框架。
  2. single-spa root config：创建微前端容器应用。
  3. utility modules：公共模块应用，非渲染组件，用于跨应用共享 javascript 逻辑的微应用。

3-1 创建容器应用

安装 single-spa 脚手架工具：npm install create-single-spa@2.0.3 -g

创建微前端容器应用：create-single-spa

  1. 应用文件夹填写 container
  2. 应用选择 single-spa root config
  3. 组织名称填写 study组织名称可以理解为团队名称，微前端架构允许多团队共同开发应用，组织名称可以标识应用由哪个团队开发。应用名称的命名规则为 @组织名称/应用名称，比如 @study/todos

4. 启动应用：cd ./singletest && npm start

5. 访问应用：localhost:9000



3-2 容器默认代码解析

src/xx-root-config.js

// 从框架中引入 两个 方法，下面调用
import { registerApplication, start } from "single-spa";

/*
    注册微前端应用
        1. name: 字符串类型, 微前端应用名称 "@组织名称/应用名称"
    2. app: 函数类型, 返回 Promise, 通过 systemjs 引用打包好的微前端应用模块代码 (umd)
        3. activeWhen: 路由匹配时激活应用
*/
registerApplication({
  name: "@single-spa/welcome",
  app: () =>
    System.import(
      "https://unpkg.com/single-spa-welcome/dist/single-spa-welcome.js"
    ),
  activeWhen: ["/"],
});
// 当前组织的微应用引入示例
// registerApplication({
//   name: "@xl/navbar",
//   app: () => System.import("@xl/navbar"),
//   activeWhen: ["/"]
// });


// start 方法必须在 single spa 的配置文件中调用
// 在调用 start 之前, 应用会被加载, 但不会初始化, 挂载或卸载.
start({
  // 是否可以通过 history.pushState() 和 history.replaceState() 更改触发 single-spa 路由
  // true 不允许 false 允许 （先了解，有印象）
  urlRerouteOnly: true,
});

index.ejs

<body>
  <main></main>
  <!-- 导入微前端容器应用 -->
  <script>
    System.import('@xl/root-config');
  </script>
  <!-- 
    import-map-overrides 可以覆盖导入映射
    当前项目中用于配合 single-spa Inspector 调试工具使用.
    可以手动覆盖项目中的 JavaScript 模块加载地址, 用于调试.
-->
  <import-map-overrides-full show-when-local-storage="devtools" dev-libs></import-map-overrides-full>
</body>
  <!-- 用于支持 Angular 应用 -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/zone.js@0.11.3/dist/zone.min.js"></script> -->
  <!-- 用于覆盖通过 import-map 设置的 JavaScript 模块下载地址 -->
  <script src="https://cdn.jsdelivr.net/npm/import-map-overrides@2.2.0/dist/import-map-overrides.js"></script>

  <!-- 判断是否是本地 -->
  <% if (isLocal) { %>
  <!-- 模块加载器 -->
  <script src="https://cdn.jsdelivr.net/npm/systemjs@6.8.3/dist/system.js"></script>
  <!-- systemjs 用来解析 AMD 模块的插件 -->
  <script src="https://cdn.jsdelivr.net/npm/systemjs@6.8.3/dist/extras/amd.js"></script>
  <% } else { %>
  <script src="https://cdn.jsdelivr.net/npm/systemjs@6.8.3/dist/system.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/systemjs@6.8.3/dist/extras/amd.min.js"></script>
  <% } %>
  <script type="systemjs-importmap">
    {
      "imports": {
        "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js"
      }
    }
  </script>
  <!-- single-spa 预加载 -->
  <link rel="preload" href="https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js" as="script">

  <!-- Add your organization's prod import map URL to this script's src  -->
  <!-- <script type="systemjs-importmap" src="/importmap.json"></script> -->
<!-- JavaScript 模块下载地址 此处可放置微前端项目中的公共模块 -->
  <% if (isLocal) { %>
  <script type="systemjs-importmap">
    {
      "imports": {
        "@xl/root-config": "//localhost:9000/xl-root-config.js"
      }
    }
  </script>
  <% } %>

3-3 创建基于 React 的微应用

3-3-1 创建 React 微应用

创建应用：create-single-spa ，注意组织及项目名字，后面注册微应用是会用到

  1. 应用目录输入 todos
  2. 框架选择 react

修改应用端口 && 启动应用

{
  "scripts": {
     "start": "webpack serve --port 9002",
  }
}

启动应用： npm start

3-3-2 注册应用

将 React 项目的入口文件注册到基座应用 (容器应用) 中

\container\src\study-root-config.js ：

// React -- todos 
registerApplication({
  name: "@study/todos",
  app: () => System.import("@study/todos"),
  activeWhen: ["/todos"]
});

指定微前端应用模块的引用地址：

（可以直接访问对应应用服务器，有提示 URL 加载地址）

<% if (isLocal) { %>
  <script type="systemjs-importmap">
    {
      "imports": {
        "@study/root-config": "//localhost:9000/study-root-config.js",
        "@study/todos": "//localhost:9002/study-todos.js"
      }
    }
  </script>
  <% } %>

指定公共库的访问地址，默认情况下，应用中的 react 和 react-dom 没有被 webpack 打包， single-spa 认为它是公共库，不应该单独打包。

<script type="systemjs-importmap">
    {
      "imports": {
        "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js",
        "react": "https://cdn.jsdelivr.net/npm/react@17.0.1/umd/react.production.min.js",
        "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@17.0.1/umd/react-dom.production.min.js"
      }
    }
  </script>

修改默认应用代码，已独立页面展示应用内容

container\src\study-root-config.js

// registerApplication({
//   name: "@single-spa/welcome",
//   app: () =>
//     System.import(
//       "https://unpkg.com/single-spa-welcome/dist/single-spa-welcome.js"
//     ),
//   activeWhen: ["/"],
// });

// 修改默认应用注册方式，独立页面展示应用内容
registerApplication(
  "@single-spa/welcome",
  () => System.import(
    "https://unpkg.com/single-spa-welcome/dist/single-spa-welcome.js"
  ),
  location=>location.pathname === '/'
);

3-3-3 指定应用渲染位置

micro\container\src\index.ejs

<body>
  <main></main>

  <h2>
    <!-- 指定应用展示位置 -->
    <div id="myreact"></div>
  </h2>

  <script>
    System.import('@study/root-config');
  </script>
  <import-map-overrides-full show-when-local-storage="devtools" dev-libs></import-map-overrides-full>
</body>

micro\todos\src\study-todos.js

const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  // 渲染根组件
  rootComponent: Root,
  // 错误边界函数
  errorBoundary(err, info, props) {
    // Customize the root error boundary for your microfrontend here.
    return null;
  },
  // 指定根组件的渲染位置
  domElementGetter:()=>document.getElementById('myreact')
});

3-3-4 React 应用代码解析

micro\todos\src\study-todos.js

import React from "react";
import ReactDOM from "react-dom";
// single-spa-react 用于创建使用 React 框架实现的微前端应用
import singleSpaReact from "single-spa-react";
// 用于渲染在页面中的根组件 就相当于传统React应用的App.js文件
import Root from "./root.component";


const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  // 渲染根组件
  rootComponent: Root,
  // 错误边界函数
  errorBoundary(err, info, props) {
    // Customize the root error boundary for your microfrontend here.
    // return null;
    return ()=> <div>发生错误时此处内容将会被渲染</div>
  },
  // 指定根组件的渲染位置
  domElementGetter:()=>document.getElementById('myreact')
});

// 暴露必要的生命周期函数
export const { bootstrap, mount, unmount } = lifecycles;

3-3-5 React 微前端路由配置

准备好两个路由组件

micro\todos\src\home.js && micro\todos\src\about.js

import React, { Component } from 'react'

export default class home extends Component {
    render() {
        return (
            <div>
                <h2>什么是快乐星球</h2>
            </div>
        )
    }
}

=========我是两个组件之间的秀丽华美分割线=============

import React from 'react'

function about() {
    return (
        <div>
            <h2>快乐星球就是学习微前端</h2>
        </div>
    )
}

export default about

micro\todos\src\root.component.js

import React from "react";
// 引入路由相关组件
import {BrowserRouter, Switch, Route, Redirect, Link} from "react-router-dom"
// 引入组件
import Home from './home'
import About from './about'


export default function Root(props) {
  // return <section>{props.name} is mounted! && 拉勾大前端</section>;
  return (
    // 使用路由组件，设计基础路由路径
    <BrowserRouter basename="/todos">
      <div>{props.name}</div>
      {/* 设置点击链接，跳转路由 */}
      <div>
        <Link to="/home">Home</Link> | 
        <Link to="/about">About</Link>
      </div>

      {/* 路由展示 */}
      <Switch>
        <Route path="/home">
          <Home />
        </Route>
        <Route path="/about">
          <About></About>
        </Route>
        <Route path="/">
          {/* 路由重定向 */}
          <Redirect to="/home"></Redirect>
        </Route>
      </Switch>
    </BrowserRouter>
  )
}

路由文件已公共模块引入，\micro\container\src\index.ejs

<script type="systemjs-importmap">
    {
      "imports": {
        "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js",
        "react": "https://cdn.jsdelivr.net/npm/react@17.0.1/umd/react.production.min.js",
        "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@17.0.1/umd/react-dom.production.min.js",
        "react-router-dom": "https://cdn.jsdelivr.net/npm/react-router-dom@5.2.0/umd/react-router-dom.min.js"
      }
    }
</script>

修改 webpack 配置文件，排除路由模块打包，micro\todos\webpack.config.js

return merge(defaultConfig, {
    // modify the webpack config however you'd like to by adding to this object
    externals: ["react-router-dom"]
});

3-4 创建基于 Vue 的微应用

3-4-1 创建应用

创建应用：create-single-spa

  1. 项目文件夹填写 realworld
  2. 框架选择 Vue
  3. 生成 Vue 2 项目

因为 vue && vue-router 需要通过公共模块打包，所以，在应用内部需要配置不打包

micro\realworld\vue.config.js

module.exports = {
    chainWebpack:config=>{
        // 配置不打包 Vue 及 vue-router
        config.externals(["vue","vue-router"])
    }
}

修改项目启动命令：micro\realworld\package.json

"scripts": {
    "serve": "vue-cli-service serve",
    "start": "vue-cli-service serve --port 9003",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "serve:standalone": "vue-cli-service serve --mode standalone"
  },

注册应用：micro\container\src\study-root-config.js

// Vue -- todos
registerApplication({
  name: "@study/realworld",
  app: () => System.import("@study/realworld"),
  activeWhen: ["/realworld"],
});

micro\container\src\index.ejs

加载 vue && vue-router

  <script type="systemjs-importmap">
    {
      "imports": {
        "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js",
        "react": "https://cdn.jsdelivr.net/npm/react@17.0.1/umd/react.production.min.js",
        "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@17.0.1/umd/react-dom.production.min.js",
        "react-router-dom": "https://cdn.jsdelivr.net/npm/react-router-dom@5.2.0/umd/react-router-dom.min.js",
        "vue": "https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js",
        "vue-router": "https://cdn.jsdelivr.net/npm/vue-router@3.0.7/dist/vue-router.min.js"
      }
    }
  </script>

导入应用，应用地址可以直接访问应用后，在浏览器的提示中获取；

<% if (isLocal) { %>
  <script type="systemjs-importmap">
    {
      "imports": {
        "@study/root-config": "//localhost:9000/study-root-config.js",
        "@study/todos": "//localhost:9002/study-todos.js",
        "@study/realworld": "//localhost:9003/js/app.js"
      }
    }
  </script>
  <% } %>

3-4-2 应用路由配置

\micro\realworld\src\main.js

import Vue from 'vue';
import singleSpaVue from 'single-spa-vue';
import App from './App.vue';

import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 路由组件
const Foo = { template: "<div>Foooooo</div>" }
const Bar = { template: "<div>Barrrrr</div>" }

// 路由规则
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar },
]

// 路由实例
const router = new VueRouter({ routes, mode: "history", base: "/realworld" })


Vue.config.productionTip = false;

const vueLifecycles = singleSpaVue({
  Vue,
  appOptions: {
    // 注册路由
    router,
    render(h) {
      return h(App, {
        props: {
          // 组件传参
        },
      });
    },
  },
});

export const bootstrap = vueLifecycles.bootstrap;
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;

micro\realworld\src\App.vue

<template>
  <div id="app">
    <div>
      <router-link to="/foo">Goto Foo</router-link> |
      <router-link to="/bar">Goto Bar</router-link>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

3-5 创建 utility modules

3-5-1 utility 独立应用创建

用于放置跨应用共享的 JavaScript 逻辑，它也是独立的应用，需要单独构建单独启动。

  1. 创建应用：create-single-spa文件夹填写 tools应用选择 in-browser utility module (styleguide, api cache, etc)
  2. 修改端口，启动应用, \micro\tools\package.json"scripts": {
    "start": "webpack serve --port 9005",
    }

导出公共方法 ： micro\tools\src\study-tools.js

export function happyStar(who){
    console.log(`${who} hahahhahahhah`)
    return 'happy star 之 快乐的源泉'
}

在模板文件中声明应用模块访问地址 : micro\container\src\index.ejs

 <% if (isLocal) { %>
  <script type="systemjs-importmap">
    {
      "imports": {
        "@study/root-config": "//localhost:9000/study-root-config.js",
        "@study/todos": "//localhost:9002/study-todos.js",
        "@study/realworld": "//localhost:9003/js/app.js",
        "@study/tools": "//localhost:9005/study-tools.js"
      }
    }
  </script>
  <% } %>

3-5-2 在 React 应用中使用该方法

MicroFrontends\micro\todos\src\about.js

import React, { useEffect, useState } from "react";

// 自定义钩子函数
function useToolsModule() {
  const [toolsModule, setToolsModule] = useState();
  useEffect(() => {
    // 导入，异步promise返回
    System.import("@study/tools").then(setToolsModule);
  }, []);
  return toolsModule;
}

function about() {
  var back = "";
  // 调用钩子函数
  const toolsModule = useToolsModule();
  if (toolsModule) {
    // 调用共享逻辑的方法
    back = toolsModule.happyStar("React todo");
  }

  return (
    <div>
      <h2>快乐星球就是学习微前端--{back}</h2>
    </div>
  );
}

export default about;

3-5-3 在 Vue 应用中使用该方法

micro\realworld\src\main.js


// 路由组件
// const Foo = { template: "<div>猜不到吧</div>" };
import Foo from './components/Foo'
const Bar = { template: "<div>还是快乐星球啊哈哈哈哈</div>" };

micro\realworld\src\components\Foo.vue

<template>
  <div>
    <h2>什么是快乐星球 {{ msg }}</h2>
    <button @click="getHappy">点我获取答案</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "",
    };
  },
  methods: {
    async getHappy() {
      let toolsModule = await window.System.import("@study/tools");
      this.msg = toolsModule.happyStar("Vue");
    },
  },
};
</script>

<style>
</style>



相关推荐

今晚拿下PHP反序列化的一系列操作

引言在CTF中反序列化类型的题目还是比较常见的，之前有学习过简单的反序列化，以及简单pop链的构造。这次学习内容为php内置的原生类的反序列化以及一点进阶知识。在题目给的的代码中找不到可利用的类时，这...

Win10安装Apache和PHP（apache安装php模块）

说明：虽然PHPStudy之类的软件给我们提供了方便的集成环境，但是其使用的是非线程安全的PHP版本（NotThreadSafe，NTS），某些功能不可以使用。所以，我们还需要自己再安装一个Apa...

腾讯云云函数部署laravel项目（腾讯云函数 selenium）

1、购买函数套餐包在Serverless控制台，选择函数套餐包进行购买2、新建函数服务2.1、模板创建选择函数URL：新建函数URL，启用公网访问：2.1.1、postman访问首页2.1.2、pos...

站长教你搭建属于自己的网站（站长教你搭建属于自己的网站是什么）

每个人都希望可以有自己的网站，因为那样高端大气上档次，低调奢华有内涵，尤其是公司用户，一般会有自己的网站。而个人呢，也可以搭建自己的网站博客，论坛等，但是一般个人都是搭建博客的。好了，那么下面站长教你...

微信公众号开发出现 cURL error 60: SSL certificate problem ssl证书

在phpstudy的环境下如果出现这样的报错cURLerror60:SSLcertificateproblem:unabletogetlocalissuercertificat...

【网络安全】关于PHP Study nginx解析高危漏洞的预警通报

网络安全近日，山石网科安全研究院监测发现PHPStudyWindows最新版本存在nginx解析漏洞，可以造成任意代码执行。一、漏洞情况phpStudy是一个PHP调试环境的程序集成包，该程序包集成...

PHP 环境 搭建教程（php环境搭建教程linux）

PHP是一种编程语言，很多网站都用PHP语言编写，我们有时候需要测试一个网站，就需要PHP环境才能运行，又要安装Apache、又要安装MySQL……真的非常麻烦。其实我们可以使用PHP集成...

黑客搭建钓鱼平台，手把手教你如何钓鱼?

跨站脚本攻击XSS：通过HTML注入篡改了网页，插入了恶意的脚本，从而用户浏览网页时，控制用户浏览器的一种攻击那么，我们搭建一个XSS钓鱼平台吧，注意：这个平台仅用于学习和测试，小伙伴们不要动有坏心思...

php源码网站搭建方法和过程（php网站源码完整）

web网站是我们上网的窗口，而网站是如何搭建的呢？今天我们来做一个介绍，以php代码为例来进行介绍（后续会介绍一下java代码搭建，如果想要我这里涉及的工具或源码请私信我）。1、首先你需要去网上下载你...

使用VS Code调试PhpStudy环境里的代码

最近几个月把所有项目都迁过来VSCode了（除了因为Unity调试问题反而用回了VisualStudio），PHP也就抛弃了最强的PhpStorm。这段时间抽空在帮朋友处理PHP项目，然...

phpstudy搭建PHP+Mysql服务（用phpstudy搭建服务器）

PHP是一种创建动态交互性站点的强有力的服务器端脚本语言。PHP是免费的，并且使用非常广泛。同时，对于像微软ASP这样的竞争者来说，PHP无疑是另一种高效率的选项。（1）PHP环境搭建使用V...

Windows安装phpstudy（Windows安装mysql）

说明：phpstudy是一个PHP+MySQL+Apache的集成环境，可以减少单独部署各个所需软件的麻烦，以及更加方便地切换版本。phpenv、wamp等软件的作用一样。由于环境的不同，安装过程中可...

phpstudy安装及简单使用教程（phpstudy安装教程详解）

phpstudy前不久爆出有后门，我的看法是，去看下是哪个版本有后门，为啥会有后门，怎么解决掉这个后门，而不是听到后门就弃用了。毕竟phpstudy绿色安装，配置简单，多版本融合，真香。前言：关于开发...

如何对dedeCMS的开源程序进行二次开发

二次开发，简单的说就是在现有的软件上进行定制修改，功能的扩展，然后达到自己想要的功能和效果，一般来说都不会改变原有系统的内核。为了让更多人了解二次开发，并更方便的了解DedeCMS的二次开发，下面将会...

mysql基础问题三问(底层逻辑;正在执行;日志观察)

背景：经常面试会遇到且实际工作中也会应用到的三个场景：目录：一.mysql查询时的底层原理是什么？二.如何查看正在执行的mysql语句？三.如何观察mysql运行过程中的日志信息？-----...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表