Browse Source

moved babel plugins from devDependencies to dependencies (#2629)

If you want to integrate the vis.js sources in a project you need some babel-pugins.

see #2353
runTests
Alexander Wunschik 7 years ago
committed by yotamberk
parent
commit
81de568b73
2 changed files with 40 additions and 11 deletions
  1. +33
    -4
      README.md
  2. +7
    -7
      package.json

+ 33
- 4
README.md View File

@ -265,10 +265,6 @@ var options = {};
var timeline = new Timeline(container, data, options); var timeline = new Timeline(container, data, options);
``` ```
Install the application dependencies via npm:
$ npm install vis moment
The application can be bundled and minified: The application can be bundled and minified:
$ browserify app.js -o dist/app-bundle.js -t babelify $ browserify app.js -o dist/app-bundle.js -t babelify
@ -289,6 +285,39 @@ And loaded into a webpage:
</html> </html>
``` ```
#### 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-").
```js
var visTimeline = require('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:
```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"
]
}
}]
}
```
## Test ## Test
To test the library, install the project dependencies once: To test the library, install the project dependencies once:

+ 7
- 7
package.json View File

@ -29,8 +29,14 @@
"watch-dev": "gulp watch --bundle" "watch-dev": "gulp watch --bundle"
}, },
"dependencies": { "dependencies": {
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-polyfill": "^6.20.0", "babel-polyfill": "^6.20.0",
"babel-runtime": "^6.20.0",
"babel-plugin-transform-es3-member-expression-literals": "^6.8.0",
"babel-plugin-transform-es3-property-literals": "^6.8.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.18.0",
"babel-runtime": "^6.20.0",
"emitter-component": "^1.1.1", "emitter-component": "^1.1.1",
"moment": "^2.12.0", "moment": "^2.12.0",
"propagating-hammerjs": "^1.4.6", "propagating-hammerjs": "^1.4.6",
@ -39,12 +45,6 @@
}, },
"devDependencies": { "devDependencies": {
"async": "^2.0.0-rc.2", "async": "^2.0.0-rc.2",
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-plugin-transform-es3-member-expression-literals": "^6.8.0",
"babel-plugin-transform-es3-property-literals": "^6.8.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.18.0",
"babelify": "^7.3.0", "babelify": "^7.3.0",
"clean-css": "^3.4.10", "clean-css": "^3.4.10",
"gulp": "^3.9.1", "gulp": "^3.9.1",

Loading…
Cancel
Save