[开源记录] 快来围观 Mongchhi W9-W10(0227 - 0310) Umi UI 开发进度

背景

由于 Umi UI 搁置太久了，一直都没有维护，Umi@4 已经趋向稳定了，所以想把 Umi UI 再捡回来，和 加大 聊了聊，两人一拍即合，就开始了将 Umi UI 迁移到 Umi@4 的工作，相关PR# feat: 🧱 support umi4，但由于代码有点久，很多之前都是宜鑫大佬开发的，不是那么熟悉，搞起来非常的吃力。而且有些功能其实 Umi@4 里面都实现了。所以就有了重写 Umi UI 的想法。

刚好 Nuxt Devtool 也在这阶段推出，所以 Umi UI 最近也重新启动开发了。

开周会的时候，简单的说了说新 Umi UI 的需求，我感觉还是以展示数据为主，不过我自己更想要的其实是一个可以实时操作源码的 UI，甚至作为 umi dev 的守护进程之类的。所以就有了 Mongchhi [“mōng-chhī”]，翻译成中文就是 “蛮养” 的意思。随便做做。

前言

之前发过沸点，有些朋友可能没看到，这里再简单的介绍一下

Mongchhi [“mōng-chhī”] 是一个基于闽南语“罔市” [“ōng-chhī”] 谐音而来的，它一个 UmiJS 开发者工具 。其实这个名字是我养的一只可爱的小兔子，寓意着使用这个工具时能够轻松愉快地完成开发工作。

作为 UmiJS 开发者工具，Mongchhi 提供了各种功能和服务，能够帮助您更快速、更高效地完成项目开发，例如：

• 🌈 丰富的模板和组件库：Mongchhi 提供了丰富的模板和组件库，涵盖了各种场景下的开发需求，让开发者能够快速地创建各种项目和页面，大幅提升开发效率。
• 🎨 简单易用的代码生成器：Mongchhi 的代码生成器可以快速生成常用的代码片段和模板，开发者只需要几个简单的点击和填写，就能轻松生成代码，免去了手写代码的繁琐过程。
• 🚀 可视化的组件编辑器：Mongchhi 提供了可视化的组件编辑器，让开发者可以快速创建和编辑组件，无需手动编写代码，大大提高了开发效率。
• 🌟 实时预览和调试：Mongchhi 提供了实时预览和调试功能，让开发者可以在开发过程中快速验证和调试代码，减少错误和调试时间，提高开发效率和代码质量。
• 🧩 内嵌低代码平台：Mongchhi 还将会有一个内嵌的低代码平台，让开发者可以快速搭建各种应用，无需编写大量的代码，极大地降低了开发难度和学习成本。
• 📦 自定义插件支持：Mongchhi 提供了自定义插件支持，开发者可以轻松地扩展和定制工具的功能，满足各种个性化的开发需求。

总之，Mongchhi 是一个功能强大、易用性好、可扩展性强的 UmiJS 开发者工具，内嵌低代码平台可以让开发者更加高效地开发应用，自定义插件支持可以让开发者满足各种个性化的开发需求，相信会对各位开发者非常有吸引力。

本周进度

以下对这个项目的当前进度，做一个简要的介绍。

自动收集 umi 项目信息

在项目启动的时候，会自动将当前项目的 appData 收集起来，存到本地的缓存文件，用于后续的各种“全局管理”行为的数据。

加大画了个图 《appData自动获取流程（不含手动添加项目）》，不得不说大佬做事情就是好专业，和他交流的这半个月，学了好多东西。

Socket 连接

完成了和 umi socket 的连接，这里暂时使用“暴力”，hack 了 umi 的源代码将 WebSocket.Server 暴露到 global 中，这样如果是内嵌模式的 UI 就不用启动多个服务了。

自建 Mongchhi Service，这个实现也很简单，在我们之前的很多教程中，都提到了，基于 Umi Core 来搭建一个自己的框架。这里就不展开说了。

同样将 Mongchhi 的 WebSocket.Server 暴露到 global 中，然后通过插件统一处理 socket，感觉这里比较巧妙，省了很多事情。

api.onMongChhiSocket

在 umi 的基础上扩展了一个 MongChhi 专用的 api。这个在之前的 umi 插件开发中也有提到过。

其实很简单，只需要执行一行代码就行。api.registerMethod({ name: 'onMongChhiSocket' });

复杂的是如何实现这个 api，比如需要给它增加类型提示，它是做什么的？

由于后续肯定会有其他的 api，所以关于类型我统一在 types 仓库中维护了，这样编写插件的时候，就不需要依赖整个 umi 了。

扩展 Socket 响应的 node 端服务，拥有三个参数 type, payload, send，主要行为是根据 type 识别是否是自己需要响应的事件。

export interface SocketAction {
  type?: string;
  payload?: any;
  send?: any;
}

比如：

import { IApi } from '@mongchhi/types';

export default (api: IApi) => {
  api.onMongChhiSocket(async ({ type, send }) => {
    switch (type) {
      case 'app-data':
        // 发送 localUmiAppData
        send(
          JSON.stringify({
            type: 'app-data',
            payload: {},
          }),
        );
        break;
    }
  });
};

前端和前端通信

其实基于上面的实现，要实现前端和前端的通信非常的简单，只需要定一个特定服务就行，比如我增加了一个特殊的服务是 type:'call'。

case 'call':
  // 用于和客户端通信，比如从项目的客户端发给 ui 的客户端
  console.log('[MongChhi] call me!', payload?.type ?? '');
  g_ws.send(
      JSON.stringify({
          type: payload?.type ?? 'call',
          payload: payload,
      }),
  );
break;

是不是很简单，就是将前端发来的信息原样发回去就行。😂

Mongchhi ui 主工程

开发的时候就是简单的 umi 项目开发，有趣的是，mongchhi 展示 ui 的时候，使用的是构建后的产物，通过在 3000 端口上自建服务的方式运行。

值得一提的是，它使用了 antd@5 所以在动态主题方面表现的非常丝滑。

简单的项目管理页面

还记得最开始那一点吗，我们在项目启动的时候，收集了项目的 appData，就是为了做项目统一管理。主管理页面有点类似 SourceTree 的管理功能。

不过相比 SourceTree，我们能做的更多一点点，比如下面这一点

在编辑器中打开项目

这个页面的绘制编写是有我们公司的实习生完成的，所以参与开源真的是什么时候开始都合适啊。

以上就是这几周我们做的，值得聊一聊的功能。

其他

14天时间，3位 Contributors，66次提交，17个 Star🌟

值得吹牛的是，我提交了 3w 行代码，还是在下班时间完成的编写。

欢迎参与

这个仓库会不断的做一些开发相关的辅助功能，也会作为官方 Umi UI 的补充插件集，如果你对工程化，如何编写 Umi 插件这些内容感兴趣的话，这是一个非常好的练手项目。另外虽然现在 Umi 是以 React 但其实 Mongchhi 的 UI 理论上是可以支持任意的框架开发的产物的，比如 Vue 或者 Ng。

仓库地址 github.com/umijs/Mongc…