Webpack
The jsPlumb Community Edition can be bundled with Webpack - see /demo/webpack
for an example. This page discusses that demonstration.
package.json
{
"name": "jsplumb-webpack-demo",
"version": "1.0.0",
"description": "example of using webpack to bundle jsplumb",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "jsPlumb <hello@jsplumbtoolkit.com> (https://jsplumbtoolkit.com)",
"license": "MIT",
"devDependencies": {
"grunt-webpack": "^1.0.11",
"jsplumb": "file:../../jsplumb.tgz",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}
}
Note that we reference jsPlumb as a local file (jsplumb.tgz
is the output of npm pack
, which creates a local copy of what npm publish
would post to npm). You can just require jsPlumb as you would any other dependency:
"devDependencies":{
"jsplumb":"2.2.11"
}
2.2.11 is the most current at the time of writing. It may not be now.
webpack.config.js
var path = require("path");
var webpack = require("webpack");
module.exports = {
cache: true,
entry: {
bundle: "./index.js"
},
output: {
path: path.join(__dirname, "dist"),
publicPath: "dist/",
filename: "[name].js",
chunkFilename: "[chunkhash].js"
}
};
Gruntfile.js
We're using Grunt for this demo. You don't have to use Grunt. Edit: it's a few years now since this page was written...personally I wouldn't bother with Grunt now at all. I'd just do it with scripts in npm.
module.exports = function(grunt) {
var webpackConfig = require("./webpack.config.js");
grunt.loadNpmTasks("grunt-webpack");
grunt.initConfig({
webpack: {
options: webpackConfig,
build: {}
}
});
grunt.registerTask("build", ["webpack:build"]);
};
index.js
var j = require("./node_modules/jsplumb/dist/js/jsplumb.js").jsPlumb.getInstance({
Connector: "Flowchart",
Anchor: "Bottom",
Endpoint: [ "Dot", { radius: 2 }],
ConnectionOverlays: [
[ "Arrow", { location: 0, width: 10, length: 7, foldbackPoint: 0.62, direction:-1 }]
]
});
j.connect({source: "one", target: "two" });
j.on(window, "resize", j.repaintEverything);
A point to note is that jsPlumb exports a bunch of things, so the require
statement has to further specify jsPlumb
before it can call getInstance
. We do this (export a bunch of things) because several of the modules that jsPlumb depends on can be used independently of jsPlumb.
The full list of exports from the require
statement above is:
- Biltong - Geometry functions
- Katavorio - Drag/drop manager
- Mottle - Event manager
- jsBezier - Bezier curve functions
- jsPlumb
- jsPlumbUtil - Utility functions