如何搭建BPMN.io开发环境？答案

【问题标题】：How to setup BPMN.io development environment?如何搭建BPMN.io开发环境？
【发布时间】：2023-07-22 01:53:02
【问题描述】：

我想使用 BPMN.io 库来创建 BPMN 建模元素的修改。

如何设置包含bpmn-js、bpmn-moddle 和diagram-js 文件夹的开发环境，以便我可以修改任何源文件？

请联系gwagner57@googlemail.com，如果您可以作为有偿工作为我做这件事。

【问题讨论】：

标签： bpmn.io

【解决方案1】：

此示例通过自定义模块扩展了 bpmn-js 查看器，并展示了如何使用 Rollup 生成该自定义查看器的 UMD 包。

创建 Viewer 或 Modeler 的子类，具体取决于您要扩展的变体：

import inherits from 'inherits';

import Viewer from 'bpmn-js/lib/Viewer';

import ZoomScrollModule from 'diagram-js/lib/navigation/zoomscroll';
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';

import CustomLoggingModule from './features/logging';


/**
 * A viewer that includes mouse navigation and other goodies.
 *
 * @param {Object} options
 */
function CustomViewer(options) {
  Viewer.call(this, options);
}

inherits(CustomViewer, Viewer);

module.exports = CustomViewer;

向您的自定义 bpmn-js 原型添加其他模块：

CustomViewer.prototype._customModules = [
  ZoomScrollModule,
  MoveCanvasModule,
  CustomLoggingModule
];

CustomViewer.prototype._modules = [].concat(
  Viewer.prototype._modules,
  CustomViewer.prototype._customModules
);

使用模块捆绑器（如 Rollup、Browserify 或 Webpack）将文件打包为浏览器的 UMD。

我们正在使用汇总来基于此配置捆绑文件：

rollup -c

在您的网页中包含捆绑包，就像您将包含我们的预包分发一样：

<script src="dist/custom-viewer.bundled.js"></script>
<script>
  var viewer = new CustomBpmnJS({
    container: '#canvas'
  });

  // ...
</script>

构建这个例子：

npm install
npm run all

许可证：麻省理工学院

【讨论】：