Browse Source

Fixed #1353: Custom bundling with browserify requiring manual installation of `babelify`. Updated readme on custom bundling.

webworkersNetwork
jos 9 years ago
parent
commit
9744c5eca5
3 changed files with 46 additions and 34 deletions
  1. +5
    -0
      HISTORY.md
  2. +38
    -25
      README.md
  3. +3
    -9
      package.json

+ 5
- 0
HISTORY.md View File

@ -4,6 +4,11 @@ http://visjs.org
## not yet released, version 4.9.1-SNAPSHOT ## not yet released, version 4.9.1-SNAPSHOT
### General
- Fixed #1353: Custom bundling with browserify requiring manual installation
of `babelify`.
### Network ### Network
- Fixed #1343: Connected edges are now deselected too when deselecting a node. - Fixed #1343: Connected edges are now deselected too when deselecting a node.

+ 38
- 25
README.md View File

@ -22,15 +22,13 @@ The vis.js library is developed by [Almende B.V](http://almende.com).
Install via npm: Install via npm:
npm install vis
$ npm install vis
Install via bower: Install via bower:
bower install vis
$ bower install vis
Link via cdnjs:
http://cdnjs.com
Link via cdnjs: http://cdnjs.com
Or download the library from the github project: Or download the library from the github project:
[https://github.com/almende/vis.git](https://github.com/almende/vis.git). [https://github.com/almende/vis.git](https://github.com/almende/vis.git).
@ -126,28 +124,28 @@ of the project.
To build the library from source, clone the project from github To build the library from source, clone the project from github
git clone git://github.com/almende/vis.git
$ git clone git://github.com/almende/vis.git
The source code uses the module style of node (require and module.exports) to The source code uses the module style of node (require and module.exports) to
organize dependencies. To install all dependencies and build the library, organize dependencies. To install all dependencies and build the library,
run `npm install` in the root of the project. run `npm install` in the root of the project.
cd vis
npm install
$ cd vis
$ npm install
Then, the project can be build running: Then, the project can be build running:
npm run build
$ npm run build
To automatically rebuild on changes in the source files, once can use To automatically rebuild on changes in the source files, once can use
npm run watch
$ npm run watch
This will both build and minify the library on changes. Minifying is relatively This will both build and minify the library on changes. Minifying is relatively
slow, so when only the non-minified library is needed, one can use the slow, so when only the non-minified library is needed, one can use the
`watch-dev` script instead: `watch-dev` script instead:
npm run watch-dev
$ npm run watch-dev
## Custom builds ## Custom builds
@ -163,10 +161,25 @@ The source code of vis.js consists of commonjs modules, which makes it possible
Before you can do a build: Before you can do a build:
- Install node.js, npm, browserify, and uglify-js on your system.
- Download or clone the vis.js project.
- Install the dependencies of vis.js by running `npm install` in the root of the project.
- Install node.js and npm on your system: https://nodejs.org/
- Install the following modules using npm: `browserify`, `babelify`, and `uglify-js`:
```
$ [sudo] npm install -g browserify babelify uglify-js
```
- Download or clone the vis.js project:
```
$ git clone https://github.com/almende/vis.git
```
- Install the dependencies of vis.js by running `npm install` in the root of the project:
```
$ cd vis
$ npm install
```
#### Example 1: Bundle a single visualization #### Example 1: Bundle a single visualization
@ -177,13 +190,13 @@ exports.DataSet = require('./lib/DataSet');
exports.Timeline = require('./lib/timeline/Timeline'); exports.Timeline = require('./lib/timeline/Timeline');
``` ```
Install browserify globally via `[sudo] npm install -g browserify`, then create a custom bundle like:
Then create a custom bundle using browserify, like:
browserify custom.js -t babelify -o vis-custom.js -s vis
$ browserify custom.js -t babelify -o 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 with uglifyjs (installed globally with `[sudo] npm install -g uglify-js`):
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 vis-custom.js -o vis-custom.min.js
$ uglifyjs vis-custom.js -o vis-custom.min.js
The custom bundle can now be loaded like: The custom bundle can now be loaded like:
@ -204,11 +217,11 @@ The custom bundle can now be loaded like:
The default bundle `vis.js` is standalone and includes external dependencies such as hammer.js and moment.js. When these libraries are already loaded by the application, vis.js does not need to include these dependencies itself too. To build a custom bundle of vis.js excluding moment.js and hammer.js, run browserify in the root of the project: The default bundle `vis.js` is standalone and includes external dependencies such as hammer.js and moment.js. When these libraries are already loaded by the application, vis.js does not need to include these dependencies itself too. To build a custom bundle of vis.js excluding moment.js and hammer.js, run browserify in the root of the project:
browserify index.js -t babelify -o vis-custom.js -s vis -x moment -x hammerjs
$ browserify index.js -t babelify -o vis-custom.js -s vis -x moment -x hammerjs
This will generate a custom bundle *vis-custom.js*, which exposes the namespace `vis`, and has moment and hammerjs excluded. The generated bundle can be minified with uglifyjs: This will generate a custom bundle *vis-custom.js*, which exposes the namespace `vis`, and has moment and hammerjs excluded. The generated bundle can be minified with uglifyjs:
uglifyjs vis-custom.js -o vis-custom.min.js
$ uglifyjs vis-custom.js -o vis-custom.min.js
The custom bundle can now be loaded as: The custom bundle can now be loaded as:
@ -254,12 +267,12 @@ var timeline = new Timeline(container, data, options);
Install the application dependencies via npm: Install the application dependencies via npm:
npm install vis moment
$ npm install vis moment
The application can be bundled and minified: The application can be bundled and minified:
browserify app.js -o app-bundle.js -t babelify
uglifyjs app-bundle.js -o app-bundle.min.js
$ browserify app.js -o app-bundle.js -t babelify
$ uglifyjs app-bundle.js -o app-bundle.min.js
And loaded into a webpage: And loaded into a webpage:
@ -282,11 +295,11 @@ And loaded into a webpage:
To test the library, install the project dependencies once: To test the library, install the project dependencies once:
npm install
$ npm install
Then run the tests: Then run the tests:
npm test
$ npm test
## License ## License

+ 3
- 9
package.json View File

@ -28,15 +28,14 @@
"watch": "gulp watch", "watch": "gulp watch",
"watch-dev": "gulp watch --bundle" "watch-dev": "gulp watch --bundle"
}, },
"dependencies": {
"dependencies": {},
"devDependencies": {
"emitter-component": "^1.1.1", "emitter-component": "^1.1.1",
"hammerjs": "^2.0.4", "hammerjs": "^2.0.4",
"keycharm": "^0.2.0", "keycharm": "^0.2.0",
"moment": "^2.10.2", "moment": "^2.10.2",
"propagating-hammerjs": "^1.4.3", "propagating-hammerjs": "^1.4.3",
"uuid": "^2.0.1"
},
"devDependencies": {
"uuid": "^2.0.1",
"babel": "^5.1.11", "babel": "^5.1.11",
"babel-loader": "^5.0.0", "babel-loader": "^5.0.0",
"babelify": "^6.0.2", "babelify": "^6.0.2",
@ -52,10 +51,5 @@
"uglify-js": "^2.4.20", "uglify-js": "^2.4.20",
"webpack": "^1.8.5", "webpack": "^1.8.5",
"yargs": "^3.7.2" "yargs": "^3.7.2"
},
"browserify": {
"transform": [
"babelify"
]
} }
} }

Loading…
Cancel
Save