🔧 React/Vue 组件跨环境开发工具链

ƉEV-TO

让第三方开发者在智能体容器中享受「本地级」的开发体验

npm create dev-to
快速开始 GitHub

痛点 × 解决方案

每个痛点对应一组 dev-to 能力，问题与方案一目了然

痛点
🔒

宿主环境黑盒

组件必须部署到容器才能调试，开发者看不到宿主内部细节，开发调试极其困难

解决方案
🔍

完全透明

组件内部断点、日志、源码映射完整可用，调试体验与本地无异

痛点
🐢

调试反馈慢

每次修改都要重新构建、部署，无法享受热更新（HMR），开发效率低下

解决方案 核心能力
⚡

跨环境 HMR

在本地 Vite 开发，容器中的组件实时热更新，秒级反馈，极致的开发体验

解决方案
📦

完整工具链

内置调试面板、UMD 构建、快速脚手架，开箱即用的完整解决方案

痛点
🐛

生产环境难调试

线上问题无法像本地一样打断点、查看日志，排查问题如同大海捞针

解决方案
🔧

生产级调试

支持在生产环境容器中临时加载本地开发版组件，像本地一样打断点调试

痛点
💥

运行时冲突

资源路径 404、容器与组件的 React 实例冲突，导致 Hook 报错等问题

解决方案
🔗

标准化协议

统一的组件加载规范，容器和组件完全解耦，支持多团队跨组织协作

解决方案
🖼️

资源自动处理

CSS、图片、字体等资源自动重定向到 Vite Dev Server，告别 404

快速开始

30 秒创建跨环境 HMR 组件，在任意容器中实时热更新

1

使用脚手架创建项目

# 一键创建项目，全自动配置
npm create dev-to

# 启动开发服务器，访问 http://localhost:5173
cd my-project && npm run dev

# 构建 UMD 包（lib 模式）
npm run build:lib

脚手架会自动安装依赖、配置 Vite 插件、生成 HelloWorld 组件，开箱即用

2

手动配置 可选

// vite.config.ts - 适合在已有项目中集成
import { devToReactPlugin } from '@dev-to/react-plugin'

export default defineConfig({
  plugins: [
    react(),
    devToReactPlugin({
      MyCard: 'src/components/MyCard.tsx',
    }),
  ],
})

如果你有现有项目，可以手动安装 @dev-to/react-plugin 并配置组件映射

3

宿主容器对接 容器侧

// 宿主应用代码，由容器团队维护
import { ReactLoader } from '@dev-to/react-loader'

<ReactLoader
  origin="http://localhost:5173"
  name="MyCard"
/>

组件开发者无需关心此步骤，这是容器/宿主团队的集成工作

查看完整文档

与其他方案对比

了解 dev-to 与主流微前端/模块联邦方案的差异

方案概览

方案 核心定位 成熟度
Module Federation 构建时模块联邦（Webpack/Vite 原生） 生产就绪
qiankun 运行时应用隔离（微前端） 生产就绪
micro-app 类 WebComponent 微前端 生产就绪
single-spa 微前端路由编排 生产就绪
dev-to 跨环境组件热更新 早期阶段

功能对比

功能 Module Federation qiankun micro-app single-spa dev-to
运行时模块共享 原生支持 需配置 需配置 需配置 原生支持
跨应用 HMR 部分支持 不支持 不支持 不支持 核心特性
JS 沙箱 无 Proxy iframe/Proxy 无 无
CSS 隔离 无 Shadow DOM Shadow DOM 无 CSS Modules
路由管理 无 支持 支持 核心特性 无
多框架支持 是 是 是 是 React + Vue
TypeScript 类型共享 需插件 无 无 无 原生支持

开发体验对比

Module Federation
首次配置 30-60 min
跨应用 HMR 需刷新宿主
调试工具 无内置
qiankun
首次配置 15-30 min
跨应用 HMR 需完全刷新
调试工具 无内置
dev-to 最佳 DX
首次配置 ~5 min
跨应用 HMR 实时热更新
调试工具 内置面板

如何选择

如何选择 是 是 是 否 否 否
需要开发时跨环境 HMR？
dev-to （目前唯一原生支持）
需要 JS/CSS 沙箱隔离？
qiankun / micro-app
需要模块级共享？
Module Federation
根据具体场景评估

