【bpmn-js-3.0.3】1、如何在web应用中使用bpmn-js

如何通过源码编译后，在web应用中通过<link/><script/>标签引入使用：

1、下载bpmn-js的源码

https://bpmn.io/toolkit/bpmn-js/download/

目录结构如下：

2、安装依赖

在bpmn-js-3.0.3目录下，npm install，在当前目录下生成node_modules依赖包目录

3、编译：
打开package.json文件，查看scripts中的属性distro，执行指令：
node tasks/build-distro.js

执行完成后会在当前目录下生成dist目录，其文件如下：

在rollup.config.js中定义需要生成的文件：

4、web中引入

<link rel="stylesheet" type="text/css" href="bpmn-js-3.0.3/dist/assets/bpmn-font/css/bpmn.css"/>
<link rel="stylesheet" type="text/css" href="bpmn-js-3.0.3/dist/assets/diagram-js.css"/>

<script src="bpmn-js-3.0.3/dist/bpmn-modeler.production.min.js"></script>

在自定义的js中实例化bpmn如下：

var viewer = new BpmnJS({container: '#js-canvas'});

viewer.importXML(xml, function(err) {
     //导入流程图的xml后的结果回调
});

//通过实例获取api进行操作
//设置流程图上颜色
viewer.get('modeling').setColor(elements, {fill: 'red'});

//获取流程图的根元素
viewer.get('canvas').getRootElement();