RanchiMall/flocore
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Docs: Update browser build documentation to reflect the current module development strategy.

Browse Source
This commit is contained in:
Braydon Fuller 2015-01-16 11:30:09 -05:00
parent 6f7ce378c8
commit bfc7edf5f5
1 changed files with 12 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
docs/guide/browser.md
View File

@ -4,61 +4,39 @@ description: Guide to writing modules and optimizing browser bundles.
# Browser Builds # Browser Builds
When developing a module that will need to work in a browser and does not use the entire Bitcore namespace, it's recommended to narrow the scope of the requires to the particular modules that are needed. It will produce a smaller browser bundle as it will only include the JavaScript that is nessessary. Below is a quick tutorial that will use three modules. When developing a module that will depend on Bitcore, it's recommended to exclude Bitcore in the distributed browser bundle when using browserify and to use the `--external bitcore` parameter. It will produce a smaller browser bundle, as it will only include the JavaScript that is nessessary, and will depend on the Bitcore browser build which is better for distribution.
## Tutorial ## Tutorial
**Step 1**: Require Bitcore Modules **Step 1**: Require Bitcore
Here we require specific Bitcore modules that will be used in a `index.js` file: Here we require Bitcore and define the namespace (`index.js`):
```javascript ```javascript
var PrivateKey = require('bitcore/lib/privatekey'); var bitcore = require('bitcore');
var PublicKey = require('bitcore/lib/publickey'); var PrivateKey = bitcore.PrivateKey;
var Address = require('bitcore/lib/address'); var PublicKey = bitcore.PublicKey;
var Address = bitcore.Address;
// the rest of the module here
``` ```
See the [main file](https://github.com/bitpay/bitcore/blob/master/index.js) for bitcore for a complete list, as well as the [Bitcore Documentation](index.md).
**Step 2**: Browserifying **Step 2**: Browserifying
Next we will generate a browser bundle using [browserify](https://www.npmjs.com/package/browserify) by running the command: Next we will generate a browser bundle using [browserify](https://www.npmjs.com/package/browserify) by running the command:
```bash ```bash
browserify index.js -o index.browser.js browserify index.js:module-name --external bitcore -o module-name.js
``` ```
This will output a file `index.browser.js` at around 700KB *(the entire Bitcore namespace is around 2MB)*. This will output a file `module-name.js` with only the code loaded from `index.js` (bitcore.js will need to be loaded beforehand, which is around 145KB gzipped)
**Step 3**: Uglifying **Step 3**: Uglifying
This can be further optimized by using [uglifyjs](https://www.npmjs.com/package/uglify-js), and running the command: This can be further optimized by using [uglifyjs](https://www.npmjs.com/package/uglify-js), and running the command:
```bash ```bash
uglifyjs index.browser.js --compress --mangle -o index.browser.min.js uglifyjs module-name.js --compress --mangle -o module-name.min.js
``` ```
The resulting file `index.browser.min.js` in this case should be less than 300KB.
## Modules
Here is a list of some of the common modules:
```javascript
var Address = require('bitcore/lib/address');
var Block = require('bitcore/lib/block');
var BlockHeader = require('bitcore/lib/blockheader');
var HDPrivateKey = require('bitcore/lib/hdprivatekey');
var HDPublicKey = require('bitcore/lib/hdpublickey');
var PaymentProtocol = require('bitcore/lib/paymentprotocol');
var PrivateKey = require('bitcore/lib/privatekey');
var PublicKey = require('bitcore/lib/publickey');
var Script = require('bitcore/lib/script');
var Transaction = require('bitcore/lib/transaction');
var URI = require('bitcore/lib/uri');
var Unit = require('bitcore/lib/unit');
```
For more informatation about each of the modules please see the [Bitcore Documentation](index.md).