Skip to content
This repository has been archived by the owner on Jul 29, 2019. It is now read-only.

updated the webpack documentation #3295

Merged
merged 2 commits into from
Jul 26, 2017
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 21 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
@@ -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
@@ -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: