Import vis.js with webpack

Question

I would like to import only DataSet and Network from vis.js in our Webpack application using ES6 modules.

One easy way to do it is to just import dist/vis-network.min.js but it's already minified so not very compatible with our webpack workflow.

I had a look at the vis.js code and it's not using ES6 modules so I can't import them.

Is there a simpler way then doing a custom vis.js build?

Lemniscate

Have you found a solution to this? – Proclus

@Proclus I just customized the gulp file. – Lemniscate

Webpack now supports commonjs, amd and es6 module syntax. See here for an example: github.com/webpack/webpack/tree/master/examples/mixed – Westhead

Answer 1

It is not only possible but encouraged to import only the parts of vis.js that you want to use in your application. This lets you only load the parts of vis.js that you'll need in your project.

There is not much documentation on this topic, but there is a demo project that shows how to selectively import parts of vis.js using webpack.

Sloppy

Answer 2

There is ability to create your own packs with vis.js.

For doing it you should:

Open file gulpfile.js and add config to INDIVIDUAL_BUNDLES.

For example:

var INDIVIDUAL_BUNDLES = [
 {entry: './index-timeline-graph2d.js', filename: 'vis-timeline-
    graph2d.min.js'},
 {entry: './index-network.js', filename: 'vis-network.min.js'},
 {entry: './index-graph3d.js', filename: 'vis-graph3d.min.js'},
 {entry: './index-graph3d.js', filename: 'vis-graph3d.js', 'notMini': 
  true}
];

There added config for vis-graph3d not minified.

For not mini network, I assume config will be:

 {entry: './index-network.js', filename: 'vis-network.js', 'notMini': true},

Or you can write your own bundle.

After change file your should make build (see README.md) shortly:

$ cd vis
$ npm install
$ npm run build

After in dist folder you can find vis-network.js.

Chiquitachirico