Introduction to Browserify Part 1

Man 1: [00:01] Browserify is a phenomenal tool that brings the common js and node-style workflow to client-side development. What we're going to do here is look at exactly how that works. I've got this entry file here which I just called entry.js because that's the common terminology for a starting point file in Browserify. We're requiring this dep file, and you can see this dep file simply exports a three element array of foo, bar, and baz. We're requiring that and then just logging that out.

[00:36] You can see that just like any other node file we can run that with node, but if we want to be able to run this in the browser that's where Browserify comes in. what we can do is call Browserify. We'll pass it our entry file and then in this case, the simplest syntax is to tell it to output to bundle.js. Bundle is again, a common Browserify terminology that what it outputs is generally referred to as a bundle. You can see here that it has written bundle.js for us.

[01:11] Right now it looks a little bit crazy because it's somewhat minified by default. But if we just format this code, you can see that it really just boils down to one function that is immediately invoked. It's an immediately invoked function expression which you may be familiar with. Then these are the arguments that are passed to that function. You can see here that this is the contents of our entry.js file here, and then here are the contents of our dep.js file. What you'll notice is that the contents of each of these files is now wrapped in a closure.

[02:00] Our entry.js file here, the contents of it are wrapped in this function. You can see what's passed into this function is require, module, and export. Where those things would normally be provided by the node environment, in this case Browserify is providing them for us. Essentially it's just mapping each of these files to a lookup, so you can see that our dep.js file has been given the ID of 1, so we've got an object hash here. The ID of 1 maps to this file and its dependencies. The ID of 2 maps to what was our entry.js file and its dependencies.

[02:58] You can see that our entry.js file has this dependency and it has mapped the ./dep string to the ID of 1 which matches up here. It's a little bit confusing and hard to follow, but you really don't need to. Browserify is very well covered with tests, it's used by thousands of people. You can rely on the fact that it's going to work. This function up here which really un-minified we're looking at 20 lines or so, is not that complex really. But the fact that it's minified makes it a little hard to read, but essentially all it does is it implements the lookup functionality to do this mapping of ID to the files themselves.

[03:51] What we can now do is if we make this a little bigger, we can actually now run the node bundle file and we'll get the same output as we did before running the entry file. Of course since this is all a single bundle, you can then include that in an HTML file and get the same output. Let's go ahead and create a simple HTML file. If we go ahead and include that bundle.js file in our HTML file we can then go run that file and see that we get that output in our console in the browser that we did on the command line.