#Node #Browserify

This post will show you how to easily download and include 3rd party libraries in your Browserify bundle.

1) Project Structure

Let’s start by assuming the following project structure

|-- dist // Build will end up here
|-- src 
    |-- js
        |-- main.js // Our main JavaScript file
        |-- module.js // Local module
|-- package.json

We have our main.js file where we will require our local module (module.js) and our jQuery library

2) Requiring the jQuery library

Installing jQuery

One of the advantages of using Browserify is that you don’t have to use bower or download your dependencies manually. You can just install everything with npm.

To install jquery:

npm install jquery

Requiring jQuery

Since jQuery has been installed with npm, we can require it in our client code like we would do in Node: by simply using the name of the library.

var $ = require('jquery');

Browserify makes it easy to reuse server side libraries if you use node and to centralize all your JavaScript libraries in one place. Not to mention that npm is now a mature and solid packet manager.

3) Requiring local modules

As a bonus here is the correct way to require local modules.

When requiring a local module, the path should always start with:

  • ./ representing the current directory
  • ../ representing the parent directory

In our project example, to require module.js in main.js, we have to use

var module = require('./module');

Happy bundling !

#Node #Browserify