搭建一个自定义的工作流管理平台（一）
最近一直在做工作流的相关开发工作，自己也搭建了一个工作流的管理平台来方便开发调试。这里记录一下相关的工作。
工作流的引擎我采用的是业界流行的Camunda，这个引擎基于BPMN/DMN的标准来实现工作流，可以很方便的进行工作流的编排，实现低代码运行，以及业务逻辑编排等功能。
具体如何运行Camunda引擎在我之前的博客有介绍，这里不再重复，只描述一下如何搭建一个网站来实现工作流的管理。其实Camunda也提供了WEB的应用来管理工作流，但是如果自己有一些额外的需求，要进行一些自定义的功能，那么最好是自己开发一个WEB应用，通过调用Camunda引擎提供的API接口来实现对工作流的管理。
我选择用webpack+bootstrap的框架来快速搭建一个简单漂亮的Web应用。首先是用webpack来进行初始化的工作,新建一个名为workflow-manager的文件夹,在里面运行以下命令:
npm init -y
npm install webpack webpack-cli --save-dev
npm install copy-webpack-plugin --save-dev
npm install jquery bootstrap@4.6.2 feather-icons --save在这个文件夹里面新建一个src目录,我们的html, js等文件都将放置在这个目录下.
在src目录里面我们新建一个workflow.html文件，内容如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.101.0">
<title>Workflow Management</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.6/examples/dashboard/">
<!-- Bootstrap core CSS -->
<link href="assets/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="assets/workflow.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">Company name</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="#">Sign out</a>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="sidebar-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<span data-feather="home"></span>
Edit Workflow <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file"></span>
View Workflow
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="shopping-cart"></span>
Edit Rule
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="users"></span>
View Rule
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="bar-chart-2"></span>
Reports
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="layers"></span>
Integrations
</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">New/Edit Workflow</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group mr-2">
<button type="button" class="btn btn-sm btn-outline-secondary">Download</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Deploy</button>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="assets/jquery/dist/jquery.slim.min.js"></script>
<script src="assets/bootstrap/dist/bootstrap.bundle.min.js"></script>
<script src="assets/feather-icons/dist/feather.min.js"></script>
<script src="workflow.bundle.js"></script>
</body>
</html>在这个html里面，可以看到引用了放置在本地的bootstrap的js, CSS，以及jquery,feather库的js文件。我们需要修改一下webpack.config.js文件，把node_modules里面安装的对应文件拷贝出来。这里需要用到前面安装的copy-webpack-plugin来进行拷贝。在文件夹的根目录新建一个webpack.config.js文件，内容如下：
var CopyPlugin = require('copy-webpack-plugin');
const path = require('path');
module.exports = {
entry: {
workflow: './src/workflow.js',
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.less$/i,
use: ['style-loader', 'css-loader', 'less-loader'],
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
}
],
},
plugins: [
new CopyPlugin({
patterns: [
{ from: 'node_modules/jquery/dist/jquery.slim.min.js', to: 'assets/jquery/dist' },
{ from: 'node_modules/bootstrap/dist/css/bootstrap.min.css', to: 'assets/bootstrap/dist/css' },
{ from: 'node_modules/bootstrap/dist/js/bootstrap.bundle.min.js', to: 'assets/bootstrap/dist' },
{ from: 'node_modules/feather-icons/dist/feather.min.js', to: 'assets/feather-icons/dist' },
{ from: 'src/workflow.html', to: 'workflow.html' },
{ from: 'src/workflow.css', to: 'assets/' },
]
}),
]
};简要介绍一下，这里面的内容的entry, output部分描述了把src目录下的js文件编译为dist目录下的对应js文件（文件名增加了.bundle的字符）。module里面定义了解析不同后缀的文件所需要加载的loader。plugin里面定义了用copy-webpack-plugin来把文件拷贝到dist目录下。
最后我们修改一下package.json文件，增加命令来进行npm run build，编译拷贝文件到dist目录，内容如下：
{
"name": "dashboard",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"copy-webpack-plugin": "^11.0.0",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
},
"dependencies": {
"bootstrap": "^4.6.2",
"feather-icons": "^4.29.0",
"jquery": "^3.6.1"
}
}
在根目录下运行npm run build命令，等待执行完成后，在dist目录我们就可以找到编译后的内容了。在web服务器中访问dist目录的workflow.html文件，即可成功显示页面。
下一步我们需要修改这个workflow.html，使得可以进行Camunda workflow的编辑和部署。