目标

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

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

LIB /模型/ todo.js

var backbone = require("backbone");

var Todo = module.exports = backbone.Model.extend({

  defaults: function() {
    return {
      title: "",
      completed: false,
      createdAt: Date.now(),
    };
  },

});

LIB /集合/ 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)

问题

我已经做了很多关于如何浏览骨干应用程序的搜索，但是我发现与我的目标相匹配的东西很少。

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

暂且放弃

我不确定我是否正确包含jQuery。如果它不是我的浏览器捆绑包的一部分，Backbone是否会将自己连接到jQuery？

非常感谢任何提示。

Answer 1

修改

最新版本的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.$;

Answer 2

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

npm install jquery backbone

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

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

Answer 3

这是一个100％的jQuery问题。错误是：无法读取undefined的属性'Deferred'。应该延期的地方？在jQuery（http://api.jquery.com/jQuery.Deferred/）中。这是一个特定的行，导致错误：https://github.com/jeromegn/Backbone.localStorage/blob/master/backbone.localStorage.js#L145。当你第一次需要骨干时，只需做Backbone.$ = window.$即可。

如何使用browserify捆绑骨干应用程序？

目标

问题

问题

3 个答案: