I'm running into a little trouble with browserify.
The Goal
I'm trying to build the basic TodoMVC single-page app with Backbone, only instead of heaps of <script> tags in my index.html, I'm trying to bundle them all up with browserify.
Here's what I have going so far.
lib/models/todo.js
var backbone = require("backbone");
var Todo = module.exports = backbone.Model.extend({
defaults: function() {
return {
title: "",
completed: false,
createdAt: Date.now(),
};
},
});
lib/collections/todo.js
var backbone = require("backbone"),
LocalStorage = require("backbone.localstorage");
var TodoCollection = module.exports = backbone.Collection.extend({
localStorage: new LocalStorage('todomvc'),
});
lib/app.js
var Todo = require("./models/todo"),
TodoCollection = require("./collections/todo");
(function(global) {
global.todoCollection = new TodoCollection([], {model: Todo});
})(window);
To build my bundle, I'm using
browserify lib/app.js > js/app.js
Lastly, my index.html is quite simple
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Todo MVC</title>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="/js/app.js"></script>
</body>
</html>
The Problem
When I open the console and try to run this command
todoCollection.create({title: "My first todo"});
I get an error
"Cannot read property 'Deferred' of undefined"
Stacktrace
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 <anonymous>:2:16
at Object.InjectedScript._evaluateOn (<anonymous>:580:39)
at Object.InjectedScript._evaluateAndWrap (<anonymous>:539:52)
at Object.InjectedScript.evaluate (<anonymous>:458:21)
The Question
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.
How can I bundle my single-page backbone app into a single app.js that I can require in the html?
As an aside
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?
Any tips are greatly appreciated.
See Question&Answers more detail:
os 
