Browserify does not work - why?

Question

I have the following code that I browserify to bundle.js, that I include (before loading any other .js file) on my front-end. The file I browserify is simply this this:

var firebase = require('firebase')

I then call authorize() on this variable, in the next file that is included on the front-end, but I get an error saying firebase is not defined?

Answer 1

Browserify is a module bundler that enables you to use CommonJS (Node) modules in your browser. This implies that your project must follow CommonJS conventions to export ( exports , module.exports ) and import ( require ) modules. Here is a basic example:

Your module ( module.js )

var foo = function () {
  console.log('Foo');
};

var bar = function () {
  console.log('Bar');
};

module.exports = {
  foo: foo,
  bar: bar
};

Your entry point ( main.js )

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

module.foo(); // Foo
module.bar(); // Bar

This code will work out-of-the-box with Node, but your browser cannot interpret it. This is where Browserify is useful...

When you run the command browserify main.js -o bundle.js on your entry point, Browserify traverses all your dependencies (here module.js ) and loads them in a bundle. This bundle is usable in your browser, so you can now load it in a script tag:

<script src="bundle.js"></script>