Browserify: Nested/Conditional Requires

Question

In the CommonJS/Browserify module below, how can I avoid importing both foo and bar every time -- instead importing only the one that is needed based on the conditional in init()?

var Foo = require('foo'),
    Bar = require('bar'),

Component = function(config) {
  this.type = config.type;
  this.init();
};

Component.prototype = {

  init: function() {
    var instance = null;

    switch (this.type) {
      case ('foo'):
        instance = new Foo(...);
        break;
      case ('bar'):
        instance = new Bar(...);
        break;
    }
  }
};

sebpiq · Accepted Answer · 2015-10-28 11:52:41Z

If you came here (like me) because there is some modules you want to exclude from the bundle depending on a condition in your code, for example :

// I want browserify to ignore `nodeOnlyModule` because it
// can't be browserified (for example if it uses native extensions, etc ...)
var isBrowser = typeof window === 'undefined'
if (!isBrowser) var nodeOnlyModule = require('nodeOnlyModule')

There is different options (see the docs) :

browserify's ignore option will simply replace the module you don't want to bundle by an empty stub, and bundle that instead
exclude will exclude the module altogether, your code will then throw a "not found" error if you try to import it.
you can use the browser field from your package.json file. With this you can provide a mapping of files to import, in effect overriding node's module resolve algorithm when browserifying.

vkurchatkin · Accepted Answer · 2014-04-23 16:49:27Z

4

Component = function(config) {
  this.type = config.type;
  this.init();
};

Component.prototype = {

  init: function() {
    var instance = null;

    switch (this.type) {
      case ('foo'):
        instance = new (require('foo'))(...);
        break;
      case ('bar'):
        instance = new (require('bar'))(...);
        break;
    }
  }
};

answered Apr 23, 2014 at 16:49

vkurchatkin

13.6k2 gold badges51 silver badges56 bronze badges

3 Comments

chrisfrancis27 Over a year ago

Does this actually avoid importing both files though? I'm pretty sure that when Browserify inlines the require() statements it will bundle up everything, regardless of whether it's in a conditional, but I may be wrong.

vkurchatkin Over a year ago

of course it will bundle up everything, there is no way to know the result at compile time

digitaldonkey Over a year ago

You might bee looking for github.com/niksy/browserify-require-async

Collectives™ on Stack Overflow

Browserify: Nested/Conditional Requires

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related