扩展Paca界面前端插件微前端开发完全指南Module Federation实战【免费下载链接】pacaAI-native, free, open-source alternative to Jira, Trello, ClickUp Monday. Built for Scrum teams where humans and AI agents collaborate as equals — on the same board, the same sprints, the same goals. Self-hosted. Fully customizable via config and plugins.项目地址: https://gitcode.com/gh_mirrors/pac/pacaPaca 是一款开源、可自托管的 AI 原生项目管理工具Jira / Trello / ClickUp 的替代品它的前端插件体系基于Vite Module Federation构建主应用作为宿主Host插件作为独立构建的微前端远程模块Remote Entry被按需懒加载注入。本文带你从零理解 Paca 前端插件的架构到用 Module Federation 实战开发第一个界面插件。 Paca 前端插件是什么可以把 Paca 的前端想象成一家商场宿主应用apps/web是商场本体提供看板、任务详情、项目设置等页面并预留了一批铺位——也就是扩展点Extension Point插件是入驻的店铺各自独立打包成一份remoteEntry.js存放在插件 CDN 或本地静态目录中只有当用户真正走到某个铺位前宿主才会懒加载对应插件的代码未使用的插件一行代码都不会下载。这种宿主 远程模块的微前端模式让插件可以独立开发、独立构建、独立升级且不会污染宿主应用。插件还能通过 Paca 插件市场 一键安装分发⚙️ 架构解析Module Federation 如何串联插件整个加载链路非常清晰全部代码都在 apps/web/src/lib/plugins/ 目录下环节实现文件作用① 拉取插件列表registry.tsx启动时调用GET /api/v1/plugins构建扩展点注册表② 声明渲染位extension-point.tsxExtensionPoint按序渲染注册在该点上的所有插件组件③ 动态加载远程模块loader.tsx用 Module Federation 的init/get导出加载remoteEntry.js④ 共享单例loader.tsx将宿主的 React、React Query 注入共享作用域避免插件加载第二份 React⑤ 故障隔离loader.tsx每个插件单独包裹 Suspense ErrorBoundary坏插件不拖垮宿主其中第 ④ 步是 Module Federation 的微前端灵魂宿主在加载容器前先把react、react-dom、tanstack/react-query注册进共享作用域share scope插件组件运行时使用的就是宿主同一份单例杜绝两个 React 实例这类经典事故。 五个可用的界面扩展点插件可以开铺的位置由清单Manifest声明目前开放的界面扩展点如下详见 docs/plugins/frontend-plugin-system.md扩展点 ID落位适用场景sidebar.general.section全局侧边栏添加一级导航分组sidebar.project.section项目侧边栏项目内的自定义导航分组task.detail.section任务详情面板描述区下方的功能面板project.settings.tab项目设置页新增设置标签页view主内容区注册全新看板视图甘特图、日历等以任务详情面板为例宿主在 task-detail/index.tsx 中预留了插槽插件面板会自动出现在附件区上方 实战开发你的第一个界面插件第 1 步编写插件清单 plugin.json清单描述插件身份、远程入口和扩展点注册完整版见 docs/plugins/developer-guide.md{ id: com.example.my-plugin, displayName: My Plugin, version: 0.1.0, frontend: { remoteEntryUrl: /plugins/com.example.my-plugin/assets/remoteEntry.js, extensionPoints: [ { point: task.detail.section, component: TaskDetailSection, label: My Feature, order: 50 } ] } }id采用反向域名格式且一旦发布就不可更改order决定面板的默认排序位置。第 2 步配置 Vite Module Federation插件前端是一个普通 Vite React 项目关键是把组件**暴露exposes出去、把依赖共享shared**给宿主// vite.config.ts import { federation } from module-federation/vite; export default defineConfig({ plugins: [ react(), federation({ name: com_example_my_plugin, filename: remoteEntry.js, exposes: { ./TaskDetailSection: ./src/TaskDetailSection.tsx }, shared: [react, react-dom, paca-ai/plugin-sdk-react], }), ], });exposes的导出名必须与清单里的component字段一一对应。第 3 步编写 React 组件插件组件通过paca-ai/plugin-sdk-react接收宿主注入的强类型上下文包含api限定在/api/v1/plugins/{pluginId}/下的 HTTP 客户端、uitoast、确认框、导航和meta插件元信息完整 API 见 docs/plugins/sdk-reference.md。你只需专注于业务 UI不需要也不能触碰宿主的 React Query 缓存或内部路由状态。第 4 步构建并安装Paca 提供了官方的一键脚本 scripts/install-local-plugin.sh它会依次完成构建前端dist/→ 拷贝产物到本地插件存储plugins/local/frontend/plugin-id/→ 调用管理 API 注册并启用插件scripts/install-local-plugin.sh /path/to/my-plugin --api-key your-api-key部署层也已就绪Caddy 会把/plugins/*路径映射为插件静态资源remoteEntry.js即可被浏览器直接访问。第 5 步验证与排错刷新页面打开任务详情你的面板应该已经出现。如果加载失败宿主只会显示一个内联错误提示 重试按钮其余页面功能完全不受影响。常见问题排查面板没出现 → 确认插件已启用、component名与exposes一致报错 missing get/init → 构建产物不是合法的 Module Federation 容器样式/状态错乱 → 检查react是否声明在shared中必须用宿主单例。️ 安全与稳定性模型CSP 白名单插件来源必须在服务器配置的Content-Security-Policy允许列表内仅支持 HTTPS最小上下文宿主只传递每个扩展点约定的上下文对象插件无法直接访问宿主 React 树故障隔离单个插件的加载失败或渲染异常被 ErrorBoundary 捕获不影响同页其他插件管理员控制超级管理员可全局隐藏或拖拽调整插件面板顺序PATCH /api/v1/admin/plugin-extension-settings。 延伸阅读前端插件体系架构docs/plugins/frontend-plugin-system.md插件系统全景与生命周期docs/plugins/overview.md从 0 到 1 开发完整插件含后端 WASMdocs/plugins/developer-guide.md市场目录与安装流程docs/plugins/marketplace.md宿主端插件加载源码apps/web/src/lib/plugins/掌握 Module Federation 的这套宿主 远程模块玩法你就能把任何团队定制功能做成可插拔的 Paca 界面插件独立迭代、独立发布。动手写第一个插件吧【免费下载链接】pacaAI-native, free, open-source alternative to Jira, Trello, ClickUp Monday. Built for Scrum teams where humans and AI agents collaborate as equals — on the same board, the same sprints, the same goals. Self-hosted. Fully customizable via config and plugins.项目地址: https://gitcode.com/gh_mirrors/pac/paca创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考