11

我在使用 browserify 时遇到了一些麻烦。

目标

我正在尝试使用 Backbone 构建基本的 TodoMVC 单页应用程序，而不是<script>在我的标签堆中index.html，我试图将它们与 browserify 捆绑在一起。

这是我到目前为止所做的。

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

为了构建我的捆绑包，我正在使用

browserify lib/app.js > js/app.js

最后，我index.html的很简单

<!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>

问题

当我打开控制台并尝试运行此命令时

todoCollection.create({title: "My first todo"});

我收到一个错误

“无法读取未定义的属性‘延迟’”

堆栈跟踪

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)

问题

我已经做了很多关于如何浏览主干应用程序的搜索，但是在符合我目标的事情方面我几乎没有找到。

如何将我的单页主干应用程序捆绑到app.js我可以在 html 中需要的单个应用程序中？

作为旁白

我也不确定我是否正确地包含了 jQuery。如果 Backbone 也不是我的 browserified 捆绑包的一部分，那么 Backbone 将无法将其连接到 jQuery 吗？

非常感谢任何提示。

4

3 回答 3

14

编辑：

最新版本的 jquery 已通过 npm 分发和使用！这使得将 jquery 与 browserify 一起使用更简单。

我们现在需要做的就是安装软件包：

npm install jquery backbone

并要求模块：

var $ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;

老答案：

我已经成功地使用了jquery-browserify模块。

跑npm install jquery-browserify backbone

在名为 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>');
  }
});

使用模块：

var AppView = require('./app-view')

var appView = new AppView();

您可以像在代码中一样将 jquery 保留在脚本标记中，而不是使用 jquery-browserify，但在这种情况下，不要这样：

var $ = require('jquery-browserify');
Backbone.$ = $;

我会这样做：

var $ = Backbone.$ = window.$;
于 2013-11-16T08:28:37.610 回答
3

从 jQuery v2 开始，它能够将自己暴露为module.exports. 也就是说，您可以安装jquery模块而不是类似jquery-browserify.

npm install jquery backbone

但是仍然需要$手动更正 Backbones 属性。

var backbone = require('backbone')
backbone.$ = require('jquery')
于 2014-01-20T17:13:45.430 回答
2

这是一个 100% 的 jQuery 问题。错误是：无法读取未定义的属性“延迟”。Deferred 应该在哪里？在 jQuery ( http://api.jquery.com/jQuery.Deferred/ ) 中。这是一个导致错误的特定行：https ://github.com/jeromegn/Backbone.localStorage/blob/master/backbone.localStorage.js#L145 。只需Backbone.$ = window.$在您第一次需要骨干时这样做，它就会起作用。

于 2013-11-02T23:01:37.637 回答