2023年7月24日发(作者：)

flowable流程设计器_基于bpmnjs的流程设计器校验实现bpmnlint简介它根据⼀组已定义的规则来验证您的图表，并将其报告为错误或警告。它可以从命令⾏检查您的BPMN图，或者通过bpmn-js-bpmnlint将其集成到我们的BPMN建模器中：核⼼规则库的核⼼是⽤于检测BPMN图中某些模式的规则。每个规则都是由⼀段代码定义的，该代码可以检测并报告从丢失标签到检测到特定的易于出错的建模模式这⼀事实。为了让您更好地了解规则可能是什么，这是到今天为⽌内置在库中的规则列表：规则名称conditional-flowsend-event-requiredfake-joinlabel-requiredno-complex-gatewayno-disconnectedno-gateway-join-forkno-implicit-splitno-inclusive-gatewaysingle-blank-start-eventsingle-event-definitionstart-event-required描述报告缺少条件的外向流。报告缺少的结束事件。报告实际上为空的隐式连接。报告缺少的标签。报告复杂的⽹关。报告未连接的元素。报告同时分叉和加⼊的⽹关。报告隐式拆分。报告包含的⽹关。报告范围中的多个空⽩开始事件。报告具有多个定义的事件。报告缺少的开始事件。从零到bpmnlint让我们对bpmnlint的配置和可扩展性有更好的了解。⾸先，签出并运⾏bpmnlint-playground，这是⼀个专门设计⽤于模型验证项⽬的项⽬。git clone git@:bpmn-io/ bpmnlint-playgroundnpm installnpm start执⾏时，npm start将打开带有浏览器应⽤程序的浏览器窗⼝，该应⽤程序已⽀持了lint⽀持。配置可⽤规则⼀个.bpmnlintrc摆在当前⼯作⽬录定义⽂件，它的规则来适⽤，以及是否将其当作错误或警告。操场上拿着⼀个.bpmnlintrc看起来像这样的东西：{ "extends": [ "bpmnlint:recommended", "plugin:playground/recommended" ], "rules": { "playground/no-manual-task": "warn" }}该extends块告诉bpmnlint从两个预定义的规则集继承配置：bpmnlint:recommended和playground/recommended，后者由游乐场插件提供。该rules块会覆盖特定规则的报告。该⽰例将设置playground/no-manual-task为警告(⽽不是错误)。我们可以选择任何规则，例如内置规则，也可以完全将其关闭：{ ... "rules": { ... "bpmnlint/label-required": "off" }}在运动场应⽤程序中，我们可以看到短绒棉不再报告没有标签的开始事件。创建⾃定义规则⾃定义现有规则的报告⾮常有⽤，但是并不能满⾜每个⽤例。有时，⽤户或组织希望识别与他们的特定建模样式相关的领域特定模式。bpmnlint通过允许您贡献⾃定义规则和规则集来解决此问题。例如，如果我们要制定⼀个规则来强制每个流节点的标签中包含表情符号，该怎么办？让我们跳⼊“游乐场” plugin⽂件夹并emoji-label-required在rules/⽂件中创建规则：const { isAny} = require('bpmnlint-utils');const emojiRegex = require('emoji-regex');/** * Detect and report missing emojis in element names. */s = function() { function check(node, reporter) { if (isAny(node, [ 'bpmn:FlowNode', 'bpmn:SequenceFlow', 'bpmn:Participant', 'bpmn:Lane' ])) { const name = ( || '').trim(); if (!emojiRegex().test(name)) { (, 'Element must have an emoji'); } } } return { check };};该规则公开了check(node, reporter)仅在BPMN标签缺少表情符号时才报告的功能。该表情符正则表达式实⽤程序将执⾏我们的检查。我们必须将其作为依赖项安装在插件⽬录中，以使规则运⾏：cd pluginnpm install emoji-regex然后，我们需要调整配置以使⽤该emoji-label-required规则。由于这不是⼀个内置规则，因此我们为其添加前缀(在本例中为playground)：{ "rules": { ... "playground/emoji-label-required": "error" }}回到操场上的应⽤程序，短⽑猫现在将报告没有表情符号的标签错误：验证标签中表情符号的存在。这就完成了我们对bpmnlint可扩展性的快速了解。查看包含表情符号标签的“游乐场” 分⽀，该分⽀包含此博客⽂章中描述的实现。要了解有关规则打包和测试的更多信息，请查看⽰例插件。以上是bpmn官⽅教程第⼀种⽅案1.下载依赖在中加⼊如下依赖"bpmnlint": "^6.4.0","bpmn-js-bpmnlint": "^0.15.0","bpmnlint-loader": "^0.1.4","file-drops": "^0.4.0",2.新建规则⽂件在项⽬中新建.bpmnlintrc⽂件，并使⽤该extends块从通⽤配置继承：{ "extends": "bpmnlint:recommended"}使⽤rules块添加或⾃定义规则：{ "extends": "bpmnlint:recommended", "rules": { "label-required": "off" }}3.在中配置加载程序s = { // ... module: { rules: [ { test: /.bpmnlintrc$/, use: [ { loader: 'bpmnlint-loader', } ] } ] }};这将确保您的构建可以使⽤bpmnlint配置⽂件。4.将linter集成到bpmn-js中import lintModule from 'bpmn-js-bpmnlint';import BpmnModeler from 'bpmn-js/lib/Modeler';import bpmnlintConfig from './.bpmnlintrc';var modeler = new BpmnModeler({ linting: { bpmnlint: bpmnlintConfig }, additionalModules: [ lintModule ]});如果在项⽬运⾏报错提⽰.bpmnlintrc⽆法识别，可以使⽤第⼆种解决办法第⼆种⽅案在第⼀种⽅案的基础上添加如下依赖：npm i -g bpmnlint bpmnlint-pack-config然后在命令⾏中执⾏:bpmnlint-pack-config -c .bpmnlintrc -o -t es⽣成⽂件之后就是同样的⽅式，将规则⽂件引⼊bpmn-js中import * as bpmnlintConfig from './packed-config';var modeler = new BpmnModeler({ linting: { bpmnlint: bpmnlintConfig }, additionalModules: [ lintModule ]});转化成⽂件的好处就是可以⾃⼰写逻辑⽐如我将规则翻译成了中⽂；⽐如我加⼊了：如果画布中拖⼊了⽤户任务，⽤户任务就必须有左右连接线，不能单独存在画布中。可控制是否校验import fileDrop from 'file-drops';var modeler = new BpmnModeler({ linting: { bpmnlint: bpmnlintConfig, active: Param('linting') }, additionalModules: [ lintModule ],});('', function(event) { const active = ; Param('linting', active);});const dndHandler = fileDrop('Drop BPMN Diagram here.', function(files) { XML(files[0].contents);});elector('body').addEventListener('dragover', dndHandler);// 流程校验使⽤setUrlParam = (name, value) => { var url = new URL(); if (value) { (name, 1); } else { (name); } eState({}, null, );}// 流程校验使⽤getUrlParam = (name) => { var url = new URL(); return (name);}