diagram-js example とbpmn-js の再構築①

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以外のファイルの位置は以下のようにした。
f:id:katakanan:20190530113137p:plain

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のサンプルが実行できる(はず

f:id:katakanan:20190531222554p:plain