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 everywhere I look after actually piling the code. No one has said how to actually use the code in the browser property.

I have a grunt task as such:

browserify: {
      standalone: {
        src: [ '<%= yeoman.server %>/shared-ponents/**/*.js' ],
        dest: '<%= yeoman.client %>/app/js/browserifed-shared-code.js',
        /* Commented out, zero documentation on this. Can only expose one module it seems.
        options: {
          browserifyOptions: {
            standalone: 'Utility' //Unable to say '**/*' error :-/
          }
        }
        */
      },

This seems to work, it makes a file like this:

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';

var UrlController = function(){};

UrlController.test = function () {
    return 'test';
};

module.exports = UrlController;

},{}],2:[function(require,module,exports){
'use strict';

var Utility = function(){};

Utility.isASCII = function (str) {
    return /^[\x00-\xFF]*$/.test(str);
};

Utility.isAlphaNumeric = function(str) {
    var code, i, len;
    for (i = 0, len = str.length; i < len; i++) {
        code = str.charCodeAt(i);
        if (!(code > 47 && code < 58) && // numeric (0-9)
        !(code > 64 && code < 91) && // upper alpha (A-Z)
        !(code > 96 && code < 123)) { // lower alpha (a-z)
            return false;
        }
    }
    return true;
};

module.exports = Utility;

},{}]},{},[1,2]);

I include it automatically using an injector which works simular to:

<script src="app/js/browserifed-shared-code.js"></script>

Now i expect that I'd be able to call

require('Utility');

But I get

Uncaught ReferenceError: require is not defined(…)

I have no idea/no way of loading these modules in the browser. :'-/

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 everywhere I look after actually piling the code. No one has said how to actually use the code in the browser property.

I have a grunt task as such:

browserify: {
      standalone: {
        src: [ '<%= yeoman.server %>/shared-ponents/**/*.js' ],
        dest: '<%= yeoman.client %>/app/js/browserifed-shared-code.js',
        /* Commented out, zero documentation on this. Can only expose one module it seems.
        options: {
          browserifyOptions: {
            standalone: 'Utility' //Unable to say '**/*' error :-/
          }
        }
        */
      },

This seems to work, it makes a file like this:

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';

var UrlController = function(){};

UrlController.test = function () {
    return 'test';
};

module.exports = UrlController;

},{}],2:[function(require,module,exports){
'use strict';

var Utility = function(){};

Utility.isASCII = function (str) {
    return /^[\x00-\xFF]*$/.test(str);
};

Utility.isAlphaNumeric = function(str) {
    var code, i, len;
    for (i = 0, len = str.length; i < len; i++) {
        code = str.charCodeAt(i);
        if (!(code > 47 && code < 58) && // numeric (0-9)
        !(code > 64 && code < 91) && // upper alpha (A-Z)
        !(code > 96 && code < 123)) { // lower alpha (a-z)
            return false;
        }
    }
    return true;
};

module.exports = Utility;

},{}]},{},[1,2]);

I include it automatically using an injector which works simular to:

<script src="app/js/browserifed-shared-code.js"></script>

Now i expect that I'd be able to call

require('Utility');

But I get

Uncaught ReferenceError: require is not defined(…)

I have no idea/no way of loading these modules in the browser. :'-/

• javascript
• node.js
• gruntjs
• npm
• browserify

• 1 I'm confused by what you're trying to do. Browserify bundles up your code for efficient client delivery, and can expose a single global (via the standalone option) through which you can access internals. It does not turn the client into Nodejs, so it does not give you require, you simply get a library that either loads anonymously, or with a single global access var, named as per standalone. You then don't "require" the thing you browserified client side, you just use Utility for Utility.whateverPropertyYouExposed, Utility.whateverFunctionYouExposed(), etc. – Mike 'Pomax' Kamermans Commented Dec 19, 2015 at 17:03
• you simply get a library that either loads anonymously care to explain this, I load it anonymously and access it how? (Below I've answered my own question because I still couldn't find an explanation for just this) – Oliver Dixon Commented Dec 21, 2015 at 8:31
• if it loads anonymously, you don't "access it" later, the code you wrote should already be able to do everything it needs to do. If you need access to it later, you pile with the --standalone flag, and then make sure the entry point code exposes everything you need access to. – Mike 'Pomax' Kamermans Commented Dec 21, 2015 at 16:16

2 Answers 2

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-ponents/library1.js' ],
        dest: '<%= yeoman.client %>/app/js/library1-bundled.js',
        bundleOptions : { standalone : 'Library1' }
      },
      library2 : {
        src: [ '<%= yeoman.server %>/shared-ponents/library2.js' ],
        dest: '<%= yeoman.client %>/app/js/library2-bundled.js',
        bundleOptions : { standalone : 'Library2' }
      },
      library3 : {
        src: [ '<%= yeoman.server %>/shared-ponents/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

<script src="bundle.js" type="text/javascript"/> 

In your grunt task :

browserify: {
      standalone: {
        src: [ '<%= yeoman.server %>/shared-ponents/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 monJS (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

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-ponents/exposed-modules.js' ],
        dest: '<%= yeoman.client %>/app/js/browserifed-shared-code.js',
        options: {
          browserifyOptions: {
              standalone: 'Shared'
          }
        }
      },
    }

//In-pleted example.
watch: {
      scripts: {
        files: ['<%= yeoman.server %>/shared-ponents/**/*.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.

var Utility = require('./utility');
var UrlController = require('./url-controller');

var Shared = 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;