diagram-jsを使うと決めたはいいが、ドキュメントはそこまで親切ではない感じなので
わかったことをメモって行く。
e-tipsmemo.hatenablog.com
最初はdiagram-jsのサンプルはgithubにある
シンプルなdiagram-jsからどう言った点を実装すればbpmn-js(のような機能実装)になるかを確認するために
diagram-jsのexampleにbpmn-jsのファイルを追加していって、bpmn-jsが再構築できることを確認する。
github.com
最初はexample以下の部分のものを抜き出して
webpack、webpack-dev-serverで変更があった場合にすぐにリロードされるような環境を整えた。
e-tipsmemo.hatenablog.com
これを踏まえて、node_modules以外のファイルの位置は以下のようにした。
package.json
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "./node_modules/.bin/webpack", "start": "./node_modules/.bin/webpack --watch & ./node_modules/.bin/webpack-dev-server --hot --inline --progress --colors" },
"devDependencies": { "bpmn-moddle": "^5.1.6", "diagram-js": "^3.3.0", "diagram-js-direct-editing": "^1.4.2", "html-webpack-plugin": "^3.2.0", "ids": "^1.0.0", "inherits": "^2.0.3", "jquery": "^3.4.0", "raw-loader": "^2.0.0", "webpack": "^4.30.0", "webpack-cli": "^3.3.1", "webpack-dev-server": "^3.3.1" }
webpack.config.js
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', entry: './app/app.js', output: { path: path.join(__dirname, 'public/js'), filename: 'bundle-app.js' }, devServer:{ contentBase:'./public', publicPath: '/', watchContentBase: true, openPage: 'index.html', open: true, port: 3001 }, module:{ rules:[ { test: /\.bpmn$/, use: 'raw-loader' } ] }, plugins:[ new HtmlWebpackPlugin({ template : "./public/index.html" }) ] };
これでWSL上から
npm startするとウェブブラウザが立ち上がる。
この状態ではdiagra-jsのサンプルが実行できる(はず