简介及架构

基于 tvt.js 生态的动态组件发布与加载服务 Dynamic Component Service for tvt.js

👇🏻 演示预览地址：dcser.icegl.cnopen in new window

📦 项目开源地址： 👉 https://gitee.com/ice-gl/dynamic-component-serviceopen in new window

# ✨ 项目简介

dynamic-component-service（loadDynamicComponent） 是 tvt.js 生态下的一套动态组件发布、加载与调试解决方案。

它的核心目标是： 让 自研或第三方组件 可以 脱离 tvt.js 开源基座独立维护， 同时又能被 tvt.js 在线编辑器动态加载，获得完整编辑能力，并支持源码导出与二次开发。

# 🎯 设计目的

# 1️⃣ 解耦商业组件与 tvt.js 基座

• 一些开发者的组件属于 商业项目
• 不希望直接提交到 tvt.js 开源仓库
• 希望组件 独立发布、独立部署
• 但在生产项目中，仍然可以通过 tvt.js 基座动态加载并使用

👉 dynamic-component-service 提供了一种 解耦但可集成 的方案。

# 2️⃣ 动态组件 + 在线编辑 + 源码导出

• 将 自研或第三方代码 简单封装成「动态组件」

• 挂载到 tvt.js 在线三维场景编辑器

• 自动获得：

  • 组件参数可视化配置
  • 与现有 高级组件 / 模型库 / 场景系统 联动

• 支持：

  • 在线调试与预览
  • 导出组件配置
  • 直接导出插件源码包
  • 在 tvt.js 基座中进行 二次开发

# 🧱 技术栈说明

# 关于 vite-plugin-federation

本项目通过 @originjs/vite-plugin-federation 实现动态组件的 发布 / 远程加载 / 模块共享。

• 官方文档： 👉 https://www.npmjs.com/package/@originjs/vite-plugin-federationopen in new window

• 本项目中：

  • 已完成 federation 默认配置
  • tvt.js 开源基座中也已配置好对应加载逻辑
  • 只需简单配置，即可完成 组件互通