Menu
I'm running into a little trouble with browserify.
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>
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)
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.
763
Edit:
The most recent version of jquery is distributed and usable via npm! This makes using jquery with browserify simpler.
All we need to do now is install the packages:
npm install jquery backbone
And require the modules:
var $ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;
Old answer:
I've used the jquery-browserify module successfully for this.
Run npm install jquery-browserify backbone
Creating a view module in a file named app-view.js:
var Backbone = require('backbone');
var $ = require('jquery-browserify');
Backbone.$ = $;
module.exports = Backbone.View.extend({
initialize: function(){
this.render();
},
render: function(){
console.log('wuuut')
$('body').prepend('<p>wooooooooooooooo</p>');
}
});
Using the module:
var AppView = require('./app-view')
var appView = new AppView();
You can keep jquery in a script tag like in your code rather than using jquery-browserify, but in that case instead of this:
var $ = require('jquery-browserify');
Backbone.$ = $;
I would do this:
var $ = Backbone.$ = window.$;
Since jQuery v2, it is capable of exposing itself as module.exports. That is, you can install the jquery module instead of something like jquery-browserify.
npm install jquery backbone
But it is still necessary to correct Backbones $ property manually.
var backbone = require('backbone')
backbone.$ = require('jquery')
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