dev-to 的独特价值：目前唯一专注于「宿主容器内实时 HMR」的方案。如果你的核心痛点是「第三方开发者在本地开发，宿主环境实时预览」，dev-to 是最直接的选择。但如果需要沙箱隔离、路由管理等企业级能力，应考虑 qiankun 或 Module Federation。

使用场景

适用于多种需要动态加载第三方组件的场景

🤖

AI Agent 智能体平台

集团构建统一的智能体平台，各业务线或第三方提供智能体卡片（客服助手、数据看板、工单处理等）

🏢

企业微前端平台

在主应用中动态加载子应用的 React 组件，各团队独立维护，互不干扰

🧩

低代码平台插件

平台提供基础能力，开发者提供自定义组件扩展，快速集成第三方功能

💻

Electron 桌面应用

在 Electron 主窗口中加载独立开发的插件组件，构建可扩展的桌面应用

架构设计

容器与组件提供方的协作模式

🏗️ AI Agent 智能体容器
集团/平台侧
@dev-to/react-loader 动态加载远程组件
HTTP/S
HTTP/S
HTTP/S
📦 业务线 A
localhost:5173
@dev-to/react-plugin
客服卡片、订单卡片
📦 业务线 B
localhost:5174
@dev-to/react-plugin
报表卡片、审批卡片
🔌 第三方开发者
localhost:5175
@dev-to/react-plugin
天气插件、日历插件
开发模式 容器加载 localhost 上的组件 → 实时 HMR
生产模式 容器加载 CDN 上的 UMD 包 → 稳定运行
生产调试 临时切换到 localhost → 像本地一样调试

核心包

完整的工具链，覆盖组件开发全流程

create-dev-to CLI

🚀 脚手架工具 - 快速创建集成 dev-to 的前端项目
@dev-to/react-plugin Vite

⚡ Vite 插件 - 在 Vite Dev Server 上暴露稳定的桥接入口
@dev-to/react-loader React

🔌 宿主侧加载器 - 在任意页面中动态加载远程 React 组件
@dev-to/shared Core

📡 共享协议 - Vite 侧与宿主侧的通信协议和类型定义

常见问题

关于开发、部署和常见问题的解答

宿主应用和 Vite Dev Server 通常运行在不同端口，属于跨域请求。必须在 Vite 配置中启用 server.cors: true。

生产环境有两种方式：

  1. 使用 dev-to build（等价于 vite build --mode lib）产出的 UMD 包，通过 CDN 或静态服务器分发
  2. 部署 Vite Dev Server 到生产环境（不推荐，仅适合内部工具）

已支持 React 与 Vue（开发态 HMR）。架构设计是框架无关的，其他框架可逐步扩展。

推荐使用 CSS Modules，插件会自动生成稳定的 scoped class name，避免样式冲突。

检查以下几点：

  1. Vite 配置中是否启用了 server.cors
  2. 宿主应用是否正确导入了 init.js（ReactLoader 会自动处理）
  3. 浏览器控制台是否有错误信息
  4. 访问调试面板查看详细状态

如果需要将构建产物部署到 CDN（如 OSS、CDN 等），推荐以下三种方案：

方案 1：使用 experimental.renderBuiltUrl（推荐）

这种方式只影响构建产物中的静态资源路径，不影响开发环境：

export default defineConfig(({ command, mode }) => {
  const isLibBuild = command === 'build' && mode === 'lib';
  return {
    base: '/', // 保持默认
    experimental: {
      renderBuiltUrl(filename, { hostType }) {
        if (isLibBuild && hostType === 'js') {
          return `https://cdn.example.com/your-app/${filename}`;
        }
        return { relative: true };
      }
    },
    plugins: [react(), devToReactPlugin('MyComponent')],
  };
});

方案 2：使用 build.rollupOptions

通过 Rollup 配置自定义资源路径：

devToReactPlugin('MyComponent', {
  build: {
    rollupOptions: {
      output: {
        assetFileNames: (assetInfo) => {
          if (isLibBuild && assetInfo?.name?.endsWith('.css')) {
            return 'MyComponent.css';
          }
          return cdnBase + 'assets/[name]-[hash][extname]';
        }
      }
    }
  }
})

方案 3：条件设置 base

通过条件判断，只在库构建时设置 CDN base：

const base = command === 'build' && mode === 'lib'
  ? 'https://cdn.example.com/your-app/'
  : '/';

所有 /__dev_to__/ 桥接路径不受 base 配置影响。插件内部已处理路径规范化，无论设置什么 base 值，桥接路径在开发和生产环境都保持稳定。