Skip to content

adapt webpack example for visjs-network #58

@micahstubbs

Description

@micahstubbs

adapt the webpack example from the vis.js README for visjs-network. inspired by #57


Example 3: Integrate vis.js components directly in your webpack build

You can integrate e.g. the timeline component directly in you webpack build.
Therefor you can e.g. import the component-files from root direcory (starting with "index-").

TODO: add analogous Network example

import { DataSet, Network } from 'vis/index-timeline-graph2d'

var container = document.getElementById('visualization')
var data = new DataSet()
var timeline = new Network(container, data, {})

To get this to work you'll need to add some babel-loader-setting to your webpack-config:

module: {
  module: {
    rules: [{
      test: /node_modules[\\\/]vis[\\\/].*\.js$/,
      loader: 'babel-loader',
      query: {
        cacheDirectory: true,
        presets: [ "babel-preset-env" ].map(require.resolve),
        plugins: [
          "transform-es3-property-literals", // #2452
          "transform-es3-member-expression-literals", // #2566
          "transform-runtime" // #2566
        ]
      }
    }]
  }
}

There is also an demo-project showing the integration of vis.js using webpack.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions