Browse Source

updated the webpack example (#3295)

Thanks again @mojoaxel !
revert-3409-performance
Alexander Wunschik 7 years ago
committed by Yotam Berkowitz
parent
commit
435a2ab878
1 changed files with 21 additions and 17 deletions
  1. +21
    -17
      README.md

+ 21
- 17
README.md View File

@ -193,7 +193,7 @@ exports.Timeline = require('./lib/timeline/Timeline');
Then create a custom bundle using browserify, like: Then create a custom bundle using browserify, like:
$ browserify custom.js -t [ babelify --presets [es2015] ] -o dist/vis-custom.js -s vis $ 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: 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 $ 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 #### Example 4: Integrate vis.js components directly in your webpack build
You can integrate e.g. the timeline component directly in you 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 ```js
var visTimeline = require('vis/index-timeline-graph2d');
import { DataSet, Timeline } from 'vis/index-timeline-graph2d';
var container = document.getElementById('visualization'); var container = document.getElementById('visualization');
var data = new DataSet(); var data = new DataSet();
var timeline = new Timeline(container, data, {}); 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 ```js
module: { 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 ## Test
To test the library, install the project dependencies once: To test the library, install the project dependencies once:

Loading…
Cancel
Save