Introduction to Browserify Part 2

Share this video with your friends

Send Tweet
Published 7 years ago
Updated 3 years ago

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

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

[00:07] 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.

[00:30] 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 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.

[01:00] 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.

[01:19] One thing to note is that when you require something by name like this, 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.

~ 6 years ago

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