Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

adapt webpack example for visjs-network #58

Open
micahstubbs opened this issue Mar 28, 2019 · 0 comments
Open

adapt webpack example for visjs-network #58

micahstubbs opened this issue Mar 28, 2019 · 0 comments
Labels

Comments

@micahstubbs
Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant