如何设置BPMN.io开发环境？

如何解决如何设置BPMN.io开发环境？

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

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

请联系[e-mail]，如果您能以有偿工作的身份为我做这件事。

解决方法

此示例通过自定义模块扩展了 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 来捆绑基于此配置的文件：

rollup -c

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

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

  // ...
</script>

构建此示例：

npm install
npm run all

许可证： 麻省理工学院