Skip to content

Commit

Permalink
updated the webpack example (almende#3295)
Browse files Browse the repository at this point in the history
Thanks again @mojoaxel !
  • Loading branch information
mojoaxel authored and Primoz Susa committed Jan 3, 2019
1 parent 8bb60d1 commit 515792f
Showing 1 changed file with 21 additions and 17 deletions.
38 changes: 21 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ exports.Timeline = require('./lib/timeline/Timeline');
Then create a custom bundle using browserify, like:

$ browserify custom.js -t [ babelify --presets [es2015] ] -o dist/vis-custom.js -s vis

This will generate a custom bundle *vis-custom.js*, which exposes the namespace `vis` containing only `DataSet` and `Timeline`. The generated bundle can be minified using uglifyjs:

$ uglifyjs dist/vis-custom.js -o dist/vis-custom.min.js
Expand Down Expand Up @@ -288,36 +288,40 @@ And loaded into a webpage:
#### Example 4: Integrate vis.js components directly in your webpack build

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

```js
var visTimeline = require('vis/index-timeline-graph2d');
import { DataSet, Timeline } from 'vis/index-timeline-graph2d';

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

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

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

There is also an [demo-project](https://github.com/mojoaxel/vis-webpack-demo) showing the integration of vis.js using webpack.

## Test

To test the library, install the project dependencies once:
Expand Down

0 comments on commit 515792f

Please sign in to comment.