- 前端
- 数据可视化
- 数字孪生
【免费下载链接】meta2d.js
The meta2d.js is real-time data exchange and interactive web 2D engine. Developers are able to build Web SCADA, IoT, Digital twins and so on. Meta2d.js是一个实时数据响应和交互的2d引擎，可用于Web组态，物联网，数字孪生等场景。
导读
本文聚焦于 meta2d.js 仓库中 packages/meta2d.js/README.md 所描述的“meta2d 的统一打包（bundle）模块”。这个包是 Meta2d.js 2D 引擎对外发布的入口级产物：它将@meta2d/core核心引擎与类图、时序图、活动图、流程图、图表、表单、故障树、图表库等全部扩展包聚合为一份meta2d.js，并借助registerCommonDiagram实现“一次调用、全量注册”。读完本文，你将掌握该包的构建流程（yarn→yarn build）、Webpack 打包配置的产物形态、源码入口的聚合与全局注册机制，并理解它与各子包、ES5 示例之间的调用关系，从而知道如何在自己的 Web SCADA、物联网、数字孪生项目中一键引入全套绘图能力。
一、包定位：为什么需要“统一打包”
Meta2d.js 是一个实时数据响应与交互的 Web 2D 引擎，官方描述其典型应用场景为 Web 组态（SCADA）、物联网与数字孪生（见仓库根目录 README.md）。整个仓库采用 pnpm workspace 的 monorepo 结构（见 pnpm-workspace.yaml），核心引擎与各专业图元库被拆分成了多个独立包：
@meta2d/core：引擎本体，负责画布、事件、图元渲染、数据与 store 等；@meta2d/class-diagram：类图（simpleClass、interfaceClass）；@meta2d/sequence-diagram：时序图（sequenceFocus、lifeline）；@meta2d/activity-diagram：活动图（forkV/forkH、swimlaneH/swimlaneV、activityFinal）；@meta2d/flow-diagram：流程图（数据、文档、数据库、队列、并行等十余种图元）；@meta2d/chart-diagram：ECharts / Highcharts / LightningChart 图表集成；@meta2d/form-diagram：表单类图元（radio、switch、slider、checkbox、table、time）；@meta2d/fta-diagram：故障树分析（与门、或门、事件等）；@meta2d/le5le-charts：自研轻量图表（折线、柱状、饼图、仪表、热力图）。
packages/meta2d.js正是这些包的“总装车间”。其 package.json 以workspace:*形式声明了上述全部依赖，main字段指向构建产物meta2d.js。对最终用户而言，安装这一份包，就等于拿到了引擎加全套专业图元，无需逐个集成各子包。
二、构建流程：yarn与yarn build
原文档给出的构建步骤非常简洁，只有两条命令：
$ yarn $ yarn build结合 package.json 的scripts可以还原其完整语义：
yarn：安装 monorepo 的全部依赖（根目录 package.json 与 workspace 各子包一起解析，锁文件见 pnpm-lock.yaml）；yarn build：实际执行webpack && npm run copy。其中：webpack调用 webpack.config.js，把src/index.ts编译打包；npm run copy执行shx cp package.build.json ../../dist/meta2d.js/package.json，把发布用的package.build.json复制到产物目录，确保dist/meta2d.js/下是一个可直接npm publish的完整包目录。
也就是说，一次yarn build的最终产物是../../dist/meta2d.js/目录（相对包目录），内含meta2d.js与package.json，这正是 examples/es5/index.html 中通过<script src="../../dist/meta2d.js/meta2d.js"></script>直接引用的文件。
构建依赖方面，devDependencies使用了webpack+webpack-cli+ts-loader+typescript（^5.6.3），配合copyfiles/path/shx完成产物复制，整体是一条标准的 TypeScript → Webpack → UMD 产物流水线。
三、Webpack 打包配置解析
webpack.config.js 是整个打包环节的核心，配置要点如下：
- mode: 'production'：生产模式构建，产物会经过压缩与优化，适合直接用于线上
<script>引入； - entry: './src/index.ts'：入口为 src/index.ts，即本包的聚合源文件；
- output：
filename: 'meta2d.js'：输出单一文件；path: path.resolve(__dirname, '../../dist/meta2d.js')：落到仓库根目录的dist/meta2d.js/；library: 'meta2djs'：UMD 库的全局命名空间名为meta2djs；libraryTarget: 'umd'：产物同时兼容 CommonJS、AMD 与浏览器全局变量三种使用方式；
- resolve.extensions: ['.ts', '.js']：支持直接解析 TS 源码；
- module.rules：对
/\.ts$/使用ts-loader编译，排除node_modules。
这一配置决定了该包既可以import Meta2d from 'meta2d.js'（模块化引入），也可以在 HTML 中挂一个<script>后通过全局对象meta2djs使用，兼顾了现代工程化项目与零构建页面的需求。
四、源码入口：一次 import，全量能力聚合
真正体现“统一打包”价值的是入口文件 src/index.ts。它做的第一件事，是把引擎与各专业包全部导入：
import { Meta2d } from '@meta2d/core'; import { classPens } from '@meta2d/class-diagram'; import { sequencePens, sequencePensbyCtx } from '@meta2d/sequence-diagram'; import { activityDiagram, activityDiagramByCtx } from '@meta2d/activity-diagram'; import { flowPens, flowAnchors } from '@meta2d/flow-diagram'; import { register as registerEcharts, registerHighcharts, registerLightningChart } from '@meta2d/chart-diagram'; import { formPens } from '@meta2d/form-diagram'; import { ftaPens, ftaPensbyCtx, ftaAnchors } from '@meta2d/fta-diagram'; import { chartsPens } from '@meta2d/le5le-charts';随后它做了两件关键的事：
export * from "@meta2d/core"：把核心引擎的全部公开 API 原样透出，使用者从meta2d.js一个入口即可拿到Meta2d类、Pen、Rect、Options、事件与 store 等全部核心能力（core 的导出面参见 packages/core/index.ts）。- 设置全局变量并定义全量注册函数：
globalThis.Meta2d = Meta2d; globalThis.registerCommonDiagram = function () { const meta2d = globalThis.meta2d; if (meta2d) { registerEcharts(); registerHighcharts(); registerLightningChart(); meta2d.register(flowPens()); meta2d.registerAnchors(flowAnchors()); meta2d.register(activityDiagram()); meta2d.registerCanvasDraw(activityDiagramByCtx()); meta2d.register(classPens()); meta2d.register(sequencePens()); meta2d.registerCanvasDraw(sequencePensbyCtx()); meta2d.registerCanvasDraw(formPens()); meta2d.registerCanvasDraw(chartsPens()); meta2d.register(ftaPens()); meta2d.registerCanvasDraw(ftaPensbyCtx()); meta2d.registerAnchors(ftaAnchors()); } };globalThis.Meta2d使引擎在浏览器全局可用——这正是 examples/es5/index.js 中new Meta2d('meta2d')得以工作的原因；globalThis.registerCommonDiagram读取全局实例globalThis.meta2d，把各子包导出的图元（pen）、锚点（anchor）与画布绘制函数（canvasDraw）一次性全部注册到该实例上。所有图元在引擎中最终都汇入@meta2d/core的globalStore（path2dDraws、canvasDraws、anchors等，见 packages/core/src/store/global.ts），从而立即可用。
文件末尾还通过命名导出公开了全部子包入口，如classPens、sequencePens、flowPens、ftaPens、chartsPens、registerEcharts等，方便在模块化场景下按需取用。
为什么registerCommonDiagram采用“实例 + 注册”模式？
从 packages/core/src/store/global.ts 的实现可以看到，register将图元绘制函数写入globalStore.path2dDraws，registerCanvasDraw写入globalStore.canvasDraws，registerAnchors写入globalStore.anchors。而Meta2d构造器本身也会注册基础图元与通用锚点（见 packages/core/src/core.ts 中this.register(commonPens())、this.registerCanvasDraw({ cube })、this.registerAnchors(commonAnchors())）。因此registerCommonDiagram实际是在“引擎基础能力”之上叠加“专业图元全家桶”，两者互补而不冲突——这也是统一打包包在浏览器全局场景下推荐的打开方式。
五、图元全家桶：各子包注册了什么
registerCommonDiagram调用背后，是每个子包各自导出的注册工厂函数。梳理各包源码可得到完整的图元清单：
| 子包 | 注册方式 | 图元/锚点（源码依据） |
|---|---|---|
| @meta2d/flow-diagram | register+registerAnchors | flowComment、flowData、flowDb、flowDisplay、flowDocument、flowExternStorage、flowInternalStorage、flowManually、flowParallel、flowQueue、flowSubprocess，及 document/manually/parallel/comment/data 锚点（register.ts） |
| @meta2d/activity-diagram | register+registerCanvasDraw | forkV/forkH（复用 core 的 rectangle）、swimlaneH、swimlaneV；activityFinal 走 CanvasDraw（register.ts） |
| @meta2d/class-diagram | register | simpleClass、interfaceClass（register.ts） |
| @meta2d/sequence-diagram | register+registerCanvasDraw | sequenceFocus 走 Path2D；lifeline 走 CanvasDraw（register.ts） |
| @meta2d/form-diagram | registerCanvasDraw | radio、switch、slider、checkbox、table/table2（register.ts） |
| @meta2d/fta-diagram | register+registerCanvasDraw+registerAnchors | andGate、basicEvent、conditionalEvent、event、forbiddenGate、orGate、priorityAndGate、switchEvent、transferSymbol、unexpandedEvent、xorGate、votingGate 及各自锚点（register.ts） |
| @meta2d/le5le-charts | registerCanvasDraw | lineChart、histogram、pieChart、gauge、heatmap（register.ts） |
| @meta2d/chart-diagram | 内部register | echarts / highcharts / lightningCharts，可选传入第三方库实例并写入globalThis.echarts/Highcharts/lcjs（register.ts） |
从源码结构看，这套注册体系区分了两种绘制实现：返回Path2D的register适用于可复用路径的图形，registerCanvasDraw则适用于需要直接操作CanvasRenderingContext2D的复杂绘制（如 lifeline、votingGate、各类表单与自研图表）。这也解释了registerCommonDiagram中为何同一子包会同时调用多种注册方法。
六、验证运行：ES5 示例与 Vue3 示例
仓库提供了两个可直接对照的示例来验证该打包包的使用方式。
1. 浏览器全局方式（ES5 示例）
examples/es5/index.html 通过<script src="../../dist/meta2d.js/meta2d.js"></script>引入构建产物，随后 examples/es5/index.js 中直接new Meta2d('meta2d')创建引擎实例，并调用meta2d.open()、meta2d.data()、meta2d.drawLine('curve')、meta2d.showMap()/meta2d.hideMap()、meta2d.showMagnifier()/meta2d.hideMagnifier()等 API 实现新建、打开、保存、钢笔/铅笔绘制、缩略图与放大镜等完整编辑器功能。这是“构建 → 全局引入 → 实例化 → 注册图元 → 编辑操作”全链路最直观的演示。
2. 模块化方式（Vue3 示例）
examples/diagram-editor-vue3 提供了基于 Vue 3 + Vite + TDesign 的完整工程示例，工程入口见 src/main.ts，编辑器视图组件位于 src/views/Index.vue。在该工程中，使用者以包的形式（import ... from 'meta2d.js'）消费本包导出的Meta2d与各子包能力，配合 src/services/selections.ts 等封装实现选中管理。这一示例代表现代前端工程中推荐的使用路径：通过yarn build产出包，再以 ESM/CommonJS 方式引入。
说明：使用浏览器全局方式时，需先执行
yarn build生成dist/meta2d.js/meta2d.js；使用模块化方式时，则通过 workspace 依赖直接引用本包源码入口。
七、参与贡献与开源协议
原文档还给出了协作与授权信息，同样值得开发者了解：
- 贡献方式：如发现问题或有改进建议，可在仓库提交 issue 描述问题，或直接修改后提交 Pull Request（详见根目录 CONTRIBUTING.md）。
- 联系方式：alsmile123@qq.com。
- 开源协议：MIT © le5le.com，LICENSE 文件位于仓库根目录，各子包（如 packages/core/package.json 中的
license字段）均沿用 MIT 授权，允许自由使用、修改与再分发。
八、小结：从这份文档能带走什么
回顾 packages/meta2d.js/README.md，它虽只有构建、贡献、协议三节，但背后对应的是 Meta2d.js 完整的发布链路。本文将其扩展为四层认知：
- 构建层：
yarn→yarn build（即webpack && npm run copy），产物落在dist/meta2d.js/，UMD 全局名为meta2djs； - 聚合层：src/index.ts 一次性导入全部子包并
export * from "@meta2d/core"，同时挂载globalThis.Meta2d与globalThis.registerCommonDiagram； - 注册层：
registerCommonDiagram把各子包的 Path2D 图元、Canvas 绘制函数与锚点统一注册到全局meta2d实例，底层落点是globalStore（packages/core/src/store/global.ts）； - 验证层：ES5 全局引入与 Vue3 模块化两种示例，覆盖了从构建到实例化的完整用法。
对想要快速搭建 Web 组态 / 物联网 / 数字孪生应用、又不愿逐个集成图元包的开发者来说，meta2d.js统一打包包就是最直接的入口：构建一次，全量注册，开箱即用。
- 前端
- 数据可视化
- 数字孪生
【免费下载链接】meta2d.js
The meta2d.js is real-time data exchange and interactive web 2D engine. Developers are able to build Web SCADA, IoT, Digital twins and so on. Meta2d.js是一个实时数据响应和交互的2d引擎，可用于Web组态，物联网，数字孪生等场景。
相关推荐
使用 @cropper/elements 构建 Cropper.js 自定义元素体系：从安装、注册到源码级解析
使用 @cropper/elements 构建 Cropper.js 自定义元素体系：从安装、注册到源码级解析 @cropper/elements 是 Crop
前端UI组件图像处理SGLang Python 包代码结构全解析：从公共 API 到内核注册表
SGLang Python 包代码结构全解析：从公共 API 到内核注册表 python/sglang/ 是 SGLang 高性能推理框架的 Python 主包
模型推理服务推理引擎人工智能大模型本地部署多模态前端工程化全景指南：从转译、打包到构建的完整实战体系
前端工程化全景指南：从转译、打包到构建的完整实战体系 导读：本文以 Datawhale「easy vibe」课程中的前端工程化章节为骨架，系统梳理"为什么需要工
教程文档
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
