如何使用 browserify 捆绑一个主干应用程序? [英] How to use browserify to bundle a backbone app?
问题描述
我在使用 browserify 时遇到了一些麻烦.
I'm running into a little trouble with browserify.
我正在尝试使用 Backbone 构建基本的 TodoMVC 单页应用程序，而不是我的 index.html 中的一堆 <script> 标签，我正在尝试将它们与 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/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);
要构建我的包，我正在使用
To build my bundle, I'm using
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"});
出现错误
无法读取未定义的属性 'Deferred'"
"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)
问题
我已经搜索了很多关于如何浏览主干应用程序的搜索，但我发现很少有符合我目标的东西.
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.
如何将我的单页主干应用程序捆绑到我可以在 html 中要求的单个 app.js 中?
How can I bundle my single-page backbone app into a single app.js that I can require in the html?
顺便说一句
我也不确定我是否正确地包含了 jQuery.如果 Backbone 也不是我的浏览器化包的一部分，它是否会在将自身连接到 jQuery 时遇到问题?
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?
非常感谢任何提示.
推荐答案
最新版本的 jquery 已通过 npm 分发和使用！这使得在 browserify 中使用 jquery 变得更简单.
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 模块.
I've used the jquery-browserify module successfully for this.
运行 npm install 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 保留在脚本标记中，而不是使用 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屋！
