jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

generate custom builds into the dist folder

readme-improvements
Alexander Wunschik 8 years ago
parent
bbb48497af
commit
926ac5d3d8
1 changed files with 21 additions and 21 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +21
    -21
      README.md

+ 21
- 21
README.md View File

@ -10,8 +10,8 @@ The library is designed to be easy to use, handle large amounts
of dynamic data, and enable manipulation of the data.
The library consists of the following components:
- DataSet and DataView. A flexible key/value based data set. Add, update, and
remove items. Subscribe on changes in the data set. A DataSet can filter and
- DataSet and DataView. A flexible key/value based data set. Add, update, and
remove items. Subscribe on changes in the data set. A DataSet can filter and
order items, and convert fields of items.
- DataView. A filtered and/or formatted view on a DataSet.
- Graph2d. Plot data on a timeline with lines or barcharts.
@ -131,7 +131,7 @@ To build the library from source, clone the project from github
$ git clone git://github.com/almende/vis.git
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.
$ cd vis
@ -146,7 +146,7 @@ To automatically rebuild on changes in the source files, once can use
$ npm run watch
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:
$ npm run watch-dev
@ -156,7 +156,7 @@ slow, so when only the non-minified library is needed, one can use the
The folder `dist` contains bundled versions of vis.js for direct use in the browser. These bundles contain all the visualizations and include external dependencies such as hammer.js and moment.js.
The source code of vis.js consists of commonjs modules, which makes it possible to create custom bundles using tools like [Browserify](http://browserify.org/) or [Webpack](http://webpack.github.io/). This can be bundling just one visualization like the Timeline, or bundling vis.js as part of your own browserified web application.
The source code of vis.js consists of commonjs modules, which makes it possible to create custom bundles using tools like [Browserify](http://browserify.org/) or [Webpack](http://webpack.github.io/). This can be bundling just one visualization like the Timeline, or bundling vis.js as part of your own browserified web application.
*Note that hammer.js version 2 is required as of v4.*
@ -167,11 +167,11 @@ Before you can do a build:
- 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:
```
@ -187,7 +187,7 @@ Before you can do a build:
#### Example 1: Bundle a single visualization
For example, to create a bundle with just the Timeline and DataSet, create an index file named **custom.js** in the root of the project, containing:
For example, to create a bundle with just the Timeline and DataSet, create an index file named **custom.js** in the root of the project, containing:
```js
exports.DataSet = require('./lib/DataSet');
@ -196,11 +196,11 @@ exports.Timeline = require('./lib/timeline/Timeline');
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 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 vis-custom.js -o vis-custom.min.js
$ uglifyjs dist/vis-custom.js -o dist/vis-custom.min.js
The custom bundle can now be loaded like:
@ -208,7 +208,7 @@ The custom bundle can now be loaded like:
<!DOCTYPE HTML>
<html>
<head>
<script src="vis-custom.min.js"></script>
<script src="dist/vis-custom.min.js"></script>
<link href="dist/vis.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
@ -221,11 +221,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:
$ browserify index.js -t babelify -o vis-custom.js -s vis -x moment -x hammerjs
$ browserify index.js -t babelify -o dist/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:
$ uglifyjs vis-custom.js -o vis-custom.min.js
$ uglifyjs dist/vis-custom.js -o dist/vis-custom.min.js
The custom bundle can now be loaded as:
@ -234,11 +234,11 @@ The custom bundle can now be loaded as:
<html>
<head>
<!-- load external dependencies -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.1.3/hammer.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<!-- load vis.js -->
<script src="vis-custom.min.js"></script>
<script src="dist/vis-custom.min.js"></script>
<link href="dist/vis.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
@ -275,8 +275,8 @@ Install the application dependencies via npm:
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 dist/app-bundle.js -t babelify
$ uglifyjs dist/app-bundle.js -o dist/app-bundle.min.js
And loaded into a webpage:
@ -288,8 +288,8 @@ And loaded into a webpage:
</head>
<body>
<div id="visualization"></div>
<script src="app-bundle.min.js"></script>
<script src="dist/app-bundle.min.js"></script>
</body>
</html>
```

Write Preview
Loading…
Cancel
Save