如何使用browserify捆绑主干应用程序？ [英] How to use browserify to bundle a backbone app?
问题描述
我正在与browserify有点麻烦了。
I'm running into a little trouble with browserify.
我试图建立与骨干网基本TodoMVC单页的应用程序，而不是只堆＆LT;脚本＆GT; 的标签我的的index.html ，我试图捆绑他们都与browserify。
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.
这是我迄今下去。
的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>
问题
当我打开控制台，并尝试运行此命令
The Problem
When I open the console and try to run this command
todoCollection.create({title: "My first todo"});
我得到一个错误
无法读取属性未定义'递延'。
"Cannot read property 'Deferred' of undefined"
堆栈跟踪
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)
问题
我已经做了相当多的关于如何browserify骨干的应用程序搜索的，但我在与我的客观事物方面几乎没有发现。
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.
我怎么可以捆绑我的单页骨干应用到一个单一的 app.js ，我可以在HTML要求？
How can I bundle my single-page backbone app into a single app.js that I can require in the html?
顺便说一句
我不知道如果我的jQuery包括正确要么。 IS的骨干网将不得不自己连接到jQuery的麻烦，如果它也没有我的browserified包的一部分？
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?
任何提示都大大AP preciated。
Any tips are greatly appreciated.
推荐答案
编辑：
最近的jQuery的版本是分布式的，并通过NPM可用！这使得使用jQuery与browserify简单。
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
和要求的模块：
var $ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;
旧的答案：
我用的jQuery-browserify 模块成功这一点。
运行 NPM安装的jQuery-browserify骨干
创建名为APP-view.js文件视图模块：
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>');
}
});
使用模块：
var AppView = require('./app-view')
var appView = new AppView();
您可以保持在jQuery的脚本标记就像你code，而不是使用jQuery-browserify，但在这种情况下，而不是这样的：
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.$ = $;
我会做这样的：
var $ = Backbone.$ = window.$;
这篇关于如何使用browserify捆绑主干应用程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
