Camunda BPMN.js 安装和配置指南

Camunda BPMN.js 安装和配置指南

camunda-bpmn-js Embeddable Camunda modeling distributions based on bpmn-js 项目地址: https://gitcode.com/gh_mirrors/ca/camunda-bpmn-js

1. 项目基础介绍和主要编程语言

项目介绍

Camunda BPMN.js 是一个基于 bpmn-js 的可嵌入的 Camunda 建模分布项目。它旨在提供不同的 BPMN 建模分布，使用户无需基于 bpmn-js 创建自定义的 Modeler 实现，而是可以选择现有的包来镜像 Camunda 建模产品的建模体验。

主要编程语言

该项目主要使用 JavaScript 和 TypeScript 进行开发。

2. 项目使用的关键技术和框架

关键技术和框架

• bpmn-js: 用于在浏览器中查看和编辑 BPMN 2.0 图表。
• diagram-js: 用于图表渲染和编辑的工具包。
• bpmn-js-properties-panel: 用于技术属性编辑的面板。
• bpmn-js-element-templates: 用于 bpmn-js 的特定领域编辑。
• bpmn-js-create-append-anything: 用于 bpmn-js 的创建/追加任何内容的扩展。
• bpmn-moddle: 用于 Camunda 7 和 Camunda 8 的 BPMN 2.0 图表读取/写入器。
• camunda-bpmn-js-behaviors: 用于 bpmn-js 的 Camunda 特定行为。

3. 项目安装和配置的准备工作和详细安装步骤

准备工作

在开始安装之前，请确保您的开发环境中已经安装了以下工具：

• Node.js: 版本 12 或更高。
• npm: 通常随 Node.js 一起安装。

安装步骤

1. 克隆项目仓库

首先，您需要从 GitHub 上克隆 Camunda BPMN.js 项目到本地。

git clone https://github.com/camunda/camunda-bpmn-js.git

2. 进入项目目录

克隆完成后，进入项目目录。

cd camunda-bpmn-js

3. 安装依赖

使用 npm 安装项目所需的所有依赖。

npm install

4. 构建和运行项目

根据您的使用场景，您可以选择以下命令之一来构建和运行项目：

• 构建库并运行所有测试：

npm run all

• 启动单个本地 Camunda 平台建模器实例：

npm run start:platform

• 运行完整的开发设置：

npm run dev

配置

项目配置文件主要包括 package.json、rollup.config.mjs 和 tsconfig.json。您可以根据需要修改这些文件来调整项目的配置。

使用示例

在您的 Web 应用程序中使用 Camunda BPMN.js 的示例代码如下：

<link rel="stylesheet" href="https://unpkg.com/camunda-bpmn-js@0.1.0/dist/assets/camunda-platform-modeler.css" />
<script src="https://unpkg.com/camunda-bpmn-js@0.1.0/dist/camunda-platform-modeler.development.js"></script>

或者通过 npm 安装并导入：

import BpmnModeler from 'camunda-bpmn-js/lib/camunda-platform/Modeler';
import 'camunda-bpmn-js/dist/assets/camunda-platform-modeler.css';

var bpmnModeler = new BpmnModeler({
  container: '#canvas',
  propertiesPanel: {
    parent: '#properties'
  }
});

try {
  await bpmnModeler.importXML(someDiagram);
  console.log('success');
  bpmnModeler.get('canvas').zoom('fit-viewport');
} catch (err) {
  console.error('something went wrong:', err);
}

通过以上步骤，您应该能够成功安装和配置 Camunda BPMN.js 项目，并在您的 Web 应用程序中使用它。

camunda-bpmn-js Embeddable Camunda modeling distributions based on bpmn-js 项目地址: https://gitcode.com/gh_mirrors/ca/camunda-bpmn-js