This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Introduction to Browserify Part 2

1:44 Node.js lesson by

Browserify allows you to leverage 10s of thousands of javascript modules available in the Node Package Manager (npm) in your browser apps.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Browserify allows you to leverage 10s of thousands of javascript modules available in the Node Package Manager (npm) in your browser apps.

Avatar
Joseph

Could you explain how to debug the browserify bundle in webstorm with breakpoints?

Instructor: Where things really get interesting with Browserify is when you start seeing how simple the workflow is for using external modules.

Here, in our entry file you can see that we have included this external dependency already with this DEP file, but if we get done here and say mpm_-s, it's going to install underscore for us and save that reference in our package.json file.

Then, all we have to do to make this ready to actually use is go up here and say require. I'm putting it in in a variable name underscore. I'm just going to say baruppers=.map and I'm going to map those strings from the DEP file to uppercase, and then, change our console.log to uppers. Come down here and rebundle our file.

You can see it's super fast. And then, if we go back to our browser here you can see that we do have an uppercase version of all those strings. That's really it. We had a couple of steps, all within our IDE, and we're already using this external dependency.

One thing to note is that when you require something by name like this, it starts...it's just the name. That means the node, or whatever you're using is going to look in node modules. If you start a path with a dot, then, it knows to use a relative file path and look for a file relative to where it's being included.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?