开发者中心
  • 简体中文
  • English

独立组件开发

# 独立组件开发

# 1. 方案概述

# 1.1 背景

在可视化搭建平台中，内置组件库能够覆盖大部分通用场景，但在实际项目中，开发者往往需要根据具体业务需求定制专属组件，例如特殊的图表展示、行业定制的设备面板、或与第三方系统集成的交互模块。这些个性化需求无法通过通用组件完全满足，因此需要开发者自行开发组件来扩展平台能力。

原自定义组件开发高度依赖完整项目代码，本方案通过创建轻量级的 @ganwei/plugin-runtime 依赖包，开发者无需获取完整项目代码，实现组件的独立开发和运行。

# 1.2 核心优势

优势 说明
代码安全 外部开发者无需获取完整项目代码
独立运行 组件可脱离主项目独立开发、调试和预览
接口兼容 与主项目 shared-lib 接口保持一致，零成本接入
模拟数据 内置数据源和 SignalR 模拟，支持完整交互调试
一键迁移 提供迁移脚本，自动处理导入路径替换

# 1.3 架构对比

# 原架构（高度耦合）

开发者 ──► 需要完整项目代码 ──► 在主项目中开发 ──► 无法独立运行

# 新架构（独立运行）

开发者 ──► 独立开发调试 ──► 构建产物 ──► 接入主项目

# 2. 环境要求

工具 版本要求
Node.js >=18.x
Yarn 1.22.x
Angular CLI >=14.2.6

# 验证环境

node -v    # 应输出 v18.x.x
yarn -v    # 应输出 1.22.x

# 全局安装 Angular CLI

npm install -g @angular/cli@14.2.11
ng version

# 3. 项目概览

本仓库包含一个独立组件示例项目：

包名 说明
plugin-my-component 独立组件项目示例，基于 Angular 14 + Module Federation，只需安装依赖后运行开发

# 4. 安装依赖

# 4.1 安装 plugin-my-component（组件项目）

cd plugin-my-component
yarn

# 5. 运行方式

# 5.1 启动组件开发服务器

cd plugin-my-component
yarn dev
  • 该命令会启动 Angular 开发服务器，默认端口 4200
  • 浏览器会自动打开 http://localhost:4200
  • 支持热更新（HMR），修改代码后浏览器自动刷新

# 5.2 开发模式说明

开发模式下，AppComponent 作为本地开发模拟组件，通过传入 mock 数据来测试组件业务组件：

  • app.component.ts - 根组件，提供模拟的 pen 和 canvas 数据
  • plugin-my-component.component.ts - 实际组件业务组件，继承自 BaseComponent

这样可以在不依赖主平台的情况下独立开发和调试组件。

# 6. 目录结构

── plugin-my-component/                   # 独立组件项目（示例）
    ├── package.json                       # 项目依赖配置
    ├── angular.json                       # Angular 构建配置
    ├── tsconfig.json                      # TypeScript 基础配置
    ├── tsconfig.app.json                  # 应用 TypeScript 配置
    ├── webpack.config.dev.js              # Webpack 开发构建配置
    ├── webpack.config.prod.js             # Webpack 生产构建配置
    ├── moduleFederationPlugin.js          # Module Federation 组件配置
    └── src/
        ├── main.ts                        # 应用入口
        ├── bootstrap.ts                   # Module Federation 引导入口
        ├── public-api.ts                  # 公共 API 导出
        ├── index.html                     # HTML 模板
        ├── polyfills.ts                   # Polyfills
        ├── styles.scss                    # 全局样式
        ├── favicon.ico                    # 网站图标
        ├── environments/
        │   ├── environment.ts             # 开发环境配置
        │   ├── environment.prod.ts        # 生产环境配置
        │   └── .gitkeep                   # Git 占位文件
        ├── assets/
        │   ├── option.json                # 组件选项配置
        │   └── image/                     # 静态图片资源
        │       └── .gitkeep               # Git 占位文件
        └── app/
            ├── app.module.ts              # 根模块
            ├── app.component.ts           # 根组件（本地开发模拟组件）
            ├── types.ts                   # 类型定义
            └── component/
                ├── plugin-my-component.component.ts    # 组件业务组件
                ├── plugin-my-component.component.html  # 组件模板
                ├── plugin-my-component.component.scss  # 组件样式
                └── .gitkeep               # Git 占位文件

# 6.1 核心文件说明

文件 说明
app.component.ts 本地开发模拟组件，提供 mock 数据用于独立测试插件
plugin-my-component.component.ts 实际插件业务组件，继承BaseComponent，实现插件核心逻辑
plugin-my-component.component.html 插件业务组件模板，使用 ng-zorro-antd 组件构建 UI 界面
option.json 插件配置文件，定义插件的扩展属性（extendKeys）、控制面板配置（controlPanel）、默认尺寸、样式等

# 7. 打包构建

# 7.1 组件项目打包

cd plugin-my-component
yarn build
  • 构建产物输出到：dist/plugins/plugin-my-component/1.0.0/
  • 将生成的plugin-my-component包放到IoTCenter\IoTCenterWeb\publish\wwwroot\plugins目录下

# 8. 常见问题

# Q: 端口 4200 被占用

A: 修改 package.json 中的 dev 脚本，添加 --port 参数指定其他端口：

"dev": "ng serve --port 4300 --open"

或者修改 angular.json 中 serve.options.port 配置。

注意：端口配置在两个地方：

  1. package.json 的 scripts.dev 字段
  2. angular.json 的 projects.plugin-my-component.architect.serve.options.port 字段

建议保持两处配置一致。

← 常用功能介绍→

目录