How To Bundle Multiple Javascript Libraries With Browserify?

I'm trying to use Browerifiy in the browser, if I use the standalone option it exposes one module. I don't want to do this. The website and documentation just seems to cut off ever

Solution 1:

You have two choices here. Either you

SOLUTION 1

Create a standalone browserify module for each library you want to access in your browser. This has been answered in your other post. Basically you do multiple browserify bundles.

.

browserify library1.js --standalone Library1 -o library1-bundle.js
browserify library2.js --standalone Library2 -o library2-bundle.js
browserify library3.js --standalone Library3 -o library3-bundle.js

 <script src="library1-bundle.js"type="text/javascript"/> 
 <script src="library2-bundle.js"type="text/javascript"/> 
 <script src="library3-bundle.js"type="text/javascript"/> 

So, in your building tool you would have

browserify: {
      library1 : {
        src: [ '<%= yeoman.server %>/shared-components/library1.js' ],
        dest: '<%= yeoman.client %>/app/js/library1-bundled.js',
        bundleOptions : { standalone : 'Library1' }
      },
      library2 : {
        src: [ '<%= yeoman.server %>/shared-components/library2.js' ],
        dest: '<%= yeoman.client %>/app/js/library2-bundled.js',
        bundleOptions : { standalone : 'Library2' }
      },
      library3 : {
        src: [ '<%= yeoman.server %>/shared-components/library3.js' ],
        dest: '<%= yeoman.client %>/app/js/library3-bundled.js',
        bundleOptions : { standalone : 'Library3' }
      }
}

---

SOLUTION 2

Or, create a main entry point for all your modules.

// ---- main.js -----module.exports.Library1 = require('./lib1');
module.exports.Library2 = require('./lib2');
module.exports.Library3 = require('./lib3');

Then, you use browserify

browserify main.js--standalone Library -o bundle.js

Then in your browser

<scriptsrc="bundle.js"type="text/javascript"/>

In your grunt task :

browserify: {
      standalone: {
        src: [ '<%= yeoman.server %>/shared-components/main.js' ],
        dest: '<%= yeoman.client %>/app/js/main-bundled.js',
        bundleOptions : { standalone : 'Library' }
      }}

---

Note on Module Loaders and Browserify

Then, to expand on the answer I made on your previous post, browserify exposes it's bundled modules differently depending on the module manager present in your environment.

• If you are in node, it's commonJS (sync) so you can use require('');
• If you are using AMD (async), you can use that AMD syntax.
• If you are in the browser, you muse use either window. or global.

---

Grunt dynamic task definition

To automate this a little, you can also pass in a configuration :

bundledLibraries : [
    Library1 : {
        src : './../src/lib1.js',
        dest : './../src/lib1-bundled.js'
    },
    Library2 ...
]

Then you iterate to add them to the grunt config (

Check this article for creating them dynamically http://www.integralist.co.uk/posts/dynamic-grunt-tasks.html

Solution 2:

I got this working my own way without obfuscating the project too much with dependancies.

In grunt I have

browserify: {
      standalone: {
        src: [ '<%= yeoman.server %>/shared-components/exposed-modules.js' ],
        dest: '<%= yeoman.client %>/app/js/browserifed-shared-code.js',
        options: {
          browserifyOptions: {
              standalone: 'Shared'
          }
        }
      },
    }

//In-completed example.
watch: {
      scripts: {
        files: ['<%= yeoman.server %>/shared-components/**/*.js'],
        tasks: ['browserify'],
        options: {
            spawn: false
        }
        },

Then I exposed the modules I want using:

'use strict';

//This is the main entry point for all shared libraries.varUtility = require('./utility');
varUrlController = require('./url-controller');

varShared = function(){};

//Added new client modules to be exposed here.Shared.Utility = Utility;
Shared.UrlController = UrlController;

module.exports = Shared;

In the browser I can now call

shared.Utility.isAscii('test'); //Working.

And anywhere I wanna reuse I just assign in the scope, so

//Some scope.var Utility = shared.Utility;