编者注：当您使用当前的微型前端 - 市场上的解决方案时，您可能会遇到一些问题。提供一个中间零件机制，例如Express/KOA框架，该机制仅负责核心功能（规则计算和Micro -application Loading/Unstall）。它可以自定义一组适合团队自己的微型前端系统基于此框架的业务。此外，该框架还具有更多的功能，例如多个终端的多样性集成和适应。
随着前端项目的复杂性逐渐增加，需要分为多个项目以维护的前端项目，并有3 - 5年的业务。某些技术堆栈尚未及时升级，并且不再有可能在其上发展。有必要将一个新项目集成在一起。或者您想通过新业务尝试最新版本的新技术/框架。当遇到上述场景时（当然，这些场景也不有限，还有更多场景要轻拍），每个人都可以将眼睛转向微型前端解决方案。
市场上也有一些微型前框架，但是黑匣子太严重了。当遇到问题/进度点时，作者只能等待框架正常工作。但是当业务开发确实是真的如果您希望成为框架作者/社区，遇到了您会感到很酷吗？
在本文中，我们基于自定义的微型前端系统。SATUM是插入和插入的多键入集成和函数的微型前端框架。它旨在解决Multi -Front场景的求解 -实例模式（当然，单一面向的情况也包括IT）。也就是说，当同时激活多个微型应用程序时，如何协调/卸载，数据依赖项，组件共享和渲染顺序，并支持该订单。中间件和插头机制，可以方便地自定义沙箱，路由协调，缓存等。通过不同的中间件和插头组合，您可以自定义适合您团队的微型前端架构系统。
Satum的优势（与常用的解决方案和程序相比）：）：
?：完全支持，支持：没有支持，??：弱支持
简单使用，无需调整代码，您可以在控制过程中集成输入或输出，而无需调整代码。Schedule和路由协调支持极弱规则限制了基于路由规则的安装点。相同的应用程序可以渲染到页面的不同方面。三方软件包和组件具有强大且较弱的块机制。您可以加载任何UI组装页面???支持VITE。沙箱环境中的无缝支持包括微型前端框架，配置中心，微型应用开发支持工具以及微型应用开发支持工具以及微型应用开发支持工具和微型应用程序支持工具和微型开发工具和微型应用开发的开发开发工具支持工具和微型开发支撑工具和微型应用开发支持工具和微型应用开发支持工具和微型应用程序支持工具。支持服务，材料市场，低编码平台等。SYSTEM示例示例图如下：如下：
微型前端系统的好处是自我言论。简而言之，该系统的使用可以将大型项目分为多个子项目。每个子项目都是独立的，不会互相影响，并且互操作。什么是核心价值？
const扩展= ['.js'，'.ts'];const插件= [commonjs（），noderesolve/src/*/']}），terer（），];
cont umdconfig = {input：'src/index.ts'，//此处将附加到窗口。请注意自定义输出：{dir：'lib'，名称：'mf2etest'，格式：'umd'}，插件，};
const esconfig = {input：'src/index.ts'，外部：object.keys（pkg.depentencies），output：{file：'lib/index.js'，格式：'es''}，plugins，}，}，};;;;;;;
const dtsconfig = {input：'https：//www.shouxicto.com/article/src/src/index.ts'，输出：{file：'https：//www.shouxicto.com/article/article/article/lib/lib/index.d。TS'，格式：'es'}，插件：[dts（）]}
导出默认[umdconfig，eSconfig，dtsconfig];
创建源代码文件夹SRC，添加入口文件索引。TS以创建一个文件夹SRC作为源代码文件夹，然后添加输入文件index.ts.t.t.ts.ts.ts.ts.ts.ts.ts.ts.ts.ts.ts.ts.ts.ts.ts。
目前，我们可以安装框架逻辑的依赖性，并执行以下命令：
我们可以测试ES6的源代码是否可以正常构建ES5的代码。当然，应该在此之前添加一些脚本
之后，请添加以下代码，然后执行命令以查看可以正常生成的代码。
然后，恭喜，初始化工作结束了，我们提交了代码。
必要的中间件是一些中间件的集合，其中包含常见的中间零件，例如高速缓存，沙盒，CSS隔离，获得安装DOM和路由协调。我们可以首先使用沙箱并获得安装DOM的两个中间件。还使用中间件来协助管理微型应用加载和卸载（您无法使用具有简单的单SPA功能的中间件，但强烈建议使用）.Index.ts修改代码如下：
完成此操作之后，实际上，我们可以执行它并获得一个本地示例项目以查看框架的实际操作。对于本地示例项目，请参阅https://stackblitz.com/edit/github-gacap7，只需更改它。
SO称为调试工具被添加到SO称为调试工具中。本质是，在获得微型申请的配置之后，如果在白名单中包含微型应用程序，则可以使用白名单中的条目地址，并且此地址可以指向本地倡议。因此，我们继续添加逻辑。它，我以白名单为例存储在LocalStorage中。
通过这种方式，您将规则添加到浏览器的LocalStorage中，并在通过Micro -Application加载框架时使用本地启动。可以分离多个。
添加跨域服务以促进多次远程非交叉 - 域微型申请集成。我们可以将微型应用部署到开发，测试，预开发和其他环境中，这些环境可以直接部署在CDN上。这些环境不支持Cross -domain，这会影响集成。我们可以自己获得跨境服务。，进行运输，然后促进微型应用集成。在框架的级别上，也有必要提供支持。实际上，本质是遇到微型应用条目，并为其添加交叉域运输请求。
代码写在这个地方，恭喜，Micro前端帧已完成。但是，作为一个框架，用户需要传递某些参数并控制某些中间件行为。总体代码如下：
请访问https://github.com/satumjs/mf2e-test for https://github.com
最简单的是，将JSON文件发送到CDN。当然，您可以使用Nodejs构建可视化布置JSON的配置中心。
您可以使用开源X -Design作为基本组件库来根据业务自定义某些业务组件。这些组件可以通过共享Micro -Application分配给其他子应用程序。
您需要自己实施平台，然后根据Satumjs强大的集成功能在网站下集成了分散的页面。
本文通过代码自定义一组微型前端框架（示例仓库https://github.com/satumjs/mf2e-test），然后显示框架周围最常用的工具的实现。如果您对Satum感兴趣，请访问您的官方网站https://satumjs.github.io/website了解更多信息，请访问您的官方网站，以了解更多信息，请访问您的官方网站，以了解更多信息。如果您对中间件感兴趣，请- ins，在官方网站上有一些信息。建议您添加微信或指甲以促进后续的交流。谢谢您耐心阅读本文?
原始：https：//juejin.cn/post/7099586151291289614