single-spa：https://zh-hans.single-spa.js.org/ 是一个实现微前端架构的框架。
在 single-spa 框架中有三种类型的微前端应用：
single-spa-application / parcel：微前端架构中的微应用，可以使用 vue、react、angular 等框架。
single-spa root config：创建微前端容器应用。
utility modules：公共模块应用，非渲染组件，用于跨应用共享 javascript 逻辑的微应用。
3-1 创建容器应用
安装 single-spa 脚手架工具：npm install create-single-spa@2.0.3 -g
创建微前端容器应用：create-single-spa
应用文件夹填写 container
应用选择 single-spa root config
组织名称填写 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 ，注意组织及项目名字，后面注册微应用是会用到
应用目录输入 todos
框架选择 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 <p>{props.name} is mounted! && 拉勾大前端</p>;
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
项目文件夹填写 realworld
框架选择 Vue
生成 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 逻辑，它也是独立的应用，需要单独构建单独启动。
创建应用：
create-single-spa文件夹填写 tools
应用选择
in-browser utility module (styleguide, api cache, etc)
修改端口，启动应用, \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>
1028
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
