From 926ac5d3d820fe73c7df14e1a4cfde38c3dfc4b1 Mon Sep 17 00:00:00 2001 From: Alexander Wunschik Date: Sat, 31 Dec 2016 16:34:17 +0100 Subject: [PATCH] generate custom builds into the dist folder --- README.md | 42 +++++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index f4f1c188..1ec6e82f 100644 --- a/README.md +++ b/README.md @@ -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: - + @@ -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: - - + + - + @@ -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:
- - + + ```