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

我正在浏览器遇到一些麻烦。

目标

我试图用Backbone构build基本的TodoMVC单页面应用程序,而不是在我的index.html中使用<script>标记,我试图用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 /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); 

为了build立我的包,我正在使用

 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) 

问题

我已经做了很多关于如何浏览骨干应用程序的search,但是我没有发现符合我的目标的东西。

我怎样才能将我的单页骨干应用程序捆绑到一个单一的app.js ,我可以在html中要求?

作为旁白

我不知道我是否正确地包括jQuery。 Backbone会不会自己连接到jQuery,如果它也不是我的browserified束的一部分?

任何提示,非常感谢。

       

网上收集的解决方案 "如何使用browserify捆绑骨干应用程序?"

编辑:

最新版本的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的文件中创build一个视图模块:

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

由于jQuery v2,它能够将自己公开为module.exports 。 也就是说,你可以安装jquery模块,而不是像jquery-browserify的东西。

 npm install jquery backbone 

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

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

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