How to use browserify to bundle a backbone app?

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.

标签： javascript node.js backbone.js browserify

3条回答

够拽才男人

2楼-- · 2020-02-08 18:49

It is a 100% percent jQuery issue. The error is: Cannot read property 'Deferred' of undefined. Where Deferred is supposed to be? In jQuery (http://api.jquery.com/jQuery.Deferred/). Here it is a specific line, that causes an error: https://github.com/jeromegn/Backbone.localStorage/blob/master/backbone.localStorage.js#L145. Just do Backbone.$ = window.$ when you require backbone for the first time and it will work.

0人赞添加讨论(0) 举报

Bombasti

3楼-- · 2020-02-08 18:54

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.$;

0人赞添加讨论(0) 举报

叛逆

4楼-- · 2020-02-08 18:54

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')

0人赞添加讨论(0) 举报