title: How to use browserify to bundle a backbone app?
body: <p>I'm running into a little trouble with browserify.</p>
  
  <h2>The Goal</h2>
  
  <p>I'm trying to build the basic TodoMVC single-page app with Backbone, only instead of heaps of <code>&lt;script&gt;</code> tags in my <code>index.html</code>, I'm trying to bundle them all up with browserify.</p>
  
  <p>Here's what I have going so far.</p>
  
  <p><strong>lib/models/todo.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>var backbone = require("backbone");
  
  var Todo = module.exports = backbone.Model.extend({
  
    defaults: function() {
      return {
        title: "",
        completed: false,
        createdAt: Date.now(),
      };
    },
  
  });
  </code></pre>
  
  <p><strong>lib/collections/todo.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>var backbone     = require("backbone"),
      LocalStorage = require("backbone.localstorage");
  
  var TodoCollection = module.exports = backbone.Collection.extend({
  
    localStorage: new LocalStorage('todomvc'),
  
  });
  </code></pre>
  
  <p><strong>lib/app.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>var Todo            = require("./models/todo"),
      TodoCollection  = require("./collections/todo");
  
  (function(global) {
  
    global.todoCollection = new TodoCollection([], {model: Todo});
  
  })(window);
  </code></pre>
  
  <p>To build my bundle, I'm using</p>
  
  <pre class="lang-sh prettyprint-override"><code>browserify lib/app.js &gt; js/app.js
  </code></pre>
  
  <p>Lastly, my <code>index.html</code> is quite simple</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Todo MVC&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="/js/app.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h2>The Problem</h2>
  
  <p>When I open the console and try to run this command</p>
  
  <pre class="lang-js prettyprint-override"><code>todoCollection.create({title: "My first todo"});
  </code></pre>
  
  <p>I get an error</p>
  
  <blockquote>
    <p>"Cannot read property 'Deferred' of undefined"</p>
  </blockquote>
  
  <p>Stacktrace</p>
  
  <pre class="lang-none prettyprint-override"><code>TypeError: Cannot read property 'Deferred' of undefined
      at Backbone.LocalStorage.sync.window.Store.sync.Backbone.localSync (http://localhost:4000/js/app.js:182:47)
      at Backbone.sync (http://localhost:4000/js/app.js:255:40)
      at _.extend.sync (http://localhost:4000/js/app.js:1773:28)
      at _.extend.save (http://localhost:4000/js/app.js:1979:18)
      at _.extend.create (http://localhost:4000/js/app.js:2370:13)
      at &lt;anonymous&gt;:2:16
      at Object.InjectedScript._evaluateOn (&lt;anonymous&gt;:580:39)
      at Object.InjectedScript._evaluateAndWrap (&lt;anonymous&gt;:539:52)
      at Object.InjectedScript.evaluate (&lt;anonymous&gt;:458:21)
  </code></pre>
  
  <h2>The Question</h2>
  
  <p>I've done quite a bit of searching on how to browserify backbone apps, but I've found little in terms of things that match my objective.</p>
  
  <p>How can I bundle my single-page backbone app into a single <code>app.js</code> that I can require in the html?</p>
  
  <p><strong>As an aside</strong></p>
  
  <p>I'm not sure if I'm including jQuery properly either. Is Backbone going to have trouble connecting itself to jQuery if it's also not part of my browserified bundle?</p>
  
  <p>Any tips are greatly appreciated.</p>