Merge pull request #135 from maraoz/feature/configurable-bundle

Customizable browser bundle
11 years ago · 089a47591a
6 changed files with 79 additions and 10 deletions
--- a/Gruntfile.js
+++ b/Gruntfile.js
@ -16,7 +16,7 @@ module.exports = function(grunt) {
          stdout: true,
          stderr: true
        },
-        command: 'node ./browser/browserify.js',
+        command: 'node ./browser/browserify.js -a',
      }
    },
    watch: {
@ -25,7 +25,7 @@ module.exports = function(grunt) {
        tasks: ['markdown']
      },
      scripts: {
-        files: ['**/*.js', '**/*.html', '!**/node_modules/**', '!browser/bundle.js', '!browser/testdata.js'],
+        files: ['**/*.js', '**/*.html', '!**/node_modules/**', '!browser/bundle.js', '!browser/testdata.js', '!browser/vendor-bundle.js'],
        tasks: ['shell'],
      },
    },
--- a/README.md
+++ b/README.md
@ -257,13 +257,49 @@ Bitcore is still under heavy development and not quite ready for "drop-in" produ
 Bitcore needs some developer love. Please send pull requests for bug fixes, code optimization, and ideas for improvement.

 #Browser support
-Work to enable Bitcore for use in the browser is ongoing. To build bitcore for the browser:
+## Building the browser bundle
+To build bitcore full bundle for the browser:
+(this is automatically executed after you run `npm install`)
+
+```
+node browser/browserify.js -a
+```
+This will generate a `browser/bundle.js` file which you can include
+in your HTML to use bitcore in the browser.
+
+## 
+
+##Example browser usage
+
+From example/simple.html
 ```
-npm install -g grunt-cli
-grunt shell
+<!DOCTYPE html>
+<html>
+  <body>
+    <script src="../browser/bundle.js"></script>
+    <script>
+      var bitcore = require('bitcore');
+      var Address = bitcore.Address;
+      var a = new Address('1KerhGhLn3SYBEQwby7VyVMWf16fXQUj5d');
+      console.log('1KerhGhLn3SYBEQwby7VyVMWf16fXQUj5d is valid? '+a.isValid());
+    </script>
+  </body>
+</html>
 ```

-You can check a usage example at examples/example.html
+You can check a more complex usage example at examples/example.html
+
+## Generating a customized browser bundle
+To generate a customized bitcore bundle, you can specify 
+which submodules you want to include in it with the -s option:
+
+```
+node browser/browserify.js -s Transaction,Address
+```
+This will generate a `browser/bundle.js` containing only the Transaction
+ and Address class, with all their dependencies. 
+Use this option if you are not using the whole bitcore library, to optimize
+the bundle size, script loading time, and general resource usage.


 #License
--- a/browser/browserify.js
+++ b/browser/browserify.js
@ -10,6 +10,7 @@
 var fs = require('fs');
 var browserify = require('browserify');
 var browserPack = require('browser-pack');
+var program = require('commander');

 // concat browser vendor files
 var exec = require('child_process').exec;
@ -22,6 +23,20 @@ var puts = function(error, stdout, stderr) {

 exec('cd browser; sh concat.sh', puts);

+var list = function(val) {
+  return val.split(',');
+};
+
+program
+  .version('0.0.1')
+  .option('-a, --includeall', 'Include all submodules.')
+  .option('-s, --submodules <items>', 'Include the listed comma-separated submodules.', list)
+  .parse(process.argv);
+
+if (!program.includeall && (!program.submodules || program.submodules.length === 0)) {
+  console.log('Must use either -s or -a option. For more info use the --help option');
+  process.exit(1);
+}

 var pack = function (params) {
  var preludePath  = 'node_modules/soop/example/custom_prelude.js';
@ -75,9 +90,11 @@ b.require('./util/log');
 b.require('./util/util');
 b.require('./util/EncodedData');
 b.require('./util/VersionedData');
-b.add('./browser/bignum_config.js');
 modules.forEach(function(m) {
+  if (program.includeall || program.submodules.indexOf(m) > -1) {
+    console.log('Including '+m+' in the browser bundle');
    b.require('./' + m + '.js' , {expose: './'+m} );
+  }
 });
 b.require('soop');

--- a/examples/simple.html
+++ b/examples/simple.html
@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <script src="../browser/bundle.js"></script>
+    <script>
+      var bitcore = require('bitcore');
+      var Address = bitcore.Address;
+      var a = new Address('1KerhGhLn3SYBEQwby7VyVMWf16fXQUj5d');
+      console.log('1KerhGhLn3SYBEQwby7VyVMWf16fXQUj5d is valid? '+a.isValid());
+    </script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@ -41,7 +41,8 @@
    "url": "https://github.com/bitpay/bitcore.git"
  },
  "scripts": {
-    "test": "mocha test -R spec"
+    "test": "mocha test -R spec",
+    "postinstall": "node ./browser/browserify.js -a"
  },
  "dependencies": {
    "soop": "git://github.com/bitpay/soop.git",
@ -66,7 +67,8 @@
    "browserify-buffertools": "~1.0.2",
    "chai": "~1.9.0",
    "brfs": "~1.0.0",
-    "async": "~0.2.10"
+    "async": "~0.2.10",
+    "commander": "~2.1.0"
  },
  "license": "MIT"
 }
--- a/test/index.html
+++ b/test/index.html
@ -38,6 +38,8 @@
    <script src="test.VersionedData.js"></script>
    <script src="test.Wallet.js"></script>
    <script src="test.WalletKey.js"></script>
+    <!--
+    -->
    <script>
      mocha.run();
    </script>