Don't understand how Browserify works

[iamdriz]

I've recently been looking into using a dependancy manager for a project and have spent the day experimenting with RequireJS (requirejs.org). It seems to do the trick and does everything I want such as modules, dependancies and of course bundling. It's best feature is that it loads in the relevant files (or bundles) when needed.

Now, I've been using Node.js for another project and came across Browserify, which according to various articles, is supposed to be a better option than RequireJS... but I'm not seeing the benefits... in fact so far it looks like it doesn't do half of what I can do with RequireJS, and I can only assume this means I don't understand how Browserify works!

So some issues I have:

1.) According to the docs, you bundle your code into one file, but this seems incorrect, as the whole idea is to avoid this and ONLY load in files relevant to the page you are on (Yes, I know you only bundle files you want via the require method), but still it seems to suggest you compile everything into one file rather than into smaller bundles that can depend on each other.

2.) Even if you do move the files into separate bundles, I haven't seen any documentation of how to load the relevant bundle when needed..

e.g. in require I can do:

require.config({
    bundles: {
        'shared': ['jquery', 'jquery.ui'],
        'home': ['jquery.slideshow','jquery.twitter']
    }
});

define('homePage', ['jquery', 'jquery.twitter'], function(jquery, jquery.twitter) {
// do something here
});

And that will then load the files as I need if I call the homePage code and it will load the shared and home bundles, and then so and so forth, so I can used shared across pages, and then a different bundle for different sections, etc. And it's all handled client side, so if I had some functionality in an AngularJS app like:

define(['angular', 'dependancyModule'], function(angular) {
  angular
    .module('HelloWorld', ['dependancyModule'])
    .filter('HelloWorld', function() {
      return function() {
        return 'Hello world!';
      }
    });
});

If I called that HelloWorld module, it would load the dependancy.

I'm not seeing how I could do this with Browserify, without physically loading in the bundled js file using a script tag in the page itself, so this seems a much more manual process than it would be with require.

If someone could clear this up, it'd be awesome. Thanks.

[impronunciable]

Browserify goal is to provide node's require to the browser, not to solve every aspect of the app deployment. It does the work (and really good) and plays well with a lot of different other tools.

1. If you want to generate a bunch of bundles, you may want to take a look at factor-bundle. It generate one bundle per entry you specify and an extra bundle for the shared dependencies (I wrote a blogpost on how I use it at work).

2. I don't remember the names but there are some solutions around adding the client-side extra layer for the script injection for each page. It shouldn't be difficult to add your own layer.

[iamdriz]

@danzajdband So would it be accurate to say that Browserify basically allows you to bundle JS files based on their dependency but the loading of the bundles is outside of its scope, as is any files that want to use the bundle itself as a dependency. As it seems because the bundling is done using Node, and because require doesn't exist in the browser, files can't import bundles. Is that correct?

Where as RequireJS does everything dynamically in the browser itself by injecting the script tags onto the page when a bundle or file is required.

[impronunciable]

@iamdriz I'm not 100% sure I understand but Browserify leaves the script loading into the browser work to other tools (basically attaching script tags to the DOM). You can require dependencies from other bundles using External requires. What you cannot do is to "require an external file" although there are petitons for that and I think there are plugins for that.