我在使用browserify时遇到了一些麻烦。
我正在尝试使用Backbone构建基本的TodoMVC单页应用程序,而不仅仅是<script>在我的标签堆中,而是index.html尝试将它们全部与browserify捆绑在一起。
<script>
index.html
到目前为止,这就是我要做的。
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"});
我得到一个错误
“无法读取未定义的属性’Deferred’”
堆栈跟踪
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.jshtml中可能需要的单个应用中?
app.js
作为旁白
我不确定我是否也正确包含了jQuery。如果Backbone也不属于我的浏览器捆绑包,它会很难将自己连接到jQuery?
任何提示,不胜感激。
编辑:
最新版本的jquery可通过npm分发和使用!这使得将jquery与browserify一起使用更加简单。
现在我们需要做的就是安装软件包:
npm install jquery backbone
并需要以下模块:
var $ = require('jquery'); var Backbone = require('backbone'); Backbone.$ = $;
旧答案:
我已经成功使用了jquery-browserify模块。
跑 npm install jquery-browserify backbone
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.$;