【第2618期】手把手教你定制一套适合团队的微前端体系
前言
来看看是不是手把手。今日前端早读课文章由阿里@谷童授权分享。
@谷童(valleykid)，现在在阿里平头哥团队做前端负责人/架构师。github:valleykid，欢迎关注。我们团队目前在芯片生态业务领域实践了两年多时间的微前端，攻克了这个方向的一些难题，沉淀了许多好玩且好用的特性。欢迎大家关注和试用~
正文从这开始~~
大家在使用目前市面上的微前端解决方案时，可能会有些顾虑。比如遇到框架自身的问题和坑点，影响了业务进度怎么办？现在有这么一款框架 Satum，可以像 express/koa 框架一样提供中间件机制，其只负责核心的功能(规则计算和微应用加载/卸载)。可以基于该框架定制一套适合团队自身业务的微前端体系，另外该框架还有更多特性，如面向多实例集成、适配多终端等。
satumjs：https://satumjs.github.io/website/
前面
随着前端工程复杂度逐渐增加，业务复杂的前端项目需要拆分成多个项目来维护。还有就是业务存在了 3-5 年，一些技术栈没及时升级，已经无法在其基础上做开发，需要搞个新项目一起集成。又或者是想通过新业务，对新技术/框架最新大版本试用。遇到上述场景(当然不限这些场景，还有更多场景待挖掘)，大家也许会把目光转向微前端方案。
市面上也有一些微前端框架的实现，但黑盒化太严重。遇到问题/坑点，只能等框架的作者修复了才能正常工作。但业务开发时真正遇到了问题，如果寄希望于框架作者/社区，会不会感到凉凉？
Satum 是一款面向多实例集成、功能可插拔的微前端框架，本篇我们基于它定制一套微前端体系出来。该内核框架旨在解决多实例模式的微前端场景(当然单实例也包含其中)。即多个微应用被同时激活时，该如何协调加/卸载、数据依赖、组件共享及渲染顺序的问题。且支持中间件&插件机制，可以很方便自定义沙箱、路由协调、缓存等。通过不同的中间件&插件组合，可以定制适合自己团队的微前端架构体系。
Satum 的优势(相较于社区常用的方案 qiankun和micro-app)：
✅：完全支持， ❌：不支持， ⭕️：弱支持
微前端体系
微前端体系包含微前端框架、配置中心、微应用开发配套工具及配套服务、物料市场、低代码平台等。
体系示例图如下：
带来的好处
微前端体系带来的好处不言而喻，简单说来，使用该体系可以将一个大型项目拆分成多个子项目，每个子项目各自独立，互不影响，又互相关联。
核心价值是什么呢？
技术栈无关
主框架不限制接入应用的技术栈，微应用具备完全自主权独立开发、独立部署
微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新增量升级
在面对各种复杂场景时，通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略独立运行时
每个微应用之间状态隔离，运行时状态不共享
所需的工程板块
从上述体系架构图可以很清楚地看到，我们需要以下工程板块：
微前端框架
建议利用 @satumjs/core 的定制化能力，打造适合团队的微前端框架。不太建议使用市面上黑盒化的微前端框架。这样做，可以利用其中间件/插件机制，定制个性化的微应用处理逻辑。
配置中心
所谓配置中心，其实是一个可视化的 json 编辑。如果有个线上的配置中心，可以灵活控制业务板块的热更新。有些业务需求，不需要修改和发布代码就能达到目的。
微应用开发配套工具及配套服务
配套工具和服务太重要了，因为我们开发的微应用不是完整的业务，有些功能模块甚至是从其他微应用共享而来。虽然微应用可以独立运行和部署，但开发过程中，还是需要及时看到集成后的效果。
物料市场
这块主要是基础组件和业务组件，可以是基于 ant-design 或其他 design 搞的组件家族。
低代码平台
微前端能够集成低代码平台生成的页面，我觉得也很必要。这样的好处是扬长避短，低代码平台一般不太建议搭建业务复杂的页面，所以单独存在的低代码平台意义有限；而纯代码打造的平台工期较长，需要的前端能力也较高；如果能够做到简单页面低代码实现，复杂逻辑纯代码实现，然后集成在一起，是最理想的方案。
使用后达到的目标
微应用合理分拆，独立运行和部署，降低整体复杂度；
技术库无关，可以根据业务需要尝试各种组件库和技术栈；
增量升级，新老系统可以集成在一起，新系统负责新业务功能；
多终端适配，satumjs 支持同一个 URL 不同终端唤起不同的微应用；
单一职责，让诸如 React/Vue 等只做视图方面的事情，业务逻辑在其他微应用上承载；
可自行定制沙箱、代码处理、路由协调等功能；
如何定制
初始化项目
新建文件夹，添加必要的依赖
新建文件夹 mf2e-test，通过命令 echo {} > package.json或 yarn init初始化 package.json。
我们使用 rollup 做构建工具，需要先安装构建相关的依赖。
yarn add rollup @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve rollup-plugin-dts rollup-plugin-terser @babel/cli @babel/core @babel/preset-env @babel/preset-typescript typescript rimraf --dev
之后再创建构建相关的配置文件 .babelrc、rollup.config.js、tsconfig.json
{
"presets": [
"@babel/typescript",
"@babel/preset-env"
]
}
import commonjs from '@rollup/plugin-commonjs';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import { babel } from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';
import dts from "rollup-plugin-dts";
import * as pkg from './package.json';
const extensions = ['.js', '.ts'];
const plugins = [
commonjs(),
nodeResolve({ extensions }),
babel({ extensions, include: ['./src/**/*'] }),
terser(),
];
const umdConfig = {
input: 'src/index.ts',
// 此处 name 是会在 window 上附加，需注意请自定义
output: { dir: 'lib', name: 'mf2eTest', format: 'umd' },
plugins,
};
const esConfig = {
input: 'src/index.ts',
external: Object.keys(pkg.dependencies),
output: { file: 'lib/index.es.js', format: 'es' },
plugins,
};
const dtsConfig = {
input: './src/index.ts',
output: { file: './lib/index.d.ts', format: 'es' },
plugins: [dts()]
}
export default [umdConfig, esConfig, dtsConfig];
{
"compilerOptions": {
"module": "es2015",
"target": "es5",
"lib": ["esnext", "dom"],
"baseUrl": "./src",
"esModuleInterop": true,
"noImplicitAny": true,
"strictNullChecks": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"noUnusedLocals": false,
"noUnusedParameters": true,
"suppressImplicitAnyIndexErrors": true,
"allowSyntheticDefaultImports": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": true,
"sourceMap": true,
"declaration": true,
"outDir": "./lib",
"allowJs": true,
"moduleResolution": "Node"
}
}
创建源码文件夹 src，添加入口文件 index.ts
创建文件夹 src，作为源码文件夹，并在其中添加入口文件 index.ts。做完这些事情，我们的文件夹看起来应该是这样：
mf2e-test
|- src
|- index.ts
|- .babelrc
|- package.json
|- rollup.config.js
|- tsconfig.json
这时候我们可以安装框架逻辑需要的依赖了，执行下面命令：
yarn add @satumjs/core @satumjs/simple-midwares @satumjs/midware-single-spa
我们可以测试下 es6 的源码是否能够正常构建出 es5 的代码，当然在此之前 package.json里要添加一些 scripts
"scripts": {
"build": "rimraf lib && rollup -c",
"build:w": "npm run build -- -w",
"pub": "npm run build && npm publish --access public"
},
之后请在 index.ts里添加如下代码，然后执行命令 yarn build可以看到能正常生成代码。
import { register, start } from '@satumjs/core';
export { register, start };
那么到此，恭喜你，初始化工作告一段落，我们提交一下代码。
添加必要的中间件
@satumjs/simple-midwares是一些中间件的集合，包含了常用的中间件如缓存、沙箱、css 隔离、获取挂载 dom、路由协调等。我们可以先使用其中的沙箱、获取挂载 dom 这两个中间件。然后我们还要使用 @satumjs/midware-single-spa中间件协助管理微应用的加载和卸载(你可以不使用该中间件，内置有实现简单的 single-spa 功能，不过强烈建议使用)。index.ts 修改代码如下：
import { register, start, use } from '@satumjs/core';
import {
simpleSandboxMidware,
mountNodeMidware,
} from '@satumjs/simple-midwares';
import singleSpaMidware from '@satumjs/midware-single-spa';
use(simpleSandboxMidware);
use(mountNodeMidware);
use(singleSpaMidware);
export { register, start };
做完这一步，其实我们可以执行一下 yarn link，搞个本地示例工程出来直接看该框架的实际运行情况了。本地示例工程请参考 https://stackblitz.com/edit/github-gacap7，换一下依赖 @satumjs/core为 mf2e-test即可。
添加微应用本地调试工具
所谓调试工具，其本质是获取到微应用的配置后，如果调试 whiteList 里包含该微应用，则使用 whiteList 里的 entry 地址，而这个地址可以指向本地启动的微应用。所以我们继续在 index.ts里添加逻辑，我以 whiteList 存储在 localStorage 里为例。
use((system, microApps, next) => {
system.set(MidwareName.proxyEntry, (entry: string | string[], appName: string) => {
const proxyMap = {};
const proxySetting = localStorage.getItem('proxyEntries') || '';
const proxyData = proxySetting.replace(/\s/g, '').split(',');
proxyData.forEach((item) => {
const [itemAppName, proxyUrl] = item.split('|');
if (itemAppName && proxyUrl) proxyMap[itemAppName] = proxyUrl;
});
const currentApp = microApps.find((item) => item.name === appName);
return currentApp && proxyMap[appName] ? proxyMap[appName] : entry;
});
next();
});
这样你往浏览器的 localStorage 里添加形如 micro-name|micro-entry-url规则，当框架加载微应用时就会使用本地启动的。多个可以以 ,隔开。
添加跨域服务，以方便远程非跨域微应用集成
好多时候，我们把微应用部署到开发、测试、预发等环境，可能是直接部署到了 cdn 上。这些环境并不支持跨域，进而影响集成。我们可以自己搞个跨域服务出来，做一下中转，然后方便微应用集成。框架层面上也要做下支持，其实本质是遇到微应用的 entry，为其加一层跨域中转请求。
use((system, _, next) => {
system.set(MidwareName.urlOption, {
corsRule: `https://cors-server-test.com/?target=${corsRuleLabel}`,
});
next();
});
代码编写到这个地方，恭喜你，微前端框架部分就完成了。不过作为框架，需要让用户可以传一些参数进来，控制一些中间件的行为。整体代码如下：
import {
register,
start as coreStart,
use,
MidwareName,
corsRuleLabel,
KeyObject,
} from '@satumjs/core';
import {
simpleSandboxMidware,
mountNodeMidware,
simpleCacheMidware,
} from '@satumjs/simple-midwares';
import singleSpaMidware from '@satumjs/midware-single-spa';
use((system, microApps, next) => {
system.set(
MidwareName.proxyEntry,
(entry: string | string[], appName: string) => {
const proxyMap = {};
const proxySetting = localStorage.getItem('proxyEntries') || '';
const proxyData = proxySetting.replace(/\s/g, '').split(',');
proxyData.forEach((item) => {
const [itemAppName, proxyUrl] = item.split('|');
if (itemAppName && proxyUrl) proxyMap[itemAppName] = proxyUrl;
});
const currentApp = microApps.find((item) => item.name === appName);
return currentApp && proxyMap[appName] ? proxyMap[appName] : entry;
}
);
next();
});
function start(options: KeyObject<any>) {
const { enableCache, corsServerUrl, ...opts } = options || {};
if (enableCache) use(simpleCacheMidware, opts);
use((system, _, next) => {
system.set(MidwareName.urlOption, {
corsRule: `${corsServerUrl}?target=${corsRuleLabel}`,
});
next();
});
use(simpleSandboxMidware, opts);
use(mountNodeMidware, opts);
use(singleSpaMidware, opts);
coreStart(opts);
}
export { register, start };
微前端框架示例仓库请访问 https://github.com/satumjs/mf2e-test
创建配置中心
最简单的是，发一个 json 文件到 cdn。当然可以使用 nodejs 搭建一个可视化编排 json 的配置中心出来，这样可以做到不用修改代码，即可上下线微应用。
物料市场
可以使用业界开源的 x-design 来做基础组件库，根据业务定制一些业务组件出来。这些组件可以在微应用里通过共享，分发到其他子应用。
低代码平台
需要自行实现该平台，然后基于 satumjs 强悍的集成能力，把分散的页面集成到一个网站下。
后续
本文通过代码的方式一步步定制出一套微前端框架(示例仓库 https://github.com/satumjs/mf2e-test)，然后又把该框架周边最常用的工具的实现展现了出来。还有一些工程板块，可以自行搭建，也可以使用公司或开源的。
如果大家对 Satum 感兴趣，欢迎访问其官网 https://satumjs.github.io/website 了解更多。如果对中间件和插件感兴趣，官网上也有一些资料。建议大家加微信群或钉钉群，方便后续交流。感谢大家耐心阅读这篇文章~
相关阅读，欢迎自荐投稿，前端早读课等你来。