CODEWITHSUNDEEP
javascriptbrowserify
huzal12
huzal12

Reputation: 79

Browserify does not work - why?

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?

Upvotes: 2

Views: 4703

Answers (1)

Badacadabra
Badacadabra

Reputation: 8497

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>

Upvotes: 2

Related Questions